Inilah 10 Cara Agar mendapatkan Skor 100 Di Page Speed insight !!

Bagi Kalian yang mencari artikel ini tentunya kalian sudah sangat mengenal tools dari google yang berfungsi untuk mengecek Loading Skor yaitu PageSpeed Insight.

Nah, untuk kali inilah saya akan mencoba membagikan Sedikit cara agar Kalian bisa mendapatkan Skor 100 Di Page Speed insight.

Baik di versi Mobile ataupun di Versi Desktop, Namun Tidak semua template bisa 100 karena ada beberapa jika di edit akan merubah dari tampilan web tersebut

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?

Jika Blog milik anda memiliki Loading sangat lambat tentu Para pembaca akan malas untuk kembali lagi ke blog milik anda..

Jadi jangan pernah meremahkan Hal ini ( kecepatan website ). Banyak sekali orang yang berlomba lomba agar bisa template miliknya memiliki skor yang tinggi.. 

Setidanya minimal memiliki Skor di atas 80, Untuk Blog saya sendiri anda bisa mengeceknya langsung di : https://developers.google.com/speed/pagespeed/insights/?hl=id&url=www.furikode.xyz&tab=mobile

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

Lanjut ke topik pembahasan...

Sebenar nya Page Speed sendiri sudah memberi tau apa saja yang anda harus lakukan agar bisa mendapatkan skor 100..

Ada beberapa Template yang sudah terbilang sangat cepat bahkan mencapai Skor 100 dan Sudah saya rangkum Pada artikel 8 Template Blogger dengan Loading tercepat

Tapi ya mungkin anda tidak membacanya dan hanya fokus ke Skor saja.. Jadi ya Caranya itu cuma ada 1...

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

1. Aktifkan penampatan 
2. Avoid Landing Page 
3. penyimpanan cache browser 
4. Minifikasi CSS 
5. Minifikasi HTML
6. Minifikasi Java Script
7. Menghilangkan Java Script 
8. Mengurangi waktu respons 
9. Optimalkan Gambar 
10. Prioritaskan Konten 

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.

Aktifkan penampatan - Enable compression

Kalau untuk yang satu ini sih gak usah dibahas, Kenapa? Karena Pada platform blogger sudah Memakai kompresi GZIP pada Server websitenya..

Baca Juga : Galantys Template Premium Free

Jadi tidak ada pengguna Blogger yang akan mendapatkan masalah yang satu ini..

Hindari pengalihan halaman landas - Avoid landing page redirects

Masalah inipun menjadi Prioritize tinggi di Google PageSpeed insight.. Tentu saja masalah utamanya adalah Karena suatu halaman.

Saya beri contoh..

Saat mengakses blog saya lewat Komputer/laptop maka url blog saya adalah furikode.xyz ,

Tapi saat dicoba diakses melalui handphone maka link website akan berubah otomatis menjadi furikode.xyz/?m=1.

Kenapa bisa gitu? karena blog mendeteksi sedang diakses menggunakan Handphone

Contoh lain, misalnya nih sekarang blog anda homepagenya berbentuk statis, dengan kata lain mempunyai laman tersendiri ketika pengunjung berada di home page anda.

Mungkin Halaman yang berisikan Kalimat2 sapaan atau Logo dari website yang dimiliki atau sebagainya

Dan yang menjadi masalah juga banyak tutorial yang beretebaran di internet membuat homePage static menggunakan redirect..

Contoh Saya mempunyai halaman furikode.xyz/p/sitemap.html . Maka link dari furikode.xyz akan dialihkan Halaman Tadi

itulah yan biasa disebut dengan redirect ..

..sebuah link/URL yang dialihkan, Seperti dari Link A dialihkan Ke link B, Padahal yang kita mau buka adalah Link A

Untuk penjelasan Secara men detailnya Kalian bisa melihat Pada Artikel yang sudah saya Buat yaitu Cara mudah mengatasi Avoid landing page

Manfaatkan Penyimpanan cache browser - Leverage browser caching

Menjadi sebuah masalah pada kecepatan loading blog/website dan mejadi suatu masalah juga pada Google PageSpeed..

Sedikit saya jelaskan lagi, Leverage Browser Caching atau dalam bahasa Indonesianya memanfaatkan penyimpanan cache browser .

Terjadi Sebab ada satu/lebih sumber daya yang tidak dipakai oleh si pengguna pemilik browser

Gambarannya seperti ini..

Saat anda membuka blog saya. Maka browser akan mendownload /script/abcd.js. Lalu anda keluar dari website saya, Setelah beberapa saat anda mengunjungi kembali website saya..

Tetapi Anda harus mendownload kembali /script/abcd.js, Padahal kan tadi sudah..

Itulah yang dinamakan dengan Leverage caching browser.. Anda kharu mendownload ulang script yang tadi sudah di download.. 

Jika hal seperti itu terjadi tentu membuat boros waktu dan kuota internet

Karena penjelasannya Panjang Jadi saya sudah buatkan Artikel tentang Cara mengatasi Add expires Header

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.

.CSS{  display: block;  margin: 5 auto;  padding: 20px 15;  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:

.CSS{display:block;margin:5 auto;padding:20px 15;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. 

Baca Juga : Template keren untuk Blog Download

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.

Eliminasi JavaScript dan CSS yang memblokir rendering di konten paruh atas

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, 

Sebagai Contoh :


<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' type='text/javascript'/>

Kita tambahkan Async Sehingga tampilannya menjadi kurang lebih 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

Untuk yang satu ini terbilang sulit, Sebab kita Harus melakukan oprek ke Bagian Server web 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.id. Sedangkan bagi yang sudah TLD, cukup tambahkan URL redirect mobile di belakang link.

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

Optimalkan gambar - Optimize images

Masalah yang satu ini muncul apabila ukuran gambar di anggap terlalu besar karena belum di kompres

Untuk melakukan Kompresing kalian bisa menggunakan TinyPNG, Sebab saat Gambar di kompress ukurannya bisa berkurang setengah dari ukuran sebelumnya..

Tetapi tetap tidak terlalu mengurangi dari kualitas Gambar tersebut

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

Prioritaskan konten yang terlihat / Prioritize visible content

Untuk yang terakhir ini adalah Prioritas Visible Konten / Prioritize Visible Content, Hampir sama Dengan masalah Sebelumnya yaitu Render Blocking

Masalah ini dapat muncul bila ada sesuatu di dalam tag head yang ukurannya terlalu besar, bahkan lebih besar dari ukuran jQuery Library. 

Hal itu dapat membuat Lambat pada pemuatan suatu halaman, Jika ada Visitor yang koneksi nya lambat

Maka halaman tersebut akan menjadi blank untuk sementara, Karena membutuhkan waktu yang lambat untuk memuat halaman tersebut..

Untuk penjelasan yang lebih mendetail Kalian bisa melihat Artikel yang telah saya buat sebelum nya yaitu Cara mudah mengatasi prioritize visible Content

Penutup

Nah itulah Ke sepuluh Syarat atau Aturan yang harus Anda penuhi Jika ingin memiliki Loading Blog Yang cepat..

Memang sedikit capek, Tapi demi kenyamanan Para pengunjung tidak ada salahnya bukan Untuk kita agar sedikit bekerja extra

Dan mungkin anda tertarik juga untuk membaca artikel tentang Cara mengecilkan total page Size

BERITA LENGKAP DI HALAMAN BERIKUTNYA

Halaman Berikutnya

Subscribe to receive free email updates: