Largest Contentful Paint (LCP)

Philip Walton

Barry Pollard

Dukungan Browser

• 77
• 79
• 122
• x

Sumber

Catatan: Largest Contentful Paint (LCP) adalah metrik Core Web Vital yang stabil dan penting untuk mengukur kecepatan pemuatan yang dirasakan karena menandai titik di linimasa pemuatan halaman saat konten utama halaman kemungkinan telah dimuat—LCP yang cepat membantu meyakinkan pengguna bahwa halaman tersebut berguna.

Secara historis, merupakan 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 yang lebih baru dan berfokus pada pengguna seperti First Contentful Paint (FCP) hanya merekam di awal pengalaman pemuatan. Jika halaman menampilkan layar pembuka atau menampilkan indikator pemuatan, momen ini tidak terlalu relevan bagi pengguna.

Sebelumnya, kami telah merekomendasikan metrik performa seperti First Artifactful Paint (FMP) dan Speed Index (SI) (keduanya tersedia di Lighthouse) untuk membantu menangkap lebih banyak pengalaman pemuatan setelah paint awal, tetapi metrik ini rumit, sulit dijelaskan, dan sering kali salah. Artinya, metrik ini masih tidak mengidentifikasi kapan konten utama halaman 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 dengan saat pengguna pertama kali membuka halaman.

Poin Penting: Penting untuk diperhatikan bahwa LCP mencakup waktu penghapusan muatan dari halaman sebelumnya, waktu penyiapan koneksi, waktu pengalihan, dan Time To First Byte (TTFB) yang dapat signifikan saat diukur di lapangan dan dapat menyebabkan perbedaan antara pengukuran kolom dan lab.

Bagaimana skor LCP yang baik?

Untuk memberikan pengalaman pengguna yang baik, situs harus berupaya memiliki Largest Contentful Paint maksimal 2,5 detik. Guna memastikan Anda mencapai target ini untuk sebagian besar pengguna, nilai minimum yang baik untuk diukur adalah persentil ke-75 pemuatan halaman, yang tersegmentasi di seluruh perangkat seluler dan desktop.

Nilai LCP yang baik adalah 2,5 detik atau kurang.

Catatan: Untuk mempelajari riset dan metodologi di balik rekomendasi ini lebih lanjut, lihat: Menentukan nilai minimum metrik Data Web Inti.

Elemen apa saja yang dipertimbangkan?

Seperti yang saat ini 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 tingkat inline lainnya.

Perhatikan bahwa membatasi elemen ke kumpulan terbatas ini disengaja untuk memudahkan di awal. Elemen tambahan (seperti dukungan <svg> penuh) dapat ditambahkan di masa mendatang saat riset lainnya dilakukan.

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

• Elemen dengan opasitas 0 yang tidak terlihat oleh pengguna
• Elemen yang menutupi area pandang penuh, yang kemungkinan dianggap sebagai latar belakang, bukan konten
• Gambar placeholder atau gambar lain dengan entropi rendah, yang mungkin tidak mencerminkan konten halaman yang sebenarnya

Browser cenderung akan terus meningkatkan heuristik tersebut untuk memastikan bahwa kami memenuhi ekspektasi pengguna terkait elemen konten terbesar.

