Largest Contentful Paint (LCP)

Philip Walton

Barry Pollard

Largest Contentful Paint (LCP) adalah metrik Core Web Vital yang stabil untuk mengukur kecepatan pemuatan yang dirasakan. Tag ini menandai titik dalam linimasa pemuatan halaman saat konten utama halaman kemungkinan telah dimuat. LCP yang cepat membantu meyakinkan pengguna bahwa halaman tersebut berguna.

Secara historis, menjadi tantangan bagi developer web untuk mengukur seberapa cepat konten utama halaman web dimuat dan terlihat oleh pengguna. Metrik lama, seperti load atau DOMContentLoaded, tidak berfungsi dengan baik, karena tidak selalu sesuai dengan yang dilihat pengguna di layar. Selain itu, metrik performa baru yang berfokus pada pengguna seperti First Contentful Paint (FCP) hanya merekam awal pengalaman pemuatan. Jika halaman menampilkan layar pembuka atau menampilkan indikator pemuatan, momen ini tidak terlalu relevan bagi pengguna.

Sebelumnya, kami merekomendasikan metrik performa seperti First Artifactful Paint (FMP) dan Speed Index (SI) (keduanya tersedia di Lighthouse) untuk membantu menangkap lebih banyak pengalaman pemuatan setelah penggambaran awal, tetapi metrik ini rumit, sulit dijelaskan, dan sering kali salah, yang berarti metrik tersebut masih tidak mengidentifikasi kapan konten utama halaman telah dimuat.

Berdasarkan diskusi di W3C Web Performance Working Group dan riset yang dilakukan di Google, kami menemukan bahwa cara yang lebih akurat untuk mengukur kapan konten utama halaman dimuat adalah dengan melihat kapan elemen terbesar dirender.

Apa itu LCP?

LCP melaporkan waktu render blok gambar atau teks terbesar yang terlihat di area pandang, dibandingkan saat pengguna pertama kali membuka halaman.

Bagaimana skor LCP yang baik?

Untuk memberikan pengalaman pengguna yang baik, situs harus berupaya memiliki LCP 2,5 detik atau kurang. Guna memastikan Anda mencapai target ini untuk sebagian besar pengguna, batas yang baik untuk diukur adalah persentil ke-75 pemuatan halaman, yang disegmentasikan di seluruh perangkat seluler dan desktop.

Elemen apa saja yang dipertimbangkan?

Seperti yang ditentukan dalam Largest Contentful Paint API, jenis elemen yang dipertimbangkan untuk Largest Contentful Paint adalah:

• <img> elemen (waktu presentasi frame pertama digunakan untuk konten animasi seperti GIF atau animasi PNG)
• Elemen <image> di dalam elemen <svg>
• <video> elemen (waktu pemuatan gambar poster atau waktu presentasi frame pertama untuk video digunakan—mana saja yang lebih awal)
• Elemen dengan gambar latar yang dimuat menggunakan fungsi url(), (bukan gradien CSS)
• Elemen level blok yang berisi node teks atau turunan elemen teks level inline lainnya.

Membatasi elemen ke set terbatas ini dimaksudkan untuk mengurangi kompleksitas. Elemen tambahan (seperti dukungan <svg> penuh) dapat ditambahkan di masa mendatang seiring dengan dilakukannya riset lainnya.

Selain hanya mempertimbangkan beberapa elemen, pengukuran LCP menggunakan heuristik untuk mengecualikan elemen tertentu yang mungkin akan dianggap pengguna sebagai "non-contentful". Untuk browser berbasis Chromium, hal ini mencakup:

• Elemen dengan opasitas 0, sehingga tidak terlihat oleh pengguna.
• Elemen yang menutupi area pandang penuh, yang kemungkinan besar adalah elemen latar belakang.
• Gambar placeholder atau gambar lain dengan entropi rendah, yang mungkin tidak mencerminkan konten halaman yang sebenarnya.

Browser cenderung akan terus meningkatkan heuristik ini untuk memastikan kami memenuhi harapan pengguna terkait elemen contentful terbesar.

Heuristik yang "contentful" ini berbeda dengan yang digunakan oleh FCP, yang mungkin mempertimbangkan beberapa elemen ini, seperti gambar placeholder atau gambar area pandang penuh, meskipun tidak memenuhi syarat untuk menjadi kandidat LCP. Meskipun kedua metrik ini menggunakan kata "contentful", tujuan dari metrik ini berbeda. FCP mengukur saat konten apa pun digambar ke layar, sedangkan LCP mengukur saat konten utama digambar.

Bagaimana ukuran elemen ditentukan?

Ukuran elemen yang dilaporkan untuk LCP biasanya adalah ukuran yang terlihat oleh pengguna dalam area tampilan. Jika elemen meluas ke luar area pandang, atau jika ada elemen yang terpotong atau memiliki overflow yang tidak terlihat, bagian tersebut tidak diperhitungkan dalam ukuran elemen.

Untuk elemen gambar yang telah diubah ukurannya dari ukuran intrinsik, ukuran yang dilaporkan adalah ukuran yang terlihat atau ukuran intrinsik, mana saja yang lebih kecil.

Untuk elemen teks, LCP hanya mempertimbangkan kotak terkecil yang dapat berisi semua node teks.

Untuk semua elemen, LCP tidak mempertimbangkan margin, padding, atau batas yang diterapkan menggunakan CSS.

Kapan LCP dilaporkan?

Halaman web sering kali dimuat secara bertahap, dan akibatnya, elemen terbesar di halaman dapat berubah selama pemuatan.

Untuk menangani potensi perubahan ini, browser mengirim PerformanceEntry jenis largest-contentful-paint yang mengidentifikasi elemen contentful terbesar segera setelah browser menggambar frame pertama. Setelah merender frame berikutnya, elemen ini akan mengirimkan PerformanceEntry lainnya setiap kali elemen contentful terbesar berubah.

Misalnya, pada halaman yang berisi teks dan banner besar, browser mungkin awalnya hanya merender teks, dan browser akan mengirim entri largest-contentful-paint yang properti element-nya merujuk ke <p> atau <h1>. Setelah banner utama selesai dimuat, entri largest-contentful-paint kedua akan dikirim, dengan properti element yang merujuk ke <img>.

Elemen hanya dapat dianggap sebagai elemen contentful terbesar setelah dirender dan terlihat oleh pengguna. Gambar yang belum dimuat tidak dianggap "dirender". Node teks juga tidak menggunakan font web selama periode pemblokiran font. Dalam kasus seperti itu, elemen yang lebih kecil mungkin dilaporkan sebagai elemen contentful terbesar, tetapi segera setelah elemen yang lebih besar selesai dirender, PerformanceEntry lain akan dibuat.

Selain gambar dan font yang terlambat dimuat, halaman mungkin menambahkan elemen baru ke DOM saat konten baru tersedia. Jika salah satu elemen baru ini lebih besar dari elemen contentful terbesar sebelumnya, PerformanceEntry baru akan dibuat.

Jika elemen contentful terbesar dihapus dari area tampilan, atau bahkan dari DOM, elemen tersebut tetap menjadi elemen contentful terbesar kecuali elemen yang lebih besar dirender.

Browser berhenti melaporkan entri baru segera setelah pengguna berinteraksi dengan halaman (melalui ketukan, scroll, atau penekanan tombol), karena interaksi pengguna sering mengubah apa yang terlihat oleh pengguna (terutama saat men-scroll).

Untuk tujuan analisis, hanya laporkan PerformanceEntry yang baru saja dikirim ke layanan analisis Anda.

Waktu pemuatan versus waktu render

Untuk alasan keamanan, stempel waktu render gambar tidak ditampilkan untuk gambar lintas origin yang tidak memiliki header Timing-Allow-Origin. Sebagai gantinya, hanya waktu pemuatan yang tersedia, yang telah diekspos oleh API lain.

Hal ini dapat menyebabkan situasi yang tampaknya mustahil saat LCP dilaporkan oleh API web lebih awal dari FCP. Ini hanya karena pembatasan keamanan ini, dan tidak mewakili apa yang sebenarnya terjadi.

Jika memungkinkan, sebaiknya setel header Timing-Allow-Origin agar metrik Anda lebih akurat.

Bagaimana tata letak elemen dan perubahan ukuran ditangani?

Agar overhead performa penghitungan dan pengiriman entri performa baru tetap rendah, perubahan pada ukuran atau posisi elemen tidak akan menghasilkan kandidat LCP baru. Hanya ukuran dan posisi awal elemen di area tampilan yang akan dipertimbangkan.

Artinya, gambar yang awalnya dirender di luar layar, lalu bertransisi di layar mungkin tidak dilaporkan. Hal ini juga berarti elemen yang awalnya dirender di area pandang yang kemudian dikeluarkan dari tampilan tetap melaporkan ukuran dalam area pandang awal.

Contoh

Berikut beberapa contoh kapan Largest Contentful Paint terjadi di beberapa situs populer:

Di kedua linimasa ini, elemen terbesar (ditandai dengan warna hijau) akan berubah saat konten dimuat. Pada contoh pertama, konten baru ditambahkan ke DOM, sehingga mengubah elemen mana yang terbesar. Di contoh kedua, tata letak berubah, menghapus elemen konten terbesar sebelumnya dari area pandang.

Meskipun konten yang terlambat dimuat sering kali lebih besar daripada konten yang sudah ada di halaman, ini belum tentu. Dua contoh berikutnya menunjukkan LCP yang terjadi sebelum halaman dimuat sepenuhnya.

Pada contoh pertama, logo Instagram dimuat relatif lebih awal dan tetap menjadi elemen terbesar meskipun konten lain ditambahkan. Pada contoh halaman hasil Google Penelusuran, elemen terbesar adalah paragraf teks yang ditampilkan sebelum gambar atau logo selesai dimuat. Karena setiap gambar lebih kecil dari paragraf ini, gambar individual tetap menjadi elemen terbesar selama proses pemuatan.

Cara mengukur LCP

LCP dapat diukur di lab atau di lapangan, dan tersedia di alat berikut:

Alat lapangan

• Laporan Pengalaman Pengguna Chrome
• PageSpeed Insights
• Search Console (laporan Data Web Inti)
• Library JavaScript web-vitals

Alat lab

• Chrome DevTools
• Mercusuar
• PageSpeed Insights
• WebPageTest

Mengukur LCP di JavaScript

Untuk mengukur LCP dalam JavaScript, gunakan Largest Contentful Paint API. Contoh berikut menunjukkan cara membuat PerformanceObserver yang memproses entri largest-contentful-paint dan mencatatnya ke konsol.

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('LCP candidate:', entry.startTime, entry);
  }
}).observe({type: 'largest-contentful-paint', buffered: true});

Pada contoh sebelumnya, setiap entri largest-contentful-paint yang dicatat ke dalam log mewakili kandidat LCP saat ini. Secara umum, nilai startTime dari entri terakhir yang dimunculkan adalah nilai LCP. Namun, tidak semua entri largest-contentful-paint valid untuk mengukur LCP.

Bagian berikut mencantumkan perbedaan antara apa yang dilaporkan oleh API dan cara penghitungan metrik.

Perbedaan antara metrik dan API

• API mengirimkan entri largest-contentful-paint untuk halaman yang dimuat di tab latar belakang, tetapi halaman tersebut harus diabaikan saat menghitung LCP.
• API terus mengirim entri largest-contentful-paint setelah halaman berada di latar belakang, tetapi entri tersebut harus diabaikan saat menghitung LCP. Elemen hanya dapat dipertimbangkan jika halaman berada di latar depan sepanjang waktu.
• API tidak melaporkan entri largest-contentful-paint saat halaman dipulihkan dari back/forward cache, tetapi dalam kasus ini LCP harus diukur karena pengguna mengalaminya sebagai kunjungan halaman yang berbeda.
• API ini tidak mempertimbangkan elemen dalam iframe, tetapi metrik melakukannya karena elemen tersebut merupakan bagian dari pengalaman pengguna halaman. Di halaman dengan LCP dalam iframe—misalnya gambar poster pada video yang disematkan—hal ini akan ditampilkan sebagai perbedaan antara CrUX dan RUM. Untuk mengukur LCP dengan benar, Anda harus menyertakan iframe. Sub-frame dapat menggunakan API untuk melaporkan entri largest-contentful-paint-nya ke frame induk untuk digabungkan.
• API ini mengukur LCP dari awal navigasi. Untuk halaman pra-rendering, ukur LCP dari activationStart, karena hal tersebut sesuai dengan waktu LCP seperti yang dialami oleh pengguna.

Daripada mengingat semua perbedaan kecil ini, sebaiknya developer menggunakan library JavaScript web-vitals untuk mengukur LCP, yang menangani sebagian besar perbedaan ini untuk Anda. (Tidak mencakup masalah iframe.)

import {onLCP} from 'web-vitals';

// Measure and log LCP as soon as it's available.
onLCP(console.log);

Lihat kode sumber untuk onLCP() guna mengetahui contoh lengkap cara mengukur LCP di JavaScript.

Bagaimana jika elemen terbesar bukanlah yang paling penting?

Dalam beberapa kasus, elemen (atau beberapa elemen) yang paling penting di halaman tidak sama dengan elemen terbesar, dan developer mungkin lebih tertarik untuk mengukur waktu render elemen lain ini. Hal ini dapat dilakukan menggunakan Element Timing API, seperti yang dijelaskan dalam artikel tentang metrik kustom.

Cara meningkatkan LCP

Panduan lengkap tentang mengoptimalkan LCP tersedia untuk memandu Anda melalui proses mengidentifikasi waktu LCP di lapangan dan menggunakan data lab untuk melihat perincian dan mengoptimalkannya.

Referensi tambahan

• Pelajaran dari pemantauan performa di Chrome oleh Annie Sullivan pada performance.now() (2019)

Log perubahan

Terkadang, bug ditemukan di API yang digunakan untuk mengukur metrik, dan terkadang dalam definisi metrik itu sendiri. Oleh karena itu, terkadang perubahan harus dilakukan, dan perubahan ini dapat muncul sebagai peningkatan atau regresi dalam laporan dan dasbor internal Anda.

Untuk membantu Anda mengelola hal ini, semua perubahan pada penerapan atau definisi metrik ini ditampilkan di log perubahan ini.

Jika Anda memiliki masukan untuk metrik ini, berikan di grup Google web-vitals-feedback.