LCP (Largest Contentful Paint): Arti, Faktor & Tips Optimasi

Apakah Anda pernah mendengar istilah largest contentful paint? LCP adalah salah satu dari tiga metrik core web vitals, bersama INP (Interaction to Next Paint) dan CLS (Cumulative Layout Shift), yang berkaitan dengan pengalaman pengguna.

Skor largest contentful paint juga berkaitan dengan SEO, karena Core Web Vitals termasuk sinyal pengalaman halaman yang digunakan Google, meskipun relevansi dan kualitas konten tetap lebih menentukan.

Penasaran lebih lengkap tentang metrik tersebut? Tenang saja, artikel berikut akan memberikan rangkuman informasinya untuk Anda, yuk, simak baik-baik!

Apa itu Largest Contentful Paint (LCP)?

(Sumber: Kinex Media)

Largest Contentful Paint atau LCP adalah salah satu metrik dari core web vitals untuk mengukur nilai waktu loading berdasarkan rendering elemen.

Singkatnya, LCP adalah waktu yang diperlukan website untuk menampilkan elemen konten terbesar yang terlihat di layar, dihitung sejak pengguna mulai membuka halaman. Adapun kesiapan halaman dalam merespons interaksi diukur oleh metrik lain, yaitu INP.

Metrik ini menghitung waktu loading, sehingga nilainya dihitung dengan satuan detik. Hal yang diukur pada LCP adalah elemen atau blok terbesar yang ada dalam viewport pengguna.

Artinya, elemen yang dihitung adalah konten yang pertama kali dilihat oleh user. Beberapa elemen tersebut dapat berupa gambar, poster, background, dan juga teks.

Sementara itu, elemen-elemen lain yang tidak terlihat oleh user tidak diperhitungkan pada largest contentful paint.

Jika website Anda memiliki nilai largest contentful paint yang rendah, berarti situs tersebut teroptimasi dengan baik dan pengguna dapat mengaksesnya dengan cepat.

Akan tetapi, hal yang perlu dipahami, LCP adalah hal yang berbeda dengan waktu loading website secara keseluruhan.

Misalnya, jika Anda membutuhkan waktu 3 detik untuk loading halaman secara keseluruhan, bisa jadi LCP nya kurang dari itu.

Hal itu disebabkan karena waktu loading website secara keseluruhan akan memuat berbagai skrip, sedangkan LCP hanya mengukur waktu muat konten yang dapat dilihat oleh pengguna saja.

Cara Mengukur Skor LCP

Lalu, bagaimana cara untuk mengukur largest contentful paint pada website?

Untuk mengetahui nilainya, setidaknya ada dua cara yang dapat Anda lakukan, yaitu dengan menggunakan field tools dan juga lab tools. Berikut masing-masing penjelasannya.

1. Field Tools

PageSpeed Insight (Sumber: Jagoweb)

Field tools atau pengukuran lapangan adalah alat yang dapat mengukur langsung dari sumber aslinya.

Dalam hal ini, pengukuran tersebut didapatkan dari pengguna website itu sendiri. Karena berasal dari pengguna sungguhan, data lapangan lebih mewakili pengalaman nyata dan menjadi acuan penilaian Core Web Vitals.

Beberapa rekomendasi pilihan field tools untuk mengukur LCP adalah sebagai berikut.

• Google Search Console
• PageSpeed Insights
• Chrome User Experience Report

2. Lab Tools

Lab tools adalah alat pengukuran yang dapat disimulasikan, sehingga nilainya bukan merupakan hasil sebenarnya dari pengguna.

Meski begitu, lab tools sangat berguna untuk mencari penyebab LCP yang lambat dan menguji perbaikan sebelum data lapangan diperbarui.

Beberapa contoh alat pengukuran lab untuk mengukur LCP adalah sebagai berikut.

• Chrome DevTools
• WebpageTest.org
• Lighthouse

Faktor yang Mempengaruhi Skor LCP

Skor LCP ditentukan oleh elemen terbesar yang tampil di layar saat halaman dimuat. Berikut jenis elemen yang dapat menjadi elemen LCP sehingga memengaruhi skornya.

1. Elemen Image

Elemen yang paling sering menjadi elemen LCP adalah gambar atau image. Elemen <img> berfungsi untuk menampilkan gambar pada halaman website.

Pasalnya, gambar pada dokumen HTML tidak sepenuhnya masuk ke dalam file .html, tetapi dapat bersumber pada tempat asalnya.

Selain itu, poster image yang ada pada elemen <video> juga akan terhitung dalam largest contentful paint.

Elemen <image> yang berada di dalam <svg> juga ikut diperhitungkan. Sebaliknya, elemen yang dianggap bukan konten, seperti elemen transparan atau gambar latar yang menutupi seluruh layar, biasanya diabaikan.

2. Elemen Background dalam URL

Elemen ini adalah elemen yang memuat gambar latar melalui CSS. Biasanya, pengaturan tersebut dapat Anda temukan dengan format berikut:

