Optimasi Kecepatan Website: Diagnosis LCP, INP, dan CLS
Ukur pengalaman nyata, tentukan sumber masalah, dan verifikasi perubahan. Panduan membedakan pemuatan, respons interaksi, serta kestabilan tampilan.
Oleh Tim Editorial BWB
·
Website yang nyaman perlu memuat informasi utama, merespons tindakan, dan menjaga posisi elemen tetap stabil. Ketiganya berbeda: skor pemuatan yang baik tidak menjamin formulir responsif, dan halaman cepat tetap dapat bergeser ketika gambar atau font muncul.
Mulai dengan pengukuran yang tepat
Pilih halaman representatif: beranda, layanan, artikel panjang, dan alur formulir. Periksa melalui ponsel dan desktop. Catat perangkat, kondisi jaringan, serta keadaan cache agar hasil dapat dibandingkan. Pengujian sekali pada komputer pengembang bukan bukti pengalaman semua pengunjung.
PageSpeed Insights dapat menampilkan data lapangan jika tersedia dan pengujian laboratorium. Data lapangan berasal dari pengalaman pengguna nyata, sedangkan hasil laboratorium memakai kondisi pengujian tertentu. Tidak adanya data lapangan dapat terjadi pada situs dengan sampel yang belum memadai; itu bukan otomatis tanda website bermasalah.
Pahami tiga Core Web Vitals
| Metrik | Pertanyaan yang dijawab | Ambang kategori baik |
|---|---|---|
| LCP | Kapan konten utama terlihat? | Hingga 2,5 detik |
| INP | Seberapa cepat interaksi menghasilkan perubahan tampilan? | Hingga 200 milidetik |
| CLS | Apakah elemen berpindah tanpa diharapkan? | Hingga 0,1 |
Penilaian lapangan memperhatikan persentil ke-75 kunjungan. INP menggantikan FID sebagai metrik responsivitas: FID hanya mengukur penundaan input pertama, sedangkan INP menilai interaksi sepanjang kunjungan. Jangan menyamakan Total Blocking Time pada pengujian laboratorium dengan nilai INP lapangan.
Performa merupakan bagian dari pengalaman halaman, bukan jaminan posisi Google. Tidak ada persentase universal penurunan konversi untuk setiap detik keterlambatan pada semua bisnis. Jika ingin mengaitkan perubahan teknis dengan hasil bisnis, gunakan pengukuran dan konteks situs Anda sendiri.
Diagnosis LCP sebelum mengompres semua file
Identifikasi elemen LCP melalui alat pengujian. Jika elemen tersebut gambar hero, periksa waktu respons server, kapan gambar ditemukan, ukuran file, dan kapan browser dapat merendernya. Gambar yang sudah kecil tetap dapat muncul terlambat jika baru diminta setelah JavaScript selesai.
Gunakan gambar responsif dan format yang sesuai. Tetapkan dimensi agar ruangnya tersedia sebelum selesai diunduh. Jangan memakai lazy loading pada gambar utama yang memang dibutuhkan segera. Gambar di bawah area awal dapat dimuat secara lazy jika tidak menghalangi konten penting.
Untuk teks utama, periksa font dan CSS yang diperlukan. Font tambahan, banyak bobot, atau stylesheet yang terlambat dapat menunda atau mengubah tampilan. Batasi aset sesuai kebutuhan; jangan menghapus karakter atau bobot yang benar-benar digunakan.
Diagnosis INP pada tindakan pengguna
Coba membuka menu, mengubah filter, mengetik, dan mengirim formulir pengujian yang tidak melakukan transaksi nyata. Rekam interaksi lambat melalui alat performa browser. Cari pekerjaan JavaScript panjang, rendering besar, atau skrip pihak ketiga yang menghalangi thread utama.
Pemisahan kode membantu mengurangi pekerjaan awal, tetapi alur lazy tetap membutuhkan keadaan loading dan pemulihan kegagalan. Kurangi perhitungan berulang dan pecah pekerjaan besar jika diperlukan. Jangan menambahkan animasi loading sebagai pengganti memperbaiki proses yang lambat.
Diagnosis CLS pada gambar, font, dan konten dinamis
Sediakan ruang untuk gambar, video, banner, dan pratinjau sebelum aset dimuat. Periksa perbedaan ukuran font cadangan dengan font akhir. Konten yang disisipkan di atas bagian yang sedang dibaca dapat menggeser posisi, meskipun animasinya terlihat halus.
Untuk aplikasi dengan HTML prerender, ukur perpindahan saat aplikasi mengambil alih dokumen. Kerangka loading sebaiknya mengikuti proporsi konten sebenarnya. Uji kunjungan langsung dengan hash, jaringan lambat, dan artikel yang dimuat terpisah: perubahan tinggi dapat membuat pembaca kehilangan tujuan navigasi.
Prioritaskan berdasarkan dampak
Mulai dari masalah yang memengaruhi halaman dan alur penting. CDN, cache, dan kompresi bukan solusi yang sama untuk semua penyebab. Cache yang salah juga dapat menyajikan data usang; halaman akun atau respons pribadi membutuhkan kebijakan yang berbeda dari aset statis publik.
Evaluasi skrip eksternal berdasarkan fungsi dan biaya pemuatannya. Jangan mematikan analitik tanpa mempertimbangkan kebutuhan pengukuran, tetapi jangan pula menambahkan banyak alat yang melakukan pekerjaan sama. Catat perubahan agar hasil dapat dibandingkan.
Verifikasi setelah perubahan
Ulangi pengujian dalam kondisi setara dan pastikan fungsi utama tetap berjalan. Bandingkan metrik beserta screenshot dan rekaman interaksi, bukan hanya skor gabungan. Pantau data lapangan setelah sampel mencukupi; perubahannya tidak selalu terlihat seketika.
Pengujian otomatis perlu dilengkapi pemeriksaan keyboard, pembesaran teks, menu mobile, dan keadaan gagal. Panduan SEO dasar membantu menempatkan performa dalam konteks konten serta pengindeksan. Jika sedang menilai proyek baru, perjelas cakupan pengujian dalam penawaran.