Cara Mendapatkan Score 90-100 di Google PageSpeed Insight Ala Blog Kode Jarwo – Sebagian besar pengunjung blog kita berasal dari perangkat mobile, pastinya semua pengunjung mengharapkan blog yang didatanginya dimuat dengan cepat. Maka dari itu, tugas untuk pengelola blog yang wajib dilakukan yakni mengoptimalkan kecepatan dari blognya masing-masing, karena pengunjung akan bosan untuk berlama-lama menunggu loading yang tak kunjung usai.
Pada pertemuan kali ini, admin akan membagikan tips dari Blog Kode Jarwo untuk mendapatkan skor tinggi di mata Google PageSpeed Insights baik di tampilan Mobile maupun Desktop. Pastinya, tips ini dikhususkan untuk anda yang menggunakan platform Blogger(Blogspot). Sebelumnya, simak penjelasan berikut tentang PageSpeed Insights.
Apa Itu Google PageSpeed Insights
Google PageSpeed Insights (PSI) adalah alat dari google yang dibuat dengan tujuan mengukur seberapa cepat performa loading dan kinerja dari blog tersebut. Dengan menggunakan alat ini, maka penilaian terhadap blog bisa dinilai dengan standar Google yang pastinya paham betul tentang hal ini dan disertai detail dari permasalahnnya.
Hasil uji kecepatan blog yang disajikan oleh Google PageSpeed Insights yaitu berupa skor, yang berskala 1-100 dengan penjelasan berikut:
- Skor 0-49 – Artinya kecepatan loading blog anda sangat buruk atau lambat.
- Skor 50-89 – Artinya kecepatan loading blog anda normal.
- Skor 90-100 – Artinya blog anda dinilai sangat cepat oleh google.
BACA JUGA: Cara Menghapus Bulan dan Tahun pada URL Blogger
Cara Mendapatkan Skor Sempurna di Google PageSpeed Insights
Menurut Ozik Jarwo, sebenarnya caranya hanya ada satu, yaitu mengikuti dan memenuhi kesepuluh rules pengoptimalan yang disarankan oleh PageSpeed Insights sebagai berikut:
Anda harus mengikuti semua saran pengoptimalan diatas. Jika 1 saran saja tidak lulus, maka skor dari blog anda langsung berkurang dan otomatis tidak akan mendapatkan skor sempurna.
1. Aktifkan pemampatan
Mungkin kalau masalah ini kita lewati saja, karena secara otomatis di Blogger sudah menggunakan kompresi GZIP pada server webnya, sehingga tidak ada satupun pengguna Blogger yang akan mendapatkan masalah ini.
2. Hindari pengalihan halaman landas
Masalah ini muncul ketika blog anda memiliki halaman redirect. Misal, yang harusnya homepage berada di www.blogspot.com akan alihkan ke www.blogspot.com/p/home.html, atau yang semacamnya.
3. Manfaatkan penyimpanan cache browser
Masalah ini muncul karena server hosting anda tidak melakukan cache browser. Misalnya begini, anda membuka blog A, dan terdapat gambar saya disana. Jika saya mengaktifkan cache browser, maka ketika anda membuka blog A lagi, gambar saya tadi tidak perlu didownload lagi, cukup memunculkan gambar lama yang sudah pernah dimuat sebelumnya.
Masalah yang lebih sering dikenal dengan nama leverage browser caching atau add expires header. Untuk mengatasi masalah ini anda harus bergelut dengan hosting dan PHP, sedangkan di Blogger kedua unsur tersebut tidak ada. Jadi cara terakhir yang dapat anda gunakan adalah dengan memanipulasinya, yaitu dengan LazyLoad. Untuk tutorialnya silakan anda lihat pada artikel berikut: Lazyload Gambar & Lazyload Javascript.
Tentu cara ini sangat bagus, selain dapat mempercepat loading blog, juga dapat menghemat kuota sang pengunjung.
BACA JUGA: Cara Mudah Memasang Komentar Disqus di Blogspot
4. Meminifikasi CSS – Minify CSS
Masalah ini muncul ketika ada CSS di template anda yang belum dikompres. Contoh yang belum dikompres kurang lebih seperti ini:
.main{
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);Untuk mengkompresnya cukup mudah, anda dapat menggunakan alat dari situs Minifier.org. Dengan begitu anda tidak perlu repot untuk menghapus jarak dan spasi dari CSS tersebut satu persatu. Hasil setelah di minify kurang lebih akan seperti ini:
.main{position:absolute;top:50%;left:50%;transform:translateX(-50%) translateY(-50%)}5. Meminifikasi HTML – Minify HTML
Sama seperti Minify CSS, hanya saja bedanya masalah ini hanya muncul ketika template anda memiliki banyak HTML komentar atau HTML yang memiliki banyak jarak dan spasi. Untuk cara mengatasinya juga sama, anda dapat menggunakan tools gratis yang tersebar di internet.
6. Meminifikasi JavaScript – Minify JavaScript
Tidak jauh berbeda dengan Minify CSS dan HTML, hanya saja perbedaannya terletak pada JS yang belum dikompres. Anda juga dapat meminifikasi javascript dengan Minifier.org.
7. Menghilangkan JavaScript dan CSS yang memblokir rendering di konten paruh atas
Solusi render blocking cukup mudah, anda hanya perlu menambahkan atribut async pada JS eksternalnya, sehingga berbentuk kurang lebih menjadi seperti ini:
<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>Begitu juga dengan CSS
8. Mengurangi waktu respons server
Yang ini agak sulit, karena kita harus mengoprek hingga ke bagian web server untuk mengatasinya. Masalah ini dapat muncul kalau waktu respon server yang diperlukan browser untuk memuat blog anda lebih dari 200ms.
Solusinya pun beragam, kalau anda masih menggunakan blogspot, disarankan jangan menggunakan https saat mengecek skor dan gunakan blogspot.co.id atau domain generik lainnya, selain .blogspot.com. Sedangkan bagi yang sudah TLD, cukup tambahkan URL redirect mobile di belakang link.
9. Optimalkan gambar
Saran ini akan muncul ketika terdapat gambar yang berukuran besar dan belum di kompres.
Jika setelah di kompres masalah tersebut masih muncul, salah satu cara lainnya yaitu menggunakan LazyLoad. Selengkapnya bisa baca di: Optimasi Loading Blog dengan Lazy Load Image.
10. Prioritaskan konten yang terlihat
Masalah ini muncul karena artikel di blog membutuhkan waktu load yang lama, karena ada sesuatu yang harus di load sebelumnya.
Masalah ini sangat penting, karena setiap pengunjung inginkan dari blog anda adalah artikelnya. Bila ada sesuatu yang di load dahulu sebelum artikel, dapat pastikan waktu load artikel jadi lambat, dan kemungkinan besar pengunjung kabur dari blog anda. Hal ini dapat menambah bounce rate di blog anda.
BACA JUGA: Cara Mengelola Gambar yang Terupload di Blogger
Setelah melakukan rules di atas dengan benar, dapat dipastikan pagespeed blog anda akan optimal di mata pagespeed insights, karena hal tersebut merupakan rekomendasi/saran dari google untuk mempercepat kinerja dari blog/situs anda. Sumber: Blog Kode Jarwo – Lengkap! Cara Mendapatkan Skor 100 di PageSpeed Insights