background-image: url(https://namadomain.com/gambar-website.jpg);

3. Teks pada Block Level atau Inline Level

(Sumber: Codeburst)

Block level adalah elemen berupa tag HTML yang menciptakan blok baru dalam alur sebuah halaman.

Contoh tag dari elemen ini seperti <p> atau <h1>. Kedua tag tersebut dapat menciptakan block baru di baris yang berbeda.

Lebih lanjut, inline level merupakan tag HTML yang akan mengikuti tampilan yang ada dan tidak dapat menciptakan baris baru.

Contohnya adalah tag <strong> dan <em> yang dapat digunakan untuk mengubah style teks, seperti tebal atau miring. Biasanya, inline level terdapat di dalam block level.

Semua teks yang masuk ke dalam elemen tersebut dapat mempengaruhi skor dari largest contentful paint, baik block level maupun inline level.

Tips Optimasi Largest Contentful Paint

Menurut Google, LCP dinilai baik jika 2,5 detik atau kurang, perlu perbaikan jika antara 2,5 hingga 4 detik, dan buruk jika lebih dari 4 detik. Penilaian ini memakai persentil ke-75 dari kunjungan halaman, baik di perangkat seluler maupun desktop.

Lantas, bagaimana cara untuk mengoptimasi halaman untuk meningkatkan kecepatannya?

Nah, beberapa tips dan cara untuk mengoptimasi largest contentful paint adalah sebagai berikut.

1. Optimasi Image

Hal pertama yang harus diperhatikan dalam optimasi LCP adalah image atau gambar. Sebab, gambar yang berukuran besar akan membutuhkan waktu muat yang cukup lama.

Hal tersebut pun dapat mempengaruhi nilai largest contentful paint pada website Anda.

Untuk meminimalisir hal itu, Anda perlu mengubah ukuran dan dimensinya menjadi lebih kecil.

Selain itu, Anda juga harus mempertimbangkan pemilihan format gambar. Format WebP umumnya menghasilkan ukuran file yang lebih kecil dibandingkan PNG atau JPG pada kualitas yang setara.

2. Prioritaskan Pemuatan Elemen LCP

Pastikan elemen LCP, biasanya gambar hero atau banner di bagian atas halaman, dimuat secepat mungkin. Jangan pasang lazy loading (loading="lazy") pada gambar tersebut, lalu tambahkan atribut fetchpriority="high" atau preload agar browser mendahulukannya.

Untuk mengetahui elemen mana yang menjadi elemen LCP, jalankan PageSpeed Insights lalu lihat bagian diagnosis elemen Largest Contentful Paint, atau gunakan panel Performance di Chrome DevTools.

3. Optimasi CSS dan JavaScript

Tips lainnya, Anda juga perlu mengoptimasi file CSS dan JavaScript untuk memperkecil ukurannya.

Hal-hal yang dapat Anda lakukan adalah seperti menghapus jeda baris, spasi yang tidak penting, komentar yang sudah tidak dibutuhkan, dan lain sebagainya.

Untuk memperkecilnya, Anda dapat menggunakan tools agar lebih mudah. Jika Anda menggunakan CMS WordPress, maka di sana juga tersedia plugin untuk memperkecil file JavaScript dan CSS.

4. Memilih Hosting yang Tepat

Salah satu hal lain yang mempengaruhi LCP adalah respon server yang lambat. Hal itu bisa disebabkan oleh berbagai hal, misalnya sumber daya hosting yang dibagi dengan banyak website lain, server yang jauh dari lokasi pengguna, atau proses di sisi server yang berat.

Lambatnya respon server tersebut dapat membuat waktu muat konten di website menjadi lebih lambat.

Untuk itu, pastikan Anda memilih hosting yang tepat dari penyedia yang terpercaya, sehingga dapat berperan untuk mempercepat waktu loading.

5. Aktifkan Caching Halaman

Caching halaman atau page caching adalah penyimpanan halaman secara sementara pada server sebagai file HTML ketika pertama kali dimuat. Dengan itu, halaman Anda akan lebih cepat dimuat pada akses selanjutnya.

Caching ini sangat cocok jika website Anda tidak sering mengalami perubahan, dan tidak bergantung pada beberapa informasi dinamis, seperti bahasa, zona waktu, lokasi, dan lain sebagainya.

Akan tetapi, tidak semua website cocok untuk menerapkannya. Anda perlu memastikannya terlebih dahulu untuk mengetahui apakah caching ini cocok atau tidak untuk diterapkan.

Nah, itulah tadi beberapa rangkuman informasi tentang largest contentful paint dari mulai pengertian hingga tips optimasinya.

Pada intinya, LCP adalah metrik yang dapat mengukur kecepatan konten yang ditampilkan pada pengguna. Hal itu berkaitan dengan pengalaman pengguna.

Halaman yang lambat menampilkan konten utamanya berisiko membuat pengunjung pergi sebelum halaman selesai dimuat. Selain itu, LCP termasuk Core Web Vitals yang digunakan Google sebagai bagian dari sinyal pengalaman halaman, sehingga dapat ikut memengaruhi SEO.

Meski bukan satu-satunya faktor, LCP yang baik membantu website Anda bersaing di Search Engine Result Page (SERP) sekaligus memberikan pengalaman yang lebih nyaman bagi pengunjung.

Yuk, mulai optimalkan performa dan strategi website Anda bersama jasa SEO Sitespirit.

Konsultasikan kebutuhan Anda sekarang!