Largest Contentful Paint (LCP)

Philip Walton

Barry Pollard

Secara historis, developer web mengalami kesulitan 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 mereka. Selain itu, metrik performa yang lebih baru dan berfokus pada pengguna seperti First Contentful Paint (FCP) hanya merekam bagian awal pengalaman pemuatan. Jika halaman menampilkan layar pembuka atau indikator pemuatan, momen ini tidak terlalu relevan bagi pengguna.

Sebelumnya, kami telah merekomendasikan metrik performa seperti First Defineful 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—artinya tetap tidak mengidentifikasi kapan konten utama halaman dimuat.

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

Apa yang dimaksud dengan LCP?

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

Berapa skor LCP yang baik?

Untuk memberikan pengalaman pengguna yang baik, situs harus berusaha memiliki Largest Contentful Paint selama 2,5 detik atau kurang. Untuk memastikan Anda mencapai target ini bagi sebagian besar pengguna, nilai minimum 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 saat ini ditentukan dalam Largest Contentful Paint API, jenis elemen yang dipertimbangkan untuk Largest Contentful Paint adalah:

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

Perhatikan bahwa pembatasan elemen ke kumpulan terbatas ini dilakukan secara sengaja agar semuanya tetap sederhana di awal. Elemen tambahan (seperti dukungan penuh <svg>) dapat ditambahkan di masa mendatang seiring dengan dilakukannya lebih banyak riset.

Selain hanya mempertimbangkan beberapa elemen, pengukuran LCP menggunakan heuristik untuk mengecualikan elemen tertentu yang cenderung dianggap "tidak berisi konten" oleh pengguna. Untuk browser berbasis Chromium, ini mencakup:

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

Browser kemungkinan akan terus meningkatkan heuristik ini untuk memastikan kami memenuhi ekspektasi pengguna tentang elemen berisi terbesar.

Konten "konten penuh" ini heuristik 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 jika elemen tersebut tidak memenuhi syarat untuk menjadi kandidat LCP. Meskipun keduanya menggunakan kata "contentful" pada namanya, tujuan metrik ini berbeda. FCP mengukur saat konten apa pun di-paint ke layar dan LCP saat konten utama di-paint sehingga LCP dimaksudkan untuk lebih selektif.

Bagaimana cara menentukan ukuran elemen?

Ukuran elemen yang dilaporkan untuk LCP biasanya adalah ukuran yang terlihat oleh pengguna dalam area pandang. Jika elemen diperluas ke luar area pandang, atau jika salah satu elemen 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 persegi panjang 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 dimuat secara bertahap, dan akibatnya, elemen terbesar pada halaman mungkin berubah.

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

Misalnya, di halaman dengan teks dan gambar hero, browser mungkin awalnya hanya merender teks—pada saat itu browser akan mengirimkan entri largest-contentful-paint yang properti element-nya kemungkinan akan mereferensikan <p> atau <h1>. Kemudian, setelah banner besar selesai dimuat, entri largest-contentful-paint kedua akan dikirim dan properti element-nya akan mereferensikan <img>.

Elemen hanya dapat dianggap sebagai elemen konten 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 dimuat terlambat, laman dapat menambahkan elemen baru ke DOM saat konten baru tersedia. Jika salah satu elemen baru ini lebih besar dari elemen konten 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 jika elemen yang lebih besar dirender.

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

Untuk tujuan analisis, Anda hanya boleh melaporkan PerformanceEntry yang terakhir 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 ditampilkan (karena sudah ditampilkan melalui banyak API web lainnya).

Hal ini dapat menyebabkan situasi yang tampaknya tidak mungkin, yaitu LCP dilaporkan oleh API web lebih awal daripada FCP. Hal ini tidak benar, tetapi hanya muncul karena pembatasan keamanan ini.

Jika memungkinkan, sebaiknya tetap tetapkan header Timing-Allow-Origin, sehingga metrik Anda akan lebih akurat.

Bagaimana perubahan ukuran dan tata letak elemen ditangani?

Agar overhead performa saat penghitungan dan pengiriman entri performa baru tetap rendah, perubahan ukuran atau posisi elemen tidak menghasilkan kandidat LCP baru. Hanya ukuran dan posisi awal elemen di area pandang yang 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 didorong ke bawah, di luar tampilan akan tetap melaporkan ukuran awal dalam area pandang.

Contoh

Berikut adalah beberapa contoh ketika Largest Contentful Paint terjadi di beberapa situs populer:

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

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

Dalam contoh pertama, logo Instagram dimuat relatif awal dan tetap menjadi elemen terbesar bahkan saat konten lain ditampilkan secara bertahap. Pada contoh halaman hasil Google Penelusuran, elemen terbesar adalah paragraf teks yang ditampilkan sebelum gambar atau logo selesai dimuat. Karena semua gambar individual lebih kecil dari paragraf ini, gambar tersebut tetap menjadi elemen terbesar selama proses pemuatan.

Cara mengukur LCP

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

Alat kolom

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

Alat lab

• Chrome DevTools
• Mercusuar
• PageSpeed Insights
• WebPageTest

Mengukur LCP di JavaScript

Untuk mengukur LCP di 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});

Dalam 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 laporan API dan cara penghitungan metrik.

Perbedaan antara metrik dan API

• API akan mengirimkan 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 di-background, 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 tersemat—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 ke frame induk untuk agregasi.
• API mengukur LCP dari awal navigasi, tetapi untuk halaman yang dipra-render, LCP harus diukur dari activationStart karena sesuai dengan waktu LCP yang dialami pengguna.

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

import {onLCP} from 'web-vitals';

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

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

Bagaimana jika elemen terbesar bukan yang paling penting?

Dalam beberapa kasus, elemen (atau beberapa elemen) yang paling penting pada 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 identifikasi pengaturan waktu LCP di lapangan dan menggunakan data lab untuk melihat perincian dan mengoptimalkannya.

Referensi lainnya

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

Log perubahan

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

Untuk membantu Anda mengelolanya, 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.