Kecepatan sebuah website untuk dimuat adalah salah satu faktor penting untuk meningkatkan performa secara keseluruhan. Laman yang lambat saat diakses juga akan meningkatkan bounce rate dimana pengguna lebih memilih untuk menutup dan meninggalkan website tersebut. Oleh karena itu, melakukan optimasi seperti penggunaan PageSpeed Insight dinilai membantu pemilik website.
Pada faktanya, Google mengungkapkan bahwa 53% pengguna internet cenderung akan meninggalkan sebuah website yang membutuhkan waktu lebih dari 3 detik untuk muncul. Dengan demikian, meningkatkan waktu loading website merupakan faktor utama untuk mendapatkan banyak pengunjung.
Tidak hanya itu, website yang lambat juga memiliki poin buruk dari sisi User Experience (EX) karena membuat pengunjung website harus menunggu dan merasa tidak nyaman. Hal tersebut juga menjadi salah satu faktor suatu website memiliki sedikit pengunjung.
Lantas sebenarnya, apa itu Google PageSpeed Insight? Simak pembahasan dan cara menggunakannya untuk mengoptimasi performa website.
Google PageSpeed Insight
Pada artikel ini, Jagoan Hosting akan membagikan solusi untuk melakukan optimasi kecepatan pada sebuah website. Ada beragam jenis tools tersedia untuk meningkatkan performa website. Beberapa di antaranya, yaitu Pingdom, Geek Flare, GTMetrix, WebPageTest, dan Google PageSpeed Insight.
Salah satu tool yang bisa digunakan dengan gratis adalah Google PageSpeed Insight. Fitur dari Google ini mampu memberikan laporan terkait performa website secara akurat dan sesuai dengan indikator penilaian standar oleh Google.
Sejak November 2018, Google PageSpeed Insight secara resmi menggunakan teknologi Lighthouse. Sebelumnya, Lighthouse adalah sebuah ekstensi pada Google Chrome yang juga berfungsi untuk mengecek performa sebuah website.
Penggunaan Lighthouse sebagai mesin analisis utama pada Google PageSpeed Insight memungkinkan adanya laporan metrik yang lebih detail dan semakin akurat. Integrasi ini juga memudahkan pengguna agar tidak perlu mengunduh Lighthouse secara terpisah.
Cukup dengan membuka halaman website Google PageSpeed Insight, kamu sudah bisa melakukan pengecekan performa website secara mendalam dengan mudah lho, Sob!
Cara Menggunakan Google PageSpeed Insight
Berikut sejumlah tahapan yang perlu dilakukan untuk menggunakan Google PageSpeed Insight:
1. Membuka halaman Google PageSpeed Insight
Silahkan mengakses website Google PageSpeed Insight untuk mengecek performa sebuah laman menggunakan tool resmi dari Google ini.
2. Memasukkan alamat website
Silahkan memasukkan alamat website yang akan dicek dan klik tombol Analyze (Analisis).
3. Google PageSpeed Insight akan menampilkan hasil analisis
Beberapa informasi yang bisa dilihat, seperti kecepatan loading website yang ditampilkan dalam skala persen. Nilai 0-49 merupakan indikasi website yang lambat; 50-89 untuk website dengan kecepatan rata-rata; dan nilai 90-100 untuk laman yang dimuat dengan cepat.
4. Membaca hasil analisis yang diberikan.
Selain kecepatan website untuk dimuat, alat yang dirilis oleh Google ini akan menampilkan hasil analisis menjadi enam bagian. Hal tersebut terbagi menjadi, Field Data, Origin Summary, Lab Data, Opportunities, Diagnostics, dan Passed Audits.
Field Data dan Origin Summary
Field Data dan Origin Summary adalah nilai kecepatan website berdasarkan First Contentful Paint (FCP) dan First Input Delay (FID). FCP adalah waktu yang dibutuhkan untuk sebuah gambar atau teks pertama muncul saat website diakses.
Di sisi lain, FID adalah jarak waktu antara interaksi pertama pengunjung (klik tautan/link) dan respon pertama browser menanggapi interaksi tersebut. Sebuah website dinilai memiliki performa baik apabila memiliki nilai tinggi untuk FCP dan FID.
Lab Data
Berikut beberapa informasi yang bisa diambil dari Lab Data:
- First Contentful Paint adalah waktu dimana gambar atau teks pertama sebuah website muncul.
- Speed Index menunjukkan durasi kecepatan isi halaman sebuah website terlihat jelas. Semakin rendah nilainya semakin bagus.
- Time to Interactive adalah waktu pertama yang menunjukkan sebuah halaman dianggap interaktif secara keseluruhan.
- First Meaningful Paint merupakan indikator untuk mengukur kapan konten utama dari sebuah halaman muncul.
- First CPU Idle menandakan waktu pertama dimana pengunjung bisa melakukan input pada website.
- Estimated Input Latency menunjukkan durasi waktu yang dibutuhkan sebuah website untuk merespon input yang dimasukkan pengguna.
Opportunities (Peluang)
Bagian Opportunities memberikan sejumlah langkah optimasi yang bisa dilakukan untuk meningkatkan performa dari sebuah website.
Diagnostics
Diagnostics menunjukkan informasi berupa detail kinerja website yang belum disebutkan pada hasil analisis sebelumnya.
Passed Audits
Passed Audits menunjukkan detail langkah dan jenis-jenis optimasi apa saja yang sudah berhasil dilakukan pada website tersebut.
Cara Mendapatkan Skor Tinggi pada Google PageSpeed Insight
Google PageSpeed Insight akan memberikan hasil analisis performa website dengan skala angka 0 sampai 100. Semakin tinggi skor menunjukkan bahwa suatu website telah berjalan sesuai standar dari Google. Secara ideal, nilai 90-100 adalah target yang harus dicapai oleh sebuah website. Oleh karena itu, kamu perlu menyelesaikan masalah yang ditampilkan dari hasil analisis untuk mencapai skor maksimal.
Pada umumnya, setiap website memiliki skor berbeda berdasarkan jenis konten, tema, dan konfigurasi yang diterapkan. Namun, terdapat beberapa masalah yang sering terjadi pada website, mulai dari ukuran gambar terlalu besar, tidak mengaktifkan caching, sampai versi website pada tampilan mobile yang kurang optimal.
Berikut adalah solusi untuk mengatasi empat permasalahan paling umum pada website. Pengimplementasian solusi di bawah ini dapat membantu untuk meningkatkan performa website dan memperoleh skor tinggi pada Google PageSpeed Insight.
1. Melakukan Optimasi Gambar Pada Website
Menambahkan gambar pada konten website adalah hal penting untuk membuat tampilan website atau isi artikel yang lebih menarik bagi pengunjung. Selain itu, gambar juga membantu pengunjung dalam memahami sebuah konten. Namun, gambar juga bisa menjadi faktor lambatnya sebuah website.
Ukuran gambar yang terlalu besar akan menambah beban website dan membuatnya semakin lama untuk diakses. Oleh karena itu, diperlukan proses compressing untuk optimasi gambar-gambar yang akan diunggah di website.
Terdapat beragam layanan untuk memperkecil ukuran gambar tanpa merusak kualitasnya. Beberapa di antaranya, seperti TinyPNG, ILoveIMG, Trimage, Kraken, dan OptiPNG. Dengan demikian, ukuran gambar akan lebih ringan tanpa mengurangi kualitas dan website menjadi lebih cepat dimuat.
Selain itu, pengguna WordPress juga bisa menggunakan sejumlah plugin untuk melakukan optimasi pada gambar. Beberapa plugin yang bisa digunakan, seperti Imagify Image Optimizer, ShortPixel Image Optimizer, WP Smush, dan Optimus Image Optimizer.
2. Menggunakan Website Caching
Cache adalah proses penyimpanan sementara data atau halaman HTML sebuah website. Hal tersebut berfungsi untuk mengurangi penggunaan bandwidth dan loading server. Secara sederhana, cache adalah teknologi yang membantu menampilkan halaman website lebih cepat.
Ketika pengunjung membuka sebuah website untuk pertama kalinya, sistem browser caching akan menyimpan data-data halaman yang dibuka, mulai dari logo, gambar, hingga konten. Dengan demikian, saat pengunjung membuka kembali website tersebut, browser pengunjung tidak perlu melakukan request ke server untuk menampilkan data-data yang sama.
Sistem caching pada browser telah menyimpan data-data tersebut pada perangkat pengguna sehingga website dapat ditampilkan dengan lebih cepat.
Pada WorPress, cara mengaktifkan browser caching juga bisa dilakukan secara mudah dengan bantuan plugin. Jika kamu menggunakan layanan hosting pada Jagoan Hosting dengan fitur LiteSpeed Web Server, maka sebaiknya kamu menggunakan LiteSpeed Cache. Selain menyediakan fitur browser caching, LiteSpeed Cache merupakan kombinasi sempurna dengan LiteSpeed Web Server.
Kamu bisa meningkatkan kecepatan website hingga berkali lipat dengan adanya fitur LiteSpeed Web Server (LSWW) dan LiteSpeed Cache dari Jagoan Hosting. Seperti yang dapat dilihat pada diagram di atas, gabungan LSWS dan LiteSpeed Cache dapat mengalahkan performa web server dan plugin cache lainnya. Kombinasi tersebut juga memungkinkan website untuk menerima 5.200 page request per detik.
3. Minify HTML, CSS dan JavaScript
Proses compressing tidak hanya dibutuhkan pada gambar yang digunakan pada website. Hal tersebut juga berlaku untuk kode HTML, CSS, dan JavaScript pada sebuah website. Hal tersebut tentu tidak lain untuk mengoptimalkan kecepatan website. Oleh karena itu, proses minify pada HTML, CSS, dan JavaScript penting untuk dilakukan.
Minify adalah istilah pemrograman yang mengarah pada proses menghilangkan karakter tidak diperlukan dalam kode untuk dieksekusi. Dengan kata lain, terdapat proses pengurangan data yang berulang atau tidak penting pada HTML, CSS, dan JavaScript tanpa mengurangi kualitas yang ditampilkan di browser. Dengan demikian, browser dapat membaca data-data di halaman website dengan lebih cepat.
Berikut adalah salah satu contoh proses minify:
Terlihat lebih singkat, bukan?
Proses minify juga bisa dilakukan dengan praktis melalui plugin LiteSpeed Cache yang memberikan layanan minify dengan mudah dan lengkap.
4. Melakukan Optimasi Website Versi Mobile
Perlu diketahui bahwa penggunaan smartphone sebagai perangkat untuk mengakses internet semakin meningkat. Pada tahun 2018, Data Statistika menunjukkan data bahwa perangkat mobile mendominasi kunjungan website sebanyak 52,2% dan diperkirakan akan terus meningkat.
Di Indonesia, sebanyak 94% pengguna internet mengaku lebih banyak menggunakan perangkat mobile untuk mengakses internet. Data ini tentu bukan hanya sekedar angka yang bisa diabaikan.
Data tersebut menjadi tuntutan bagi pengembang website untuk menyediakan halaman yang responsif dan cepat, baik saat diakses melalui perangkat desktop atau mobile. Hal ini penting untuk memastikan bahwa pengunjung yang mengakses dari perangkat mobile juga mendapatkan kenyamanan sama.
Cara optimasi website untuk perangkat mobile juga bisa dilakukan dengan mudah melalui sejumlah plugin pada WordPress. Dengan demikian, kamu bisa membuat website yang juga cepat dan responsif saat diakses melalui perangkat mobile.
Itu dia pembahasan lengkap mengenai optimasi website melalui hasil analisis pada Google PageSpeed Insight. Simak terus Tips Hosting di halaman tutorial Jagoan Hosting Indonesia. Jika ada bagian dari tutorial yang tidak ditemukan, kamu bisa menghubungi teman-teman di Jagoan Hosting untuk bantuan lebih lanjut melalui Live Chat atau fitur Open Tiket ya!
Halo Sob! Kamu pasti merasa kesal kan ketika ingin mengakses suatu Website tetapi loading Website yang kamu akses sangat lama proses loading Pagenya? Nah, kamu sendiri akan merasa tidak sabar dan menutup Website tersebut. Kamu tidak sendiri kok Sob, karena menurut riset Google 53 persen pengguna internet Indonesia akan meninggalkan website yang loadingnya lebih dari 3 detik.
Loading Website yang lama merupakan masalah yang dibilang cukup besar lhoh Sob! Karena banyak calon visitor Website kamu akan mengurungkan untuk membuka Website kamu dengan alasan terlalu lama dalam mengakses Website kamu itu Sob! Dan juga dari sisi User Experienced (UX) sangatlah buruk karena akan membuat user yang akan membuka Website kamu akan merasa tidak nyaman dengan menunggu waktu loading yang terlalu lama, sehingga Website kamu tidak lagi menjadi pilihan utama lagi.
1. Google PageSpeed Insight
Google PageSpeed Insight adalah tool gratis yang menyediakan laporan paling akurat dibanding tool lainnya. Selain itu, Google PageSpeed Insight adalah tool yang resmi dirilis oleh Google sehingga indikator penilaian yang digunakan sudah sesuai dengan standar Google.
Sejak November 2018, Google PageSpeed Insight secara resmi menggunakan teknologi Lighthouse. Lighthouse sebelumnya merupakan tool terpisah yang digunakan untuk mengecek performa website dalam bentuk extension di Google Chrome.
Dengan dijadikannya Lighthouse sebagai mesin analisis utama, Google PageSpeed Insight bisa memberikan analisis yang lebih lengkap dan akurat. Selain itu, kamu tidak perlu mengunduh extension secara terpisah untuk melakukan pengecekan performa website secara mendalam. Cukup membuka halaman website Google PageSpeed Insight, kamu sudah bisa melakukan pengecekan performa website dengan mudah lho Sob!
2. Cara Menggunakan Google PageSpeed Insight
Google akan menilai kecepatan loading website kamu menggunakan skala persen. Nilai 0 sampai 49 persen menunjukkan website kamu lambat. Nilai 50 sampai 89 persen menunjukkan kecepatan website kamu sudah mencapai rata-rata. Terakhir, nilai 90 sampai 100 persen menkamukan website kamu cepat.
Selain analisis kecepatan website secara umum, PageSpeed Google juga menjabarkan analisisnya menjadi enam bagian. Enam analisis tersebut adalah Field Data, Origin Summary, Lab Data, Opportunities, Diagnostics, dan Passed Audits. Berikut adalah penjelasannya:
- Field Data dan Origin Summary
Field Data dan Origin Summary adalah nilai kecepatan berdasarkan First Contentful Paint dan First Input Delay. First Contentful Paint adalah waktu di mana gambar atau teks pertama muncul. Sedangkan First Input Delay adalah jarak waktu antara interaksi pertama pengunjung (klik tautan/link) dan respon pertama browser menanggapi interaksi tersebut.
Website kamu termasuk cepat jika kedua nilai FCP dan FID sama-sama tinggi. Jika salah satu, FCP atau FID, mendapatkan nilai rendah, website kamu termasuk lambat.
- Lab Data
- First Contentful Paint adalah waktu di mana gambar atau teks pertama muncul
- Speed Index menunjukkan seberapa cepat isi halaman terlihat jelas. Semakin rendah nilainya semakin bagus.
- Time to Interactive adalah waktu pertama yang menunjukkan sebuah halaman dianggap interaktif secara penuh
- First Meaningful Paint mengukur kapan konten utama dari sebuah halaman muncul
- First CPU Idle menkamukan waktu pertama di mana sebuah halaman pengunjung bisa melakukan input
- Estimated Input Latency menunjukkan lama waktu yang dibutuhkan sebuah website untuk merespon input yang dimasukkan pengguna
- Opportunities (Peluang)
Opportunities menunjukkan apa saja langkah optimasi yang bisa kamu lakukan untuk meningkatkan kecepatan website.
- Diagnostics
Diagnostics berisi detail kinerja website kamu yang belum disebutkan pada analisis-analisis sebelumnya.
- Passed Audits
Passed Audits berisi laporan langkah dan macam optimasi apa saja yang sudah berhasil kamu lakukan.
3. Tips Dapatkan Skor Tinggi di Google PageSpeed Insight
Google PageSpeed Insight akan menilai performa website kamu dengan skala 0 sampai 100. Skor tinggi di Google PageSpeed Insight menunjukkan website kamu sudah berjalan sesuai standar yang ditetapkan Google.
Idealnya skor yang didapatkan antara 90 sampai 100 pada Google PageSpeed Insight yang menjadi tujuan yang harus kamu capai pada Website yang kamu miliki ya Sob! Nah untuk bisa mencapai skor tersebut, kamu perlu menyelesaikan masalah-masalah dari hasil diagnosis Google PageSpeed Insight.
Setiap website tentu menghasilkan diagnosis yang berbeda-beda karena konten, tema, dan konfigurasi yang diaplikasikan pun berbeda. Namun, ada beberapa permasalahan yang paling umum ditemui setelah melakukan pengecekan di Google PageSpeed Insight. Dari ukuran gambar terlalu besar, tidak mengaktifkan caching, sampai performa website versi mobile yang tidak optimal.
Di bawah ini akan saya jelaskan cara mengatasi empat permasalah paling umum untuk mendapatkan skor tinggi Google PageSpeed Insight:
Menambahkan gambar ke konten website/blog adalah langkah bagus agar pengunjung tidak bosan dengan teks dan membantu pengunjung untuk memahami konten kamu.
Walaupun begitu, gambar juga bisa menjadi penyebab lambatnya website kamu. Gambar yang berukuran terlalu besar akan menurunkan kecepatan website secara drastis. Oleh karena itu, kamu perlu melakukan compressing pada gambar-gambar yang akan diunggah di website.
Ada berbagai layanan kompresor gambar yang bisa kamu gunakan untuk mengecilkan ukuran gambar tanpa merusak kualitasnya. kamu bisa melakukan compressing sebelum mengunggahnya di WordPress menggunakan layanan image compressing seperti TinyPNG, ILoveIMG, Trimage, Kraken, dan OptiPNG.
Nah, kamu juga dapat melakakan proses compressing pada Wordpress dengan menggunakan plugin optimasi gambar.WordPress menyediakan berbagai plugin untuk membantu kamu agar konten gambar yang ada tetap membuat kinerja website kamu optimal, Jagoan Hosting merekomendasikan plugin yang dapat menunjang kemampuan website kamu agar tetap otimal ya Sob! Seperti plugin Imagify Image Optimizer, ShortPixel Image Optimizer, WP Smush, dan Optimus Image Optimizer.
Cache adalah proses penyimpanan sementara data atau halaman HTML dan gambar sebuah website untuk mengurangi penggunaan bandwidth dan loading server. Secara sederhana, cache adalah teknologi yang membantu menampilkan halaman website lebih cepat.
Ketika pengunjung membuka website kamu untuk pertama kali, sistem browser caching akan menyimpan data-data halaman yang dibuka pengunjung, dari logo, gambar, hingga konten.
Dengan begitu, saat pengunjung membuka website kamu untuk kedua kali dan seterusnya browser pengunjung tidak perlu melakukan request ke server untuk menampilkan data-data yang sama. Karena browser caching sudah menyimpan data-data tersebut di komputer pengunjung sehingga bisa menampilkan halaman website lebih cepat.
Untuk mengaktifkan browser caching pun cukup mudah. kamu bisa melakukannya menggunakan bantuan plugin. Tersedia banyak plugin caching di WordPress yang bisa kamu pilih.
Jika kamu menggunakan layanan hosting Jagoan Hosting yang memiliki fitur LiteSpeed Web Server, sebaiknya gunakan LiteSpeed Cache. Selain menyediakan fitur browser caching, LiteSpeed Cache merupakan kombinasi sempurna dengan LiteSpeed Web Server.
Dengan Fitur Menarik dari Jagoan Hosting seperti LiteSpeed Web Server dan LiteSpeed Cache akan meningkatkan kecepatan website kamu hingga berkali lipat. Seperti yang dapat kamu lihat pada chart di atas, gabungan LSWS dan LiteSpeed Cache mengalahkan performa web server dan plugin cache mana pun. Kombinasi LSWS dan LSWC memungkinkan website kamu untuk menerima 5.200 page request per detik.
Tidak hanya gambar yang memerlukan compressing. Kode HTML, CSS, dan JavaScript pun perlu memerlukan proses kompresi untuk mengoptimalkan kecepatan website kamu dengan proses minify.
Minify adalah istilah pemrograman yang artinya adalah proses menghilangkan karakter yang tidak diperlukan dalam kode untuk dieksekusi. Proses pengurangan data yang berulang atau tidak penting di HTML, CSS, dan JavaScript tanpa mengurangi kualitas yang ditampilkan di browser. Dengan begitu browser akan lebih cepat membaca data-data di halaman website kamu.
Berikut adalah salah satu contoh proses minify:
Kode CSS sebelum Minify
Kode CSS setelah Minify
Terlihat lebih singkat kan Sob?
Kamu tidak harus bingung untuk melakukan proses minify, karena kamu bisa menemukan fitur tersebut di plugin LiteSpeed Cache. LiteSpeed Cache menyediakan fitur minify lengkap dan mudah untuk proses minfy dengan berbagai macam seperti : HTML, CSS, hingga JavaScript.
Perlu diingat bahwa smartphone telah menjadi perangkat utama untuk mengakses internet. Data Statista menunjukkan, pada 2018 perangkat mobile telah mendominasi trafik website sebanyak 52,2 persen dan diperkirakan akan terus meningkat.
Di Indonesia saja, 94 persen pengguna internet mengaku menggunakan perangkat mobile untuk mengakses internet. Tentu angka ini bukan angka yang bisa diabaikan begitu saja.
Sebagai developer website, kamu dituntut untuk menyediakan website yang cepat dan responsif baik di perangkat desktop dan mobile. Membuat website cepat dan responsif di perangkat desktop mungkin adalah hal yang sudah biasa bagi kebanyakan orang.
Berbeda dengan membuat website cepat dan responsif di perangkat mobile. Ketertarikan orang di masalah ini masih cenderung rendah. Bahkan menurut sebuah survei, pada 2017 baru 21 persen website bisnis online yang sudah teroptimasi untuk perangkat mobile.
Mungkin website kamu adalah salah satu dari 79 persen website yang masih belum mobile-friendly. Tidak masalah karena tidak ada kata terlambat untuk mengoptimasi website di perangkat mobile.
Cara optimasi website di perangkat mobile pun cukup mudah. kamu bisa menggunakan plugin mobile WordPress untuk membuat website versi mobile yang cepat dan responsif.
Simak terus Tips Hosting di halaman tutorial Jagoan Hosting Indonesia ya, jika ada bagian dari tutorial yang tidak ditemukan, kamu bisa menghubungi teman-teman di Jagoan Hosting supaya bisa dibantu lebih lanjut melalui Live Chat atau fitur Open Tiket ya!