Ketahui apa yang dikatakan masing‑masing ukuran
Largest Contentful Paint, atau LCP, mengukur kapan gambar terbesar atau blok teks terbesar di viewport awal dirender. Interaction to Next Paint, atau INP, mengukur responsivitas kunjungan melalui interaksi kualifikasi terleletnya. Cumulative Layout Shift, atau CLS, mengukur pergerakan visual tak terduga selama kunjungan.
Target pengalaman yang dipublikasikan Google adalah LCP pada atau di bawah 2,5 detik, INP pada atau di bawah 200 milidetik, dan CLS pada atau di bawah 0,1. Nilai-nilai ini dinilai pada persentil ke-75 dari pemuatan halaman, terpisah untuk mobile dan desktop. Gunakan target untuk memfokuskan pekerjaan, bukan sebagai jaminan peringkat atau alasan mengabaikan pengunjung yang lebih lambat.
Konten utama muncul terlambat; selidiki jalur server, penemuan sumber daya, pengunduhan, dan jalur perenderan.
Klik, ketukan, atau penekanan tombol menunggu terlalu lama untuk respons visual; sumbernya bisa berupa frame tersemat.
Konten bergerak secara tak terduga; berikan perhatian ekstra pada pergeseran di dekat kontrol, formulir, dan posisi baca.
Biarkan data lapangan menentukan prioritas dan pengujian lab menjelaskannya
Data lapangan berasal dari kunjungan nyata, termasuk perangkat nyata, jaringan, lokasi, status cache, dan perilaku. Chrome User Experience Report muncul di PageSpeed Insights dan Search Console ketika data memadai. Pemantauan pengguna nyata (real-user monitoring) Anda sendiri dapat menambahkan konteks tampilan halaman; kumpulkan hanya telemetri yang diperlukan dan hindari data yang dimasukkan oleh pelanggan.
Data lab adalah pengujian yang dapat diulang di bawah kondisi terpilih. Berguna untuk mengisolasi perubahan rilis dan membaca trace, tetapi tidak bisa mewakili setiap pengunjung. Lighthouse tidak dapat mengukur INP sejati tanpa interaksi nyata, jadi Total Blocking Time adalah proksi diagnostik. Ketika hasil berbeda, gunakan data lapangan untuk memprioritaskan dan data lab untuk menyelidiki.
Catat apakah data pada level URL atau origin dan apakah untuk mobile atau desktop.
Simpan tanggal, kelompok halaman, perangkat, distribusi, pengaturan pengujian, dan rilis terakhir bersama baseline.
Triage berdasarkan jangkauan, kerugian tugas, bukti, dan reversibilitas
Jangan mulai dari angka terendah di dashboard. Urutkan kandidat berdasarkan kunjungan yang terpengaruh, pentingnya tugas pengunjung, pengulangan di seluruh template, dan apakah perubahan dapat diisolasi dan dikembalikan. Ini menjadikan optimasi Core Web Vitals sebagai remediasi operasional alih-alih sekadar mengejar skor.
Sebuah gambar tanpa dimensi pada template bersama mungkin perbaikan pertama yang lebih baik daripada penulisan ulang front-end yang spekulatif. Interaksi checkout yang kurang umum bisa menjadi prioritas ketika itu menghalangi penyelesaian. Padukan bukti metrik dengan umpan balik dukungan, pengamatan funnel, dan tinjauan aksesibilitas.
Masalah yang berulang di lapangan pada template penting dengan solusi jelas dan berisiko rendah.
Ide arsitektural tanpa masalah pengguna yang terukur atau jalur rollback; simpan sebagai hipotesis.
Perbaiki LCP dengan mempersingkat jalur ke konten utama
Identifikasi elemen LCP untuk halaman dan kelompok perangkat yang terpengaruh. Periksa respons HTML awal, kapan browser menemukan elemen, berapa lama sumber dayanya diunduh, dan apa yang memblokir perenderan. Waktu respons server yang tinggi dapat membuat target LCP tidak praktis bahkan dengan aset hero yang dioptimalkan dengan baik.
Pertahankan konten utama dapat ditemukan lebih awal ketika itu sesuai desain. Jangan lazy-load gambar yang menjadi elemen LCP. Untuk halaman yang dipimpin gambar, gunakan aset yang berukuran dan terenkode sesuai dengan dimensi yang eksplisit. Uji pra‑muat (preload) dan aturan pengiriman: permintaan dini hanya berguna jika tidak bersaing dengan pekerjaan yang lebih penting.
Periksa redirect, pekerjaan server, perilaku cache, dan kedekatan pengiriman; ini mungkin memerlukan kepemilikan aplikasi atau hosting.
Periksa apakah rendering klien, skrip, atau CSS menunda penemuan teks atau gambar utama.
Buat interaksi responsif dan tata letak dapat diprediksi
Untuk INP, reproduksi alur yang lambat dalam trace browser. Pisahkan delay input, pemrosesan event, dan delay presentasi. Tugas panjang pada benang utama (main thread), handler berat, rendering mahal, dan layout thrashing masing‑masing dapat menunda paint berikutnya. Lakukan pekerjaan visual untuk frame berikutnya terlebih dahulu; tunda penyimpanan yang tidak penting, analitik, atau pembaruan sekunder jika persyaratan produk mengizinkan.
Untuk CLS, temukan elemen yang bergerak alih‑alih menebak dari total. Sisakan ruang untuk gambar, video, iklan, embed, dan frame dengan dimensi atau aspect-ratio CSS. Periksa pemuatan font dan konten yang disuntikkan. Jangan menyembunyikan pesan persetujuan, kesalahan, atau aksesibilitas yang diperlukan hanya untuk memperbaiki skor; beri lokasi yang stabil.
Menunda pekerjaan dapat mengubah timing aplikasi. Uji regresi status, validasi, dan perilaku keyboard.
Gulir area yang dimuat malas dan embed; pengujian hanya pada pemuatan awal bisa melewatkan pergeseran kemudian.
Rilis perbaikan dengan aman dan konfirmasi hasilnya
Perubahan performa dapat memengaruhi skrip, caching, rendering, embed, atau konfigurasi pengiriman. Tahapkan perubahan, bandingkan jalur uji yang ditentukan dengan baseline, dan dokumentasikan rollback. Untuk alur pembayaran, akun, atau yang diatur, libatkan peninjau keamanan, kepatuhan, dan aksesibilitas yang tepat sebelum mengubah embed, validasi, atau penanganan data. Ini adalah panduan edukasional, bukan penilaian kepatuhan.
Setelah rilis, bandingkan jalur lab yang sama dan pantau segmen lapangan yang sebanding melalui jendela pelaporan normal mereka. Periksa efek tak terduga seperti error yang tersembunyi atau antarmuka yang tidak terbaca. Status Is UP mendukung optimasi ketersediaan yang proaktif melalui pemeriksaan berkala, kepemilikan remediasi yang jelas, dan kesiapan rollback antar insiden.
Tautkan setiap perubahan ke kelompok halaman, metrik, pemilik, bukti uji, trade-off, dan instruksi rollback.
Jangan deklarasikan keberhasilan hanya dari satu lulus sintetis; konfirmasi pola pengguna nyata yang relevan.
