Mengenal Core Web Vitals: Standar Baru Kecepatan Website dari Google

Audit Ketat dari Sang Mesin Pencari

Jika kamu membuka tools Google PageSpeed Insights atau Lighthouse, kamu akan diberi skor dari 0 sampai 100 terkait kesehatan websitemu. Skor ini bukan sekadar pamer angka; Google menjadikannya salah satu syarat wajib untuk menentukan apakah artikelmu berhak tampil di halaman 1 hasil pencarian.

Google menggabungkan kenyamanan pengguna ini dalam inisiatif bernama Core Web Vitals, yang terdiri dari tiga metrik (pengukuran) utama. Sebagai Web Developer, ini adalah KPI (Key Performance Indicator) kerjamu.

1. LCP (Largest Contentful Paint) - Mengukur Kecepatan Memuat

LCP mengukur waktu yang dibutuhkan untuk merender (menampilkan) elemen visual paling besar di layar HP pengunjung. Elemen ini biasanya berupa foto *Banner Hero* di atas layar atau blok paragraf teks yang sangat besar.

• Target Bagus: Harus muncul di bawah 2.5 detik.
• Cara Optimasi: Kompres gambar raksasamu menjadi WebP, atau pre-load gambarnya. Hindari menaruh JavaScript rumit yang menghalangi HTML merender gambar tersebut (Render Blocking).

2. INP (Interaction to Next Paint) - Mengukur Respon

(Catatan: INP menggantikan metrik lawas bernama FID pada 2024). INP mengukur seberapa "canggung" atau lag websitemu saat tombolnya ditekan.

Misalnya, pengunjung menekan tombol *Hamburger Menu* di navigasi HP, berapa milidetik yang dibutuhkan sampai menu tersebut benar-benar terbuka? Jika prosesnya memakan waktu karena HP pengguna sibuk menjalankan library React-mu yang berat, INP-mu akan jelek.

• Target Bagus: Respons di bawah 200 milidetik.
• Cara Optimasi: Kurangi beban JavaScript. Pecah eksekusi JavaScript yang berat menjadi bagian-bagian kecil (Code Splitting) agar Browser bisa bernapas dan merespon klik pengguna.

3. CLS (Cumulative Layout Shift) - Mengukur Kestabilan Visual

Pernahkah kamu mau mengklik sebuah tombol artikel, tiba-tiba sebuah iklan banner *load* di atas layar yang membuat tombolnya bergeser ke bawah, lalu kamu malah tidak sengaja memencet iklan tersebut? Ini adalah pengalaman yang SANGAT membuat frustrasi!

Google menghukum keras website yang elemennya geser-geser secara mendadak (Layout Shift).

• Target Bagus: Skor CLS di bawah 0.1.
• Cara Optimasi: WAJIB memberikan atribut width dan height pasti pada setiap tag dan ruang Iklan di HTML. Dengan begitu, browser akan "mencadangkan" ruang kosong di layar sebelum gambarnya selesai ter-download, sehingga konten di bawahnya tidak tergeser secara liar.