Bagaimana cara memperbaiki skor Core Web Vitals yang buruk?

Cari tahu metrik mana yang gagal, di perangkat apa, dan pada kelompok halaman mana; laporan Core Web Vitals di Search Console menampilkan ketiganya dari kunjungan Chrome yang nyata. Lalu perbaiki penyebab di balik metrik tersebut: untuk LCP, seberapa cepat gambar atau teks utama tiba; untuk INP, tugas JavaScript panjang yang menunda respons; untuk CLS, konten yang muncul tanpa ruang yang dicadangkan. Data lapangan mencakup 28 hari terakhir, jadi nilailah hasil perbaikan dalam kurun sebulan.

Langkah 1: temukan apa yang gagal

1. Buka laporan Core Web Vitals di Search Console dan pilih Seluler atau Desktop; keduanya dinilai secara terpisah.
2. Buka salah satu masalah yang terdaftar, misalnya masalah LCP di seluler, untuk melihat kelompok URL yang terdampak beserta contoh URL-nya. Seluruh kelompok memiliki satu status yang ditentukan oleh metrik terburuknya.
3. Jalankan salah satu contoh URL melalui PageSpeed Insights untuk melihat data lapangan halaman tersebut berdampingan dengan uji lab yang membantu proses debug.

Alat lab seperti Lighthouse tidak dapat mengukur INP karena tidak ada yang berinteraksi dengan halaman, sehingga alat itu melaporkan Total Blocking Time sebagai gantinya. Untuk INP, pengukuran dari pengguna nyata adalah panduan yang andal.

Cara memperbaiki LCP yang lambat

Panduan optimasi LCP dari web.dev membagi LCP menjadi empat bagian: waktu respons server, jeda sebelum sumber daya utama mulai dimuat, waktu unduhnya, dan jeda sebelum sumber daya itu dirender. Kerjakan bagian yang terbesar lebih dulu:

• Pastikan gambar LCP dapat ditemukan di HTML awal, bukan disisipkan lewat JavaScript atau CSS, dan beri atribut fetchpriority="high".
• Jangan pernah menerapkan lazy-load pada gambar LCP.
• Sajikan dengan ukuran lebih kecil: dimensi yang tepat, format modern, kompresi, dan CDN yang dekat dengan pengunjung.
• Hilangkan sumber daya yang memblokir render: stylesheet yang lebih kecil, tanpa skrip sinkron di <head>, dan server-side rendering untuk konten utama.
• Percepat respons server: kurangi pengalihan dan izinkan halaman di-cache di edge.

Cara memperbaiki INP yang buruk

Panduan optimasi INP menguraikan setiap interaksi menjadi input delay, processing time, dan presentation delay:

• Input delay: kurangi JavaScript yang berjalan saat halaman dimuat, sehingga main thread bebas ketika seseorang mengetuk layar.
• Processing time: pecah event handler yang panjang menjadi tugas-tugas yang lebih kecil dan beri kesempatan kepada main thread, dengan mengerjakan pembaruan yang terlihat lebih dulu dan menunda sisanya.
• Presentation delay: jaga DOM tetap kecil, hindari memaksa layout dengan membaca gaya tepat setelah mengubahnya, dan gunakan content-visibility untuk halaman yang panjang.

Cara memperbaiki CLS yang tinggi

Panduan optimasi CLS mencantumkan penyebab yang paling umum beserta solusinya:

• Gambar dan video tanpa dimensi: tambahkan atribut width dan height, atau aspect-ratio CSS.
• Iklan, embed, dan iframe: cadangkan ruangnya di layout sebelum elemen tersebut dimuat.
• Konten yang disisipkan di atas konten yang sudah ada: gunakan placeholder dengan ukuran yang tepat, atau sisipkan konten baru di bawah bagian yang sedang dibaca pengunjung.
• Web font: lakukan preload pada font yang penting agar teks tidak bergeser belakangan.
• Animasi: animasikan transform, bukan properti seperti top atau left.

Halaman yang dapat memanfaatkan back/forward cache browser juga terhindar dari pergeseran layout saat pengunjung kembali ke halaman tersebut.

Langkah 3: pastikan perbaikannya berhasil

Lakukan deploy, lalu buka masalah tersebut di laporan Core Web Vitals dan mulai validasi. Google memantau kelompok itu selama 28 hari; validasi tidak memicu crawl ulang dan tidak mempercepat apa pun, hanya melacak apakah masalahnya sudah hilang. Karena data lapangan bergulir selama 28 hari, perkirakan laporan akan membaik secara bertahap. Untuk memahami arti tiap metrik, lihat Apa arti LCP, INP, dan CLS?.

Bagaimana AutoPSEO membantu

Laporan Core Web Vitals AutoPSEO menampilkan grafik data mingguan Chrome UX Report selama sekitar enam bulan untuk situs Anda atau satu URL, di ponsel, desktop, atau tablet, sehingga Anda dapat melihat minggu ketika perbaikan mulai berdampak, atau minggu ketika sebuah rilis memperburuk keadaan, tanpa harus menunggu jendela 28 hari berikutnya selesai.