Lengkap! Cara Mendapatkan Skor 100 PageSpeed Insights di Blogger
Lengkap! Cara Mendapatkan Skor 100 PageSpeed Insights di Blogger

Saya yakin, hampir semua blogger dan pemilik website pasti sudah mengenal sebuah tool untuk mengecek skor loading milik Google yang bernama PageSpeed Insights. Pada artikel kali ini, saya ingin membahas seputar cara cepat dan mudah untuk mendapatkan skor sempurna alias 100 di PageSpeed Insights, baik di Mobile maupun Desktop. Tentunya, tips ini dikhususkan untuk anda yang menggunakan platform Blogger.

Mari kita mulai dari penjelasan umumnya terlebih dahulu...

Apa Itu Google PageSpeed Insights?


Google PageSpeed Insights atau sering saya singkat PSI adalah sebuah tools buatan Google yang berguna untuk mengukur seberapa cepat loading dan performa serta kinerja dari situs anda. Ukurannya pun ditetapkan oleh skor, yaitu 1 - 100.

Bahasa mudahnya, apabila skor situs anda bagus di PSI, maka kemungkinan besar loading situs anda juga cepat, sehingga bagus untuk SEO.


Mengapa kecepatan situs itu penting, terutama bagi SEO?



Mari kita flasback ke tahun 2009...

Sebagaimana yang saya kutip dari Blog Google, pada tahun 2009 Google melakukan sebuah eksperimen dengan kecepatan situsnya. Hasil dari eksperimen tersebut adalah Google kehilangan 20% dari trafiknya bila waktu loading di situsnya bertambah setiap 100ms, atau setara dengan 0.1 detik.

Sangat mengejutkan...

Hal tersebut dikarenakan pengunjung yang "malas" untuk berlama-lama menunggu untuk membuka sebuah situs hingga loadingnya selesai dan keseluruhan elemen sudah tampil di layarnya.

Hal ini juga yang membuat Google melakukan update pada algoritmanya, sehingga situs-situs dengan loading yang lambat akan terkena nilai "minus". Bahkan, baru-baru ini ia juga mengatakan bahwa AMP menjadi salah satu faktor penentu ranking di SERP.

Dari sini dapat disimpulkan, Google sangat menyukai situs dengan loading yang cepat...

Jadi jangan salah bila orang berlomba-lomba menjadi template yang fast load agar skor situsnya di PageSpeed Insights menjadi bagus, atau setidaknya bernilai 80 keatas dan berwarna hijau.

Skor PageSpeed Insights Blog Kode Jarwo

Bagaimana cara membuat skor menjadi 100 / sempurna di PageSpeed Insights?


Lanjut ke topik pembahasan...

Sebenarnya kalau anda itu orangnya suka membaca dan lebih teliti, anda sudah pasti tau bagaimana caranya.

Caranya itu cuma ada 1...

Yaitu dengan mengikuti kesepuluh "rules" pengoptimalan yang disarankan oleh PSI. Berikut listnya:

10 Saran Pengoptimalan

Anda harus mengikuti semua saran pengoptimalan diatas. 1 saran saja tidak lulus, maka skor situs anda langsung berkurang dan tidak akan mendapatkan skor sempurna atau 100.

Nah untuk cara mengatasi setiap saran pengoptimalan diatas, Blog Kode Jarwo sudah pernah membahasnya, bahkan merangkumnya di halaman Kumpulan Masalah PageSpeed Insights. Berikut saya bahas ulang setiap masalah diatas, dimulai dari "Aktifkan pemampatan".

Aktifkan pemampatan - Enable compression


Mungkin kalau masalah ini kita skip saja ya, karena secara otomatis di Blogger sudah menggunakan kompresi GZIP pada server webnya, sehingga tidak ada satupun pengguna Blogger yang akan mendapatkan masalah ini.

Hindari pengalihan halaman landas - Avoid landing page redirects


Masalah ini dapat muncul ketika blog anda memiliki redirect, misal yang biasanya homepage berada di www.aaa.com akan diredirect ke www.aaa.com/p/home.html, atau yang semacamnya. Kalau untuk Blogger, biasanya masalah ini muncul karena anda memakai HTTPS. Prioritas masalah ini medium, kadang high.

Saran saya, kalau masih menggunakan blogspot, pada saat mengecek loading blognya di PSI, jangan pakai https, tapi pakai http aja, misal: http://demo-jarwo.blogspot.co.id. Selain itu, jangan gunakan www di depan nama domain.

Sedangkan bagi yang sudah menggunakan TLD, jangan lupakan SSL/non dan subdomain www di depan nama domain pada saat mengecek skornya, misal https://www.kodejarwo.com. Sesuaikan dengan varian blog anda, apakah menggunakan https atau tidak. Bila tidak, ya gunakan http saja.

Untuk selengkapnya, sudah pernah saya bahas pada artikel berikut: Cara Mengatasi Hindari Pengalihan Laman Landas di PageSpeed Insights

Manfaatkan penyimpanan cache browser - Leverage browser caching


Nah ini dia masalah yang menurut saya paling sulit, yaitu masalah yang lebih sering dikenal dengan nama leverage browser caching atau add expires header. Saya katakan sulit karena 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.

Oh ya hampir lupa ke penjelasannya...

Masalah ini muncul karena server hosting anda tidak melakukan cache browser. Cache browser itu semacam "sampah". Misalnya begini, anda membuka blog XYZ, lalu terdapat foto saya disana. Bila saya mengaktifkan cache browser, maka ketika anda membuka blog XYZ lagi foto saya tadi tidak perlu didownload lagi, cukup memunculkan foto lama yang sudah pernah dimuat sebelumnya.

Tentu cara ini sangat bagus, selain dapat mempercepat loading blog, juga dapat menghemat kuota sang pengunjung.

Meminifikasi CSS - Minify CSS


Sama seperti judulnya, masalah ini bisa muncul ketika ada CSS di template anda yang masih belum dikompres. Contoh yang belum dikompres itu kurang lebih seperti ini; banyak jarak dan spasinya.

.jarwo {
  display: block;
  margin: 0 auto;
  padding: 20px 0;
  color: white;
  width: 100px;
}

Untuk mengkompresnya pun cukup mudah, anda tidak perlu menghapus jarak dan spasinya satu persatu, cukup gunakan tools dari Minifier.org, pastekan CSSnya disana, tekan Minify, selesai. Nanti kurang lebih bentuk CSS yang sudah diminifynya menjadi seperti ini:

.jarwo{display:block;margin:0 auto;padding:20px 0;color:white;width:100px;}

Untuk lebih lengkap dan jelasnya, anda bisa membuka artikel berikut: Cara Mengatasi Minify CSS di PageSpeed Insights.

Meminifikasi HTML - Minify HTML


Sama seperti Minify CSS, hanya saja bedanya kalau masalah ini hanya dapat 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.

Bila sudah dikompres tapi belum kelar juga masalahnya, anda dapat mengikuti cara lainnya pada artikel berikut: Cara Mengatasi Minify HTML di PageSpeed Insights.

Meminifikasi JavaScript - Minify JavaScript


Tidak jauh berbeda dengan Minify CSS dan HTML, hanya saja perbedaannya terletak pada JS yang belum dikompres. Solusi nya pun sama, yaitu menggunakan tools di minifier.org. Tidak usah panjang lebar, buat yang ingin tutorial lengkapnya bisa dilihat pada artikel berikut: Solusi dan Cara Minify JavaScript di PageSpeed Insights.

Menghilangkan JavaScript dan CSS yang memblokir rendering di konten paruh atas - Eliminate render-blocking JavaScript and CSS in above-the-fold content


Bukan hanya nama masalahnya yang panjang, masalah ini ternyata dapat dibagi menjadi 2 lagi, yaitu render blocking dan CSS Delivery. Saran ini dapat muncul apabila ada sebuah JS atau CSS Eksternal di blog anda yang dimuat secara langsung.

Solusi render blocking cukup mudah saja, 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/2.1.3/jquery.min.js' type='text/javascript'/>

Sedangkan untuk CSS Delivery, saya sudah pernah membuat artikel lengkapnya disini: Cara Mengatasi Optimize CSS Delivery di PageSpeed Insights. Ada 3 trik yang dapat anda lakukan, yaitu pemberian atribut ASYNC, pemindahan letak script LINK, dan pemasangan script CSS Ready.

Mengurangi waktu respons server - Reduce server response time


Yang ini juga 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.

Untuk solusinya pun beragam, kalau anda masih menggunakan blogspot, saran saya 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.

Lebih jelasnya bisa dilihat pada artikel berikut: Cara Mengurangi Waktu Respons Server PageSpeed Insights.

Optimalkan gambar - Optimize images


Sama seperti judulnya, saran ini dapat muncul bila ada gambar di blog anda yang belum dikompres. Tempat mengkompres gambar yang sering saya gunakan adalah TinyPNG, karena setiap kali setelah dikompres ukuran gambar saya akan berkurang sekitar 2 kali lipat lebih tanpa mengurangi kualitasnya.

Bila sudah dikompres belum juga kelar, maka cara terakhir yang dapat anda lakukan adalah dengan menggunakan LazyLoad. Untuk artikel lengkapnya bisa dilihat disini: Cara Mengatasi Optimize Image / Optimalkan Gambar di PageSpeed Insights.

Prioritaskan konten yang terlihat - Prioritize visible content


Saran terakhir, yaitu prioritaskan konten yang terlihat. Masalah ini sebenarnya mirip-mirip saja dengan render blocking. Masalah ini dapat muncul bila ada sesuatu di dalam tag head yang ukurannya terlalu besar, bahkan lebih besar dari ukuran jQuery Library. Sesuatu yang besar tersebut dapat menunda pemuatan halaman, jadi kalau ada pengunjung datang ke blog anda dengan koneksi internet yang sedikit lambat, maka halaman blog menjadi blank untuk sementara hingga sesuatu yang ukurannya besar tadi selesai dimuat.

Capek saya nulisnya, langsung saja kalau mau yang full bisa dicek pada artikel berikut: Cara Mengatasi Prioritize Visible Content di PageSpeed Insights.

Sekali lagi saya katakan, sebenarnya semua template itu bisa membuat skornya di PageSpeed Insights dan GTmetrix menjadi 100, tetapi kebanyakan dari mereka tidak mau karena ada beberapa efek samping yang muncul, seperti tampilan yang menjadi monoton, beberapa fitur hilang, dan lain sebagainya. Padahal, User Experience hal terpenting nomor 1 menurut saya, disusul SEO pada nomor 2.
Silakan pilih sistem komentar anda ⇛   

Silakan berkomentar dengan sopan. Jangan buang-buang waktu anda hanya untuk melakukan SPAM di sini.

Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 1 Mei 2018 21.22

Usahakan dikasih background sebelum script penutupnya dimuat.

Misal kalau punya saya ini, sebelum covernya muncul, ada background warna gradient dibelakangnya. Kalau covernya sudah selesai dimuat & muncul, background tadi ketutup sama cover.

Balas
Rogue One Kode Jarwo
Rogue One
# 1 Mei 2018 21.04

#ask kok template kode jarwo yang ini gak kena proriataskan konten yang terlihat ya? kan covernya awalnya hampir nutupin desktop , soalnya punya saya juga pengen di buat ide kayak gitu biar gak kena image caching , eh malah kena proriataskan konten terlihat

Balas