Sejak Google Page Experience Update 2021, kecepatan dan kenyamanan website bukan lagi sekadar faktor teknikal — tapi faktor ranking yang resmi. Di balik update itu ada tiga metrik yang disebut Core Web Vitals. Kalau kamu belum pernah mengeceknya, kemungkinan besar ada poin ranking yang sedang hilang.
LCP — Largest Contentful Paint
LCP mengukur berapa lama sampai elemen terbesar di halaman — biasanya gambar hero atau blok teks utama — selesai dimuat dan terlihat oleh pengguna. Ini adalah proxy untuk "kapan halaman terasa sudah bisa digunakan".
Target yang dianggap baik oleh Google: di bawah 2,5 detik. Penyebab LCP buruk yang paling umum: gambar yang tidak dikompres, server hosting yang lambat, dan CSS/JS yang memblokir rendering.
INP — Interaction to Next Paint
INP menggantikan FID sejak Maret 2024. Metrik ini mengukur seberapa cepat website merespons saat pengguna mengklik tombol, mengisi form, atau berinteraksi dengan halaman. Kalau kamu pernah mengklik sesuatu dan tidak terjadi apapun selama beberapa detik, itu INP yang buruk.
Target Google: di bawah 200 milidetik. Penyebab paling umum: JavaScript yang terlalu berat berjalan di main thread.
CLS — Cumulative Layout Shift
CLS mengukur seberapa banyak elemen halaman bergeser secara tidak terduga saat loading. Kamu pasti pernah mengalaminya: kamu hampir mengklik tombol, tapi tiba-tiba iklan dimuat dan tombolnya bergeser — lalu kamu malah mengklik hal yang salah. Itulah layout shift.
Target Google: di bawah 0,1. Penyebab umum: gambar tanpa atribut width/height, iklan yang dimuat belakangan, dan font yang menyebabkan teks bergeser saat dimuat.
Cara Cek Core Web Vitals Website-mu
Buka pagespeed.web.dev dan masukkan URL website-mu. Hasilnya akan menampilkan skor ketiga metrik beserta rekomendasi spesifik. Untuk data yang lebih real (berdasarkan pengguna nyata), buka Google Search Console dan masuk ke laporan Core Web Vitals.
Perbaikan Paling Efektif
Untuk sebagian besar website, tiga langkah ini memberi dampak terbesar: kompres semua gambar ke format WebP, aktifkan caching di server, dan tunda loading JavaScript yang tidak kritis. Di Laravel, kamu bisa menggunakan package seperti spatie/laravel-image-optimizer untuk kompresi gambar otomatis saat upload.
Since the Google Page Experience Update 2021, the speed and convenience of the website is no longer just a technical factor — it's an official ranking factor. Behind the update are three metrics called Core Web Vitals. If you've never checked it, chances are there are ranking points that are being lost.
LCP — Largest Contentful Paint
The LCP measures how long it takes until the largest element on the page — usually a hero image or main block of text — is loaded and visible to the user. This is a proxy for "when the page feels usable".
Targets that are considered good by Google: under 2.5 seconds. The most common causes of poor LCP: uncompressed images, slow hosting servers, and CSS/JS that block rendering.
INP — Interaction to Next Paint
INP has replaced fid since March 2024. This metric measures how quickly a website responds when a user clicks a button, fills out a form, or interacts with a page. If you ever click on something and nothing happens for a few seconds, that's bad INP.
Google target: under 200 milliseconds. Most common cause: JavaScript that is too heavy running in the main thread.
CLS — Cumulative Layout Shift
CLS measures how much a page element shifts unexpectedly during loading. You must have: you almost clicked on a button, but suddenly the ad loaded and the button shifted-then you clicked the wrong thing. That's the shift layout.
Google target: below 0.1. Common causes: images without the width/height attribute, late-loaded ads, and fonts that cause text to shift during loading.
How to Check the Core Web Vitals ofYour Website
Go to pagespeed.web.dev and enter your website URL. The result will display the scores of all three metrics along with specific recommendations. For more real data (based on real users), go to Google Search Console and go to the Core Web Vitals report.
Most Effective Improvements
For most websites, these three steps have the biggest impact: compress all images to WebP format, enable on-server caching, and delay non-critical JavaScript loading. In Laravel, you can use packages such as spatie/laravel-image-optimizer for automatic image compression during upload.
Siap Mulai Karir IT-mu?
Bergabung dengan ribuan alumni DebugGo yang sudah berhasil masuk industri teknologi.
Lihat Kelas DebugGo
Komentar 0