Cat Contentful Terbesar (LCP): Panduan Teknis Lengkap & Standar Pengoptimalan

Largest Contentful Paint (LCP) adalah salah satu dari tiga metrik Core Web Vitals Google, yang dibuat untuk mengukur kecepatan pemuatan halaman yang dirasakan.LCP melacak waktu yang berlalu sejak pengguna mulai memuat halaman web hingga gambar terbesar, bingkai poster video, atau blok teks dalam area pandang awal yang terlihat sepenuhnya tergambar di layar.

Karena pengguna menilai kecepatan halaman web berdasarkan seberapa cepat konten utama terlihat dan dibaca, LCP secara luas dianggap sebagai metrik kinerja pemuatan yang paling penting.Akibatnya, Google memasukkan LCP ke dalam sinyal peringkat pengalaman laman resminya untuk penelusuran organik.

Jawaban-Ringkasan Pertama

Largest Contentful Paint (LCP) adalah metrik Core Web Vital yang mengukur kecepatan pemuatan halaman yang dirasakan berdasarkan waktu ketika blok teks atau elemen gambar terbesar yang terlihat di area pandang selesai dirender.Skor LCP yang lulus adalah 2,5 detik atau kurang untuk setidaknya 75% kunjungan halaman di data lapangan pengguna nyata (CrUX).Latensi LCP terdiri dari empat sub-bagian yang berbeda: Time to First Byte (TTFB), Resource Load Delay, Resource Load Duration, dan Element Render Delay.Mengoptimalkan LCP memerlukan pramuat aset pahlawan, menerapkan cache tepi, mengompresi gambar ke format WebP/AVIF, dan menghilangkan CSS dan JavaScript yang memblokir render.

Skala Penilaian Skor LCP & Ambang Batas Vital Web Inti

Untuk memberikan pengalaman yang cepat dan menarik bagi pengguna, laman web harus memenuhi ambang batas Data Web Inti yang ditetapkan Google untuk Cat Konten Terbesar:

Untuk mencapai nilai kelulusan dalam penilaian Core Web Vitals, situs web harus mencapai skor LCP dalam kategori Baik ($\le 2,5\text{ detik}$) untuk setidaknya 75% kunjungan halaman, yang dievaluasi pada kelompok desktop dan perangkat seluler dalam data lapangan dunia nyata.

Elemen DOM Apa yang Memenuhi Syarat untuk Evaluasi LCP?

Sesuai spesifikasi resmi W3C Largest Contentful Paint, browser memantau elemen DOM tertentu yang terlihat yang terletak di dalam viewport awal:

• Elemen <img> standar (termasuk gambar yang dirender di dalam tag <picture> responsif).
• Elemen <image> tertanam di dalam wadah vektor <svg>.
• Gambar poster video (atribut poster pada elemen <video>).
• Elemen dengan gambar latar belakang CSS dimuat melalui fungsi url().
• Penampung HTML tingkat blok yang berisi simpul teks atau turunan elemen teks sebaris (seperti judul <h1> sampai <h6>, paragraf <p>, atau blok <div>).

Mendekonstruksi LCP: Empat Sub-Bagian

Untuk mendiagnosis dan mengoptimalkan skor Cat Konten Terbesar yang lambat secara efektif, teknisi kinerja membagi latensi LCP menjadi empat sub-bagian berbeda:

1. Time to First Byte (TTFB): Waktu yang berlalu sejak pengguna meminta halaman hingga browser menerima byte pertama respons dokumen HTML dari server.Target: $< 800\text {ms} $ ($40%$ anggaran LCP).
2. Resource Load Delay: Penundaan antara saat dokumen HTML selesai menerima byte respons dan saat browser menemukan dan mulai mengambil sumber daya LCP (seperti gambar pahlawan).Target: $< 200\text {ms} $ ($10%$ anggaran LCP).
3. Resource Load Duration: Durasi yang diperlukan browser untuk mendownload gambar LCP atau aset font di seluruh jaringan.Target: $< 800\text {ms} $ ($40%$ anggaran LCP).
4. Element Render Delay: Waktu antara saat sumber daya LCP selesai diunduh dan saat browser menyelesaikan penghitungan tata letak dan menampilkan elemen ke layar.Target: $< 200\text {ms} $ ($10%$ anggaran LCP).

Secara matematis, total latensi LCP adalah jumlah dari empat sub-bagian berikut:

$$\text {LCP} = \text {TTFB} + \text{Resource Load Delay} + \text{Resource Load Duration} + \text{Element Render Delay}$$

Teknik Terbukti untuk Mengoptimalkan LCP

1. Hilangkan Penundaan Pemuatan Sumber Daya: Tambahkan <link rel="preload" as="image" href="..."> atau fetchpriority="high" ke tag gambar pahlawan Anda sehingga browser segera memulai pengunduhan gambar selama penguraian HTML.
2. Optimalkan Respons Server (TTFB): Terapkan edge caching melalui CDN, optimalkan performa kueri database, dan manfaatkan multiplexing push server HTTP/2 atau HTTP/3.
3. Kompres & Modernisasi Gambar: Sajikan gambar pahlawan menggunakan format WebP atau AVIF modern dengan ukuran srcset responsif yang disesuaikan dengan dimensi layar seluler dan desktop.
4. Kurangi Sumber Daya yang Memblokir Render: Masukkan CSS penting ke dalam tag <head> dan tangguhkan JavaScript yang tidak penting menggunakan atribut skrip defer atau async.
5. Optimalkan Pemuatan Font Web: Gunakan aturan font-display: swap atau font-display: optional dalam CSS @font-face untuk memastikan blok teks tetap terlihat segera saat font web selesai diunduh melalui jaringan.

LCP vs First Contentful Paint (FCP) vs Indeks Kecepatan

Meskipun LCP, FCP, dan Indeks Kecepatan semuanya mengukur kinerja pemuatan, mereka menangkap berbagai aspek perkembangan pemuatan halaman:

• First Contentful Paint (FCP): Mengukur kapan elemen DOM pertama (seperti warna latar belakang, spinner, atau teks header) selesai dirender di layar.
• Largest Contentful Paint (LCP): Mengukur kapan elemen konten visual utama (banner pahlawan atau blok paragraf utama) menyelesaikan rendering.
• Indeks Kecepatan: Mengukur seberapa cepat konten visual memenuhi area pandang seiring waktu selama perekaman kemajuan visual.

LCP diberi bobot tertinggi di antara metrik pemuatan dalam algoritme penilaian Lighthouse Google (saat ini 25% dari total skor kinerja) karena LCP paling selaras dengan persepsi pengguna sebenarnya tentang penyelesaian pemuatan laman.

Pemantauan LCP Berkelanjutan dengan SimpleOps

SimpleOps mengotomatiskan pelacakan Cat Berkonten Terbesar dengan menangkap audit lab Lighthouse sintetis dan metrik kumpulan data lapangan Laporan UX Chrome (CrUX) dalam satu dasbor pemantauan terpadu.SimpleOps mengirimkan peringatan proaktif instan setiap kali LCP persentil ke-75 situs Anda melanggar anggaran kinerja 2,5 detik, sehingga memberdayakan tim Anda untuk melindungi konversi dan peringkat penelusuran.