Cat Konten Terbesar (LCP)

Largest Contentful Paint (LCP) mengukur waktu dari saat halaman mulai dimuat hingga elemen konten terbesar yang terlihat di viewport selesai dirender. Ini adalah salah satu Core Web Vitals Google dan berfungsi sebagai indikator kecepatan pemuatan yang dirasakan, dengan alasan bahwa halaman terasa dimuat ketika konten utamanya muncul, bukan ketika setiap sumber daya telah selesai diunduh.

Elemen yang diukur biasanya berupa gambar utama (hero image), poster video, gambar latar belakang yang diterapkan pada blok besar, atau blok teks yang substansial. Elemen mana yang memenuhi syarat dapat berubah selama proses pemuatan saat konten dirender, dan nilai akhir yang dilaporkan sesuai dengan elemen terbesar pada saat pengguna pertama kali berinteraksi atau halaman selesai dimuat. Ambang batas yang dipublikasikan Google menganggap 2.5 detik atau kurang sebagai nilai yang baik, diukur pada persentil ke-75 dari pengalaman pengguna sebenarnya, yang berarti targetnya bukanlah pengunjung rata-rata tetapi seperempat dari mereka yang lebih lambat.

Penyebab skor buruk terbagi dalam beberapa kategori yang berulang. Respons server yang lambat menunda semua proses selanjutnya, sehingga waktu pemrosesan byte pertama yang tinggi membatasi hasil yang dapat dicapai. CSS dan JavaScript yang menghambat rendering di bagian head dokumen mencegah rendering dimulai hingga diunduh dan diproses. Gambar berukuran besar dan tidak dioptimalkan membutuhkan waktu lebih lama untuk ditransfer dan didekode, terutama pada koneksi seluler. Sumber daya yang ditemukan terlambat, seperti gambar yang dirujuk dari CSS atau disuntikkan oleh JavaScript, mulai diunduh setelah browser dapat memulai proses. Rendering sisi klien memperparah semua ini, karena konten tidak dapat ditampilkan hingga bundel telah diunduh dan dieksekusi.

Solusinya langsung mengikuti dan sebagian besar merupakan pekerjaan rekayasa yang tidak glamor. Menyajikan gambar dengan ukuran yang sesuai dalam format modern, dengan dimensi eksplisit dan petunjuk prioritas untuk elemen yang kemungkinan besar paling besar, mengatasi penyebab paling umum. Memuat gambar utama dan font penting terlebih dahulu memungkinkan browser untuk memulai lebih awal. Menyisipkan CSS penting dan menunda sisanya menghilangkan ketergantungan yang menghambat rendering. Meningkatkan waktu respons server melalui caching dan jaringan pengiriman konten meningkatkan batas atas untuk semua hal lainnya. Rendering sisi server atau pembuatan statis untuk halaman yang kaya konten menghindari menunggu JavaScript sepenuhnya.

Pengukuran memerlukan pembedaan antara data lapangan dan data laboratorium, karena keduanya menjawab pertanyaan yang berbeda. Data lapangan dari pengguna sebenarnya mencerminkan kondisi perangkat dan jaringan yang sebenarnya dan merupakan data yang digunakan oleh sistem peringkat pencarian, tetapi data tersebut dikumpulkan selama periode tertentu dan tidak menjelaskan penyebab individual. Alat laboratorium menghasilkan diagnostik yang dapat direproduksi dalam kondisi terkontrol, yang membuatnya berguna untuk debugging, tetapi hasilnya dapat berbeda secara substansial dari apa yang dialami pengunjung sebenarnya. Keduanya dibutuhkan: data lapangan untuk mengetahui apakah ada masalah, dan alat laboratorium untuk mencari tahu penyebabnya.

Peringatan praktisnya adalah bahwa metrik ini dapat ditingkatkan dengan cara yang tidak meningkatkan pengalaman, dan tim yang berada di bawah tekanan untuk mencapai ambang batas terkadang melakukan hal itu. Menunda tampilan gambar utama sehingga blok teks menjadi elemen terbesar, mengurangi ukuran visual utama sehingga elemen lain memenuhi syarat, atau menyembunyikan konten hingga setelah pengukuran, semuanya menggeser angka tanpa membuat halaman terasa lebih cepat. Karena ukuran ini merupakan proksi untuk persepsi pemuatan dan bukan hal itu sendiri, peningkatan harus diperiksa terhadap filmstrip dari urutan pemuatan aktual, yang menunjukkan apakah pengunjung melihat konten yang bermakna lebih cepat atau hanya apakah instrumen tersebut puas.

Argumen komersial untuk mengatasi hal ini tidak terutama bertumpu pada peringkat pencarian, di mana kecepatan hanyalah salah satu sinyal di antara banyak sinyal lainnya. Argumen ini bertumpu pada hubungan yang telah terdokumentasi dengan baik antara penundaan pemuatan dan pengabaian, yang paling menonjol pada koneksi seluler dan pada halaman dengan niat tinggi di mana pengunjung telah memutuskan untuk bertindak. Dalam praktiknya, hal ini menjadikan ukuran tersebut sebagai komponen standar dari... kinerja web pekerjaan, dan peningkatan pada pekerjaan tersebut seringkali terlihat dalam pengukuran konversi sejelas perubahan apa pun yang diuji melalui Layanan CRO program, itulah sebabnya pekerjaan peningkatan kinerja dan optimasi sebaiknya direncanakan bersama-sama daripada secara terpisah.