Cara Dapat Skor Tinggi Pagespeed Insights

PageSpeed Insights milik google developer ini sangat berguna sekali bagi pengelolaan situs website ataupun blog. Sebagian besar pengelola situs menginginkan performa terbaik situsnya dengan melakukan optimasi SEO dan berharap mendapatkan SERP terbaik pada hasil penelusuran google.

Lalu pada platform apa para pengelola mengambil nilai acuan atau patokan yang benar? ya, yang jelas pada empunya penelusuran alias google. Apa yang dinilai oleh google pada pagespeed? tentu saja kecepatan dan performa pada situs yang Anda kelola tentunya. Dan tentunya ada banyak aspek yang mempengaruhi skor pagespeed itu sendiri dan sederhananya bila Anda simak ulasan berikut ini

Apa itu PageSpeed Insights (PSI)?

PSI adalah cara google menilai kinerja situs dengan langkah Anda mencantumkan sebuah halaman website atau blog yang diinginkan kemudian akan muncul skor sebagai hasilnya. Silahkan cek skor performa situs milik Anda pada PageSpeed Insights .Skor tersebut meliputi tampilan secara layar mobile (ponsel) maupun dekstop (komputer). Ada enam hal yang dilaporkan mengenai kinerja situs dan pada bagian apa saja rekomendasi perbaikan (audit) pada aspek tersebut:

1. First Contentful Paint (FCP)

FCP adalah nilai yang didapat berdasarkan waktu yang dibutuhkan untuk memuat text dan gambar. Kecepatan dalam memuat teks dan gambar pada sebuah halaman berarti ada kaitannya dengan audit hal berikut:

  • Render-Blocking CSS : Pemblokiran render sangat sering terjadi jika tampilan dimuat dengan mengandalkan CSS yang bekerja secara tumpang tindih, selain itu juga penggunaan CSS secara berlebihan untuk memperindah tampilan layout hanya akan memberatkan rendering. 
  • Loading Third-Party JavaScript : Sama halnya CSS, script juga membutuhkan waktu untuk memuat sebuah tampilan. Semakin banyak JS yang digunakan pada saat yang tak tepat maka akan menghambat proses render yang berjalan. JS yang dimuat internal biasanya lebih berat dibandingkan menggunakan Third-Party (pihak ketiga) dengan cara eksternal hosting.  
  • Optimizing Encoding and Transfer Size of Text-Based Assets : Kaitanya dengan kompresi text dan gambar, perlu adanya pemilihan font secara default yang ringan dan kompresi ukuran dimensi gambar yang akan tampil. Mengurangi style tulisan seperti icon yang bermacam format akan meringkan kinerja render begitu pula ukuran gambar yang optimal sesuai layout juga perlu dipertimbangkan. 
  • Optimize JavaScript bootup : Masih berkaitan dengan masalah JS, ada trik khusus untuk mengkompresi program JS menjadi minify (minimalis) dengan teknik parse atau compile. Dengan demikian akan memperingan render karena format penulisan program tersebut telah diubah menjadi minimal. Namun jika JS tersebut tidak digunakan alangkah baiknya dihapus saja.

2. Speed Index (SI)

SI - Kecepatan index pada halaman tersebut dinilai dari seberapa cepat waktu yang dibutuhkan sampai tampilan terlihat secara keseluruhan pada layar. Indeksi yang baik menurut developer google adalah melakukan audit atau perbaikan berikut:
  • Mengoptimalkan Efisiensi Materi : Materi yang dimaksud adalah hal yang fundamental (dasar) mengenai bobot file pada tampilan yang dimuat situs. Tahukah Anda bahwa ketika sebuah konten dibuka melalui peramban memiliki ukuran file dalam satuan jumlah byte (bit)?. Jika dibayangkan secara asumsi misal file CSS, JS, gambar, teks, dan video yang dimuat bersamaan pada satu halaman tentunya sama saja Anda sedang mendownload file tersebut ke perangkat Anda bukan?. Sebagian besar pakar SEO menganjurkan penggunaan CDN (Content Delivery Network) agar file tersebut cukup dimuat sekali saja tanpa mengulangi unduhan tampilan. Sehingga jejak (cookies) yang ditinggalkan pada peramban masih bisa dimanfaatkan untuk dimuat kembali.    
  • Mengoptimalkan Jalur Rendering Penting: Karen ini ada sangkut pautnya dengan hal kecepatan index oleh google, maka perlu Anda pahami bahwa peramban (browser) memiiki serangkaian proses untuk memuat sumber daya penting pada situs Anda. Sumber daya tersebut harus tampil lebih dahulu sesuai aset (CSS, JS, text, gambar) dalam bentuk minimalis (minify). Misal pada CSS atau JS ekstenal yang dimasukkan pada struktur html situs masih diletakkan secara terpisah, maka bisa mengakalinya dengan cara menggabungkan keduanya menjadi satu jalur.

3. Time To Interactive (TTI)

TTI adalah waktu yang dibutuhkan peramban untuk merespon sebuah tampilan hingga halaman tersebut dapat berinteraksi secara penuh. Maka untuk lulus audit atau perbaikan tersebut dapat dilakukan dengan hal berikut:
  • Mengukur Kinerja dengan Metode RAIL (Response-Animation-Idle-Load) : Jika situs Anda memiliki tampilan yang menggunakan animasi sederhana semisal konten gambar dimuat dengan animasi loading yang berputar, atau sebuah teks yang bergerak-gerak ketika crusor diarahkan, maka perlu dipertimbangkan kembali penggunaannya. Karena animasi tersebut harus berhasil merespon kurang dari 10 milidetik ketika seluruh tampilan konten sudah dimuat full kurang dari 100 milidetik, untuk referensi bisa dibaca disini

4. First Meaningful Paint (FMP)

Adalah waktu yang dibutuhkan untuk menangkap informasi penting pada konten sebuah halaman. Sama halnya speed index (SI), cara auditnya pun sama dengan melakukan pengoptimalan jalur rendering penting. 

5. First CPU Idle 

CPU idle yang dimakud adalah seberapa besar pengaruh proses pemuatan konten terhadap CPU yang digunakan pada perangkat (mobile atau desktop) saat peramban (chrome, firefox, dan sebagainya) melakukan render sebuah halaman situs. Ini kaitannya dengan jumlah ukuran byte (bit) yang dihasilkan dari file-file halaman yang dimuat. Untuk lulus auditnya pun sama dengan cara seperti TTI dan FMP, yaitu optimalisasi materi yang efisien dan jalur render terpenting. 

6. Max Potential First Input Delay

First Input Delay (FID) yang dimaksud adalah jeda atau penundaan yang terjadi secara keseluruhan waktu pemuatan konten dalam satuan milidetik (ms). Maka untuk lulus auditnya, Anda perlu dapat mempelajarinya pada "Metrik Kinerja yang Berfokus pada Pengguna" disini

Ulasan audit diatas dapat diterapkan oleh Anda dengan melakukan perbaikan secara realtime menggunkan ekstensi dari webstore Chrome yaitu, Lighthouse. Dengan demikian hasil skor terbaik akan tampil sesuai dengan PageSpeed Insights yang diharapkan. Instal pada peramban chrome Anda, karena ini sangat berguna untuk melihat hasil skor dan kinerja situs Anda dengan disertai solusi perbaikan mengenai hal-hal mendetail langsung dari pihak developer google.  

ARTIKEL TERKAIT

Beragam informasi seputar teknologi dan gadget dikemas dari berbagai sumber dan pengalaman dalam bentuk tutorial

Comment Policy: Silahkan isi komentar Anda sesuai dengan bahasan topik pada postingan. Komentar yang berisi link atau tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar Disqus

This website uses cookies to ensure you get the best experience on our website. Info