Cara Memperbaiki Halaman Lambat dan Core Web Vitals
Core Web Vitals mengukur seberapa cepat halaman terasa bagi pengunjung: seberapa cepat konten utama muncul, seberapa cepat halaman merespons, dan seberapa stabil tampilannya. Masing-masing punya daftar pendek penyebab yang umum.
Tiga angka yang perlu dicapai
| Metrik | Mengukur | Baik |
|---|---|---|
| LCP | Kapan konten utama muncul | 2,5 detik atau kurang |
| INP | Seberapa cepat halaman merespons input | 200 ms atau kurang |
| CLS | Seberapa besar tata letak bergeser | 0,1 atau kurang |
Jalankan Page Speed Test untuk melihat angkamu. Skor bisa berbeda di setiap pengujian, dan deployment baru bisa terasa lebih lambat sampai cache terisi, jadi uji lebih dari sekali.
Lab test mensimulasikan kunjungan. Data lapangan berasal dari pengguna Chrome sungguhan, dan itulah yang digunakan Google untuk pengalaman halaman. Situs baru mungkin belum punya data lapangan.
Memperbaiki LCP yang lambat
Elemen terbesar biasanya gambar utama atau judul. Mulailah dari gambar:
- Kompres dan ubah ukuran gambar sesuai ukuran tampilnya, lalu gunakan WebP atau AVIF.
- Jangan pernah lazy-load gambar utama, dan beri tahu browser bahwa gambar ini penting:
<img src="hero.webp" width="1200" height="630" fetchpriority="high" alt="...">- Pastikan server merespons dengan cepat. Hosting yang lambat menghambat semua yang setelahnya, jadi gunakan CDN dan cache HTML jika memungkinkan.
- Aktifkan kompresi, lalu pastikan dengan Website Compression Test.
Memperbaiki INP yang lambat
INP buruk ketika JavaScript membuat browser terus sibuk, sehingga ketukan dan klik harus menunggu. Skrip pihak ketiga seperti widget chat dan pelacak sering menjadi penyebabnya.
- Hapus skrip yang tidak kamu butuhkan, dan muat sisanya dengan
defer. - Tunda pekerjaan berat sampai halaman selesai dimuat, atau sampai pengguna membutuhkannya.
- Pecah tugas panjang menjadi bagian-bagian kecil agar browser bisa merespons di antaranya.
Memperbaiki CLS yang tinggi
Konten melompat ketika ada sesuatu yang dimuat terlambat dan mendorong semuanya ke bawah.
- Berikan
widthdanheightpada setiap gambar dan video. - Sisakan ruang untuk iklan dan embed dengan tinggi minimum yang tetap.
- Hindari menambahkan banner di atas konten yang sudah dimuat.
Mulai dari mana
Perbaiki template yang paling sering dikunjungi lebih dulu. Halaman beranda, halaman produk, dan template artikel blog biasanya mencakup sebagian besar situs. Ubah satu hal dalam satu waktu lalu uji lagi, sehingga kamu tahu apa yang membantu.