Heuristik "contentful" ini mungkin berbeda dengan yang digunakan oleh First Contentful Paint (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 metrik ini berbeda. FCP mengukur saat konten apa pun digambar ke layar dan LCP saat konten utama digambar sehingga LCP ditujukan untuk menjadi lebih selektif.

Bagaimana ukuran elemen ditentukan?

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

Untuk elemen gambar yang telah diubah ukurannya dari ukuran intrinsiknya, 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.

Catatan: Menentukan node teks mana yang menjadi elemen elemen yang terkadang bisa menjadi rumit, terutama untuk elemen yang turunannya menyertakan elemen inline dan node teks biasa, tetapi juga elemen tingkat blok. Poin utamanya adalah bahwa setiap node teks dimiliki oleh (dan hanya milik) elemen ancestor level blok terdekatnya. Dalam istilah spesifikasi: setiap node teks adalah milik elemen yang menghasilkan blok penampungnya.

Kapan LCP dilaporkan?

Halaman web sering dimuat secara bertahap, dan akibatnya, elemen terbesar pada halaman mungkin berubah.

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

Misalnya, pada halaman yang berisi teks dan banner besar, browser mungkin awalnya hanya merender teks—pada saat itu browser akan mengirim entri largest-contentful-paint yang properti element-nya kemungkinan akan merujuk <p> atau <h1>. Kemudian, setelah banner besar selesai dimuat, entri largest-contentful-paint kedua akan dikirim dan properti element-nya akan merujuk <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 dapat menambahkan elemen baru ke DOM saat konten baru tersedia. Jika salah satu elemen baru ini lebih besar dari elemen contentful terbesar sebelumnya, PerformanceEntry baru juga akan dilaporkan.

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

Catatan: Sebelum Chrome 88, elemen yang dihapus tidak dianggap sebagai elemen yang memenuhi syarat terbesar, dan menghapus kandidat saat ini akan memicu entri largest-contentful-paint baru untuk dikirim. Namun, karena pola UI yang populer seperti carousel gambar yang sering menghapus elemen DOM, metrik diperbarui agar mencerminkan apa yang dialami pengguna dengan lebih akurat. Lihat CHANGELOG untuk detail selengkapnya.

Browser akan berhenti melaporkan entri baru begitu pengguna berinteraksi dengan halaman (melalui ketuk, scroll, atau penekanan tombol), karena interaksi pengguna sering mengubah apa yang terlihat oleh pengguna (yang terutama berlaku dengan men-scroll).

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

Perhatian: Karena pengguna dapat membuka halaman di tab latar belakang, entri largest-contentful-paint mungkin tidak akan dikirim hingga pengguna memfokuskan tab, yang bisa lebih lambat daripada saat pertama kali dimuat. Alat Google yang mengukur LCP tidak akan melaporkan metrik ini jika halaman dimuat di latar belakang, karena tidak mencerminkan waktu pemuatan yang dirasakan pengguna.

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. Sebaliknya, hanya waktu pemuatannya yang akan terekspos (karena ini sudah diekspos melalui banyak API web lainnya).

Hal ini dapat menyebabkan situasi yang tampaknya mustahil saat LCP dilaporkan oleh web API lebih awal dari FCP. Sebenarnya tidak demikian tetapi hanya muncul karena pembatasan keamanan ini.

Jika memungkinkan, sebaiknya selalu tetapkan 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 pandang yang dipertimbangkan.

Artinya, gambar yang awalnya dirender di luar layar, lalu transisi di layar mungkin tidak dilaporkan. Hal ini juga berarti elemen yang awalnya dirender di area pandang yang kemudian didorong ke bawah, keluar dari tampilan akan tetap melaporkan ukuran dalam area pandang awal.

Contoh

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

Linimasa LCP dari cnn.com.

Linimasa LCP dari techcrunch.com.

Dalam kedua linimasa di atas, elemen terbesar berubah saat konten dimuat. Di contoh pertama, konten baru ditambahkan ke DOM dan hal itu mengubah elemen mana yang terbesar. Pada contoh kedua, perubahan tata letak dan konten yang sebelumnya terbesar akan dihapus dari area pandang.

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

Linimasa LCP dari instagram.com.

Linimasa LCP dari google.com.

Dalam contoh pertama, logo Instagram dimuat lebih awal dan tetap menjadi elemen terbesar bahkan saat konten lain ditampilkan secara progresif. 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, setiap gambar tetap menjadi elemen terbesar selama proses pemuatan.

Catatan: Di frame pertama linimasa Instagram, Anda mungkin melihat logo kamera tidak memiliki kotak hijau di sekelilingnya. Hal itu karena elemen tersebut merupakan elemen <svg>, dan elemen <svg> tidak dianggap sebagai kandidat LCP untuk saat ini. Kandidat LCP pertama adalah teks dalam frame kedua.

Cara mengukur LCP

LCP dapat diukur di lab atau di lapangan, dan LCP 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, Anda dapat menggunakan 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});

Peringatan: Kode ini menunjukkan cara mencatat entri largest-contentful-paint ke dalam log ke konsol, tetapi pengukuran LCP dalam JavaScript lebih rumit. Untuk mengetahui detailnya, lihat Perbedaan antara Metrik dan API.

Pada contoh di atas, setiap entri largest-contentful-paint yang dicatat dalam log mewakili kandidat LCP saat ini. Secara umum, nilai startTime dari entri terakhir yang dimunculkan adalah nilai LCP, tetapi tidak selalu demikian. 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 akan mengirim entri largest-contentful-paint untuk halaman yang dimuat di tab latar belakang, tetapi halaman tersebut harus diabaikan saat menghitung LCP.
• API akan 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 LCP harus diukur dalam kasus ini karena pengguna mengalaminya sebagai kunjungan halaman yang berbeda.
• API 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 mempertimbangkannya. Sub-frame dapat menggunakan API untuk melaporkan entri largest-contentful-paint-nya ke frame induk untuk digabungkan.
• API mengukur LCP dari awal navigasi, tetapi untuk halaman yang dipra-render, LCP harus diukur dari activationStart karena sesuai dengan waktu LCP seperti yang dialami pengguna.

Daripada mengingat semua perbedaan kecil ini, developer dapat menggunakan library JavaScript web-vitals untuk mengukur LCP, yang menangani perbedaan ini untuk Anda (jika memungkinkan—perlu diperhatikan bahwa masalah iframe tidak dibahas):

import {onLCP} from 'web-vitals';

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

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

Catatan: Dalam beberapa kasus (seperti iframe lintas origin), pengukuran LCP dalam JavaScript tidak dapat dilakukan. Lihat bagian batasan library web-vitals untuk mengetahui detailnya.

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 menjalani proses identifikasi waktu LCP di lapangan dan menggunakan data lab untuk melihat perincian dan mengoptimalkannya.

Referensi lainnya

• 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, perubahan terkadang harus dilakukan, dan perubahan ini dapat muncul sebagai peningkatan atau regresi dalam dasbor dan laporan internal Anda.

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

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