LCP berkaitan dengan konten utama, INP dengan respons, dan CLS dengan pergeseran tak terduga. Perhatikan sumber data. Largest Contentful Paint atau LCP menggambarkan kapan elemen konten besar yang terlihat selesai ditampilkan. Tes laboratorium cepat tidak mewakili semua pelanggan dengan ponsel lama. Skor tidak menjamin hasil bisnis.
Hubungkan setiap metrik dengan pengalaman
Largest Contentful Paint atau LCP menggambarkan kapan elemen konten besar yang terlihat selesai ditampilkan. Interaction to Next Paint atau INP menilai respons visual terhadap interaksi pengguna selama kunjungan. Cumulative Layout Shift atau CLS mengukur pergeseran tata letak yang tidak diharapkan. Ketiganya menangkap masalah berbeda, sehingga satu perbaikan belum tentu memperbaiki semuanya.
Foto hero yang terlambat dapat memperburuk LCP. Tugas JavaScript panjang ketika menu diklik dapat memperburuk respons. Gambar tanpa ukuran atau font yang mengubah tinggi baris dapat menggeser tombol dan meningkatkan CLS. Hubungkan angka dengan tugas yang terlihat agar keputusan perbaikan tidak hanya mengejar skor.
Bedakan laboratorium dan data lapangan
Target pengalaman baik yang dijelaskan web.dev adalah LCP paling lama 2,5 detik, INP paling lama 200 milidetik, dan CLS tidak lebih dari 0,1 pada persentil ke-75, dengan pemisahan perangkat yang sesuai. Angka tersebut merupakan target evaluasi, bukan hasil situs baru sebelum ada data. Jangan menampilkan target sebagai sertifikat atau janji performa bagi setiap pengunjung.
Lighthouse menjalankan skenario laboratorium terkontrol. Laporan tersebut berguna untuk mendiagnosis pemuatan, tetapi tidak menggantikan kumpulan interaksi pengguna nyata. Total Blocking Time dapat membantu mengenali pekerjaan utama browser yang berat; angka itu bukan hasil INP lapangan. Sebuah situs baru mungkin belum mempunyai cukup data publik untuk penilaian lapangan.
Pilih perbaikan berdasarkan penyebab
Untuk LCP, periksa prioritas dan ukuran aset utama serta penundaan server. Untuk respons interaksi, kurangi pekerjaan JavaScript yang panjang dan beban pihak ketiga. Untuk stabilitas, tetapkan ruang gambar, video, dan komponen dinamis sebelum dimuat. Pengujian ulang perlu memakai halaman serta kondisi yang sebanding.
Simpan laporan sebelum dan sesudah perubahan beserta tanggal dan konfigurasi alat. Bila hanya halaman utama yang diuji, jangan menyimpulkan semua halaman memiliki hasil sama. Periksa jalur penting seperti harga, artikel, dan formulir. Setelah peluncuran, gunakan data nyata untuk memastikan bahwa keuntungan laboratorium juga dirasakan pengunjung dengan perangkat serta koneksi yang beragam.
Daftar periksa praktis
- Pisahkan lab dan lapangan
- Catat halaman
- Bandingkan kondisi
Contoh konkret: Tes laboratorium cepat tidak mewakili semua pelanggan dengan ponsel lama.
Batas yang perlu jelas: Skor tidak menjamin hasil bisnis.
Langkah berikutnya
Ceritakan proyek Anda kepada Orvunweb
