Mengenal Apa itu Largest Contentful Paint dan Cara Optimasi

LCP atau Largest Contentful Paint merupakan salah satu dari 3 metrik yang memengaruhi pengalaman pengguna terhadap website yang kita punya. Ketiga metrik ini disebut dengan Core Web Vitals. Dikembangkan oleh Google untuk mengukur kecepatan dan kualitas pemuatan halaman website.

Karena itu, penting untuk kita mengoptimalkan LCP ini agar pengunjung merasa nyaman dan puas. Apabila pengunjung puas, Google juga akan menganggap website kita memiliki pengalaman pengguna yang baik.

Dengan skor LCP yang baik, Google tentunya akan mempertimbangkan konten website kita untuk tampil peringkat atas di halaman hasil pencarian.

Daftar Isi

Apa itu Largest Contentful Paint?

LCP atau Largest Contentful Paint adalah metrik dari Core Web Vitals yang mewakili waktu yang dibutuhkan oleh sebagian besar halaman web (gambar, video, dll.) untuk muncul di browser pengunjung.

Sederhananya, LCP yaitu periode di mana sebagian besar konten website kita terlihat oleh pengguna. Hal ini mencakup semua yang ada di bagian atas atau "area pandang" (area yang terlihat oleh pengguna setelah halaman pertama kali dimuat), baik itu potongan video, gambar, atau elemen lainnya.

Untuk memuaskan Google, skor LCP harus kurang dari 2,5 detik. Hal ini berarti konten terbesar di halaman website kita harus terlihat dan siap berinteraksi dalam waktu tidak lebih dari 2,5 detik.

Agar lulus uji Core Web Vitals untuk waktu muat LCP, 75%+ pengunjung website kita mesti mendapatkan waktu LCP di bawah 2,5 detik.

Kenapa Largest Contentful Paint Begitu Penting?

Salah satu faktor yang berkontribusi pada pengalaman pengguna yang buruk adalah lamanya waktu yang dibutuhkan pengguna untuk melihat konten yang ada di layar pertama kali saat mengunjungi halaman web kita.

Makin lama elemen website kita dirender, pada saat itu pula pengunjung yang tidak sabar akan meninggalkan website kita. Hal ini akan membuat persentase bounce rate halaman menjadi tinggi dan bisa memengaruhi peringkat di hasil pencarian Google.

Di era web saat ini, LCP merupakan metrik yang pas untuk mengukur kecepatan website karena mencerminkan persepsi pengunjung yang sebenarnya terkait kecepatan muat konten halaman.

LCP memberi kita metode untuk mengukur keandalan kecepatan halaman dari sudut pandang pengunjung.

Selain itu, Google mengakui waktu dalam LCP sebagai salah satu metrik vital yang baru di tahun 2021 dan sekarang menjadi bagian dari algoritma peringkat di SERP.

Hal ini berarti LCP penting untuk kita optimalkan agar traffic ke situs meningkat.

Apa saja Tingkatan Skor Largest Contentful Paint?

Menurut pedoman Google, konten utama halaman web kita harus dimuat dalam 2,5 detik pertama dari kunjungan pengguna untuk mendapatkan LCP yang baik.

Gambar di bawah menunjukkan tingkatan skor LCP:

Warna hijau berarti skor LCP kita termasuk sudah sangat baik karena tidak lebih dari 2.5 detik. Kuning menandakan halaman website kita perlu dioptimalkan. Sedangkan merah mengindikasikan waktu muat konten utama sangat lambat dan perlu diperbaiki.

Cara Mengetahui Skor Largest Contentful Paint

LCP bisa diukur dengan menggunakan beberapa tools berikut:

Chrome User Experience Report
PageSpeed Insights
Search Console (Core Web Vitals report)
web-vitals JavaScript library
Chrome DevTools
Lighthouse
WebPageTest

Di contoh ini saya akan menggunakan PageSpeed Insights untuk mengetahui skor Largest Contentful Paint (LCP) dari halaman website trivusi.web.id.

Hasilnya skor LCP untuk perangkat mobile, yaitu 3.5 detik (warna kuning) yang berarti perlu dioptimasi lagi. Sementara untuk desktop mendapatkan skor 0.9 detik (warna hijau) yang berarti sudah optimal.

Bagaimana Cara Optimasi Largest Contentful Paint?

Berikut adalah optimasi yang bisa Anda lakukan untuk meningkatkan skor LCP situs web:

Melakukan resize dan kompresi terhadap gambar di website. Dalam kebanyakan kasus, gambar punya pengaruh besar terhadap skor LCP. Sebagai aturan praktis, kita harus mengubah ukuran dan mengoptimalkan setiap gambar yang diunggah ke website. Jika Anda pengguna WordPress 5.8, secara otomatis sistem akan menyajikan gambar WebP kepada pengguna, yang dapat membantu waktu mengoptimalkan LCP.
Pilih layanan hosting yang baik. Jika Anda sudah bekerja keras untuk mengoptimalkan website dan masih memakan waktu terlalu lama untuk memuat, kemungkinan karena web hosting yang Anda gunakan tidak menawarkan kinerja yang diperlukan. Gunakan paket yang sesuai dengan popularitas website atau pindah ke layanan yang lebih baik.
Gunakan Content Delivery Network (CDN). CDN dapat menyimpan salinan situs web kita di cluster server di seluruh dunia dan menyajikannya kepada pengunjung. Beberapa CDN juga menawarkan layanan khusus gambar, yang dapat sangat membantu mengoptimalkan skor LCP.
Eliminasi sumber daya yang sifatnya render-blocking. Kode JavaScript dan CSS merupakan dua sumber daya yang sifatnya render-blocking. Pastikan untuk menggunakan kode JavaSript dan CSS seminimal mungkin sesuai kebutuhan untuk sebuah halaman. Beberapa cara yang bisa digunakan untuk mengoptimalkan kedua resource tersebut adalah dengan melakukan minify, inline style/script, menunda resource yang non-critical (bisa dimuat nanti).

Penutup

Demikian penjelasan singkat mengenai salah satu metrik dalam core web vitals, yaitu Largest Contentful Paint (LCP). Semoga artikel ini bermanfaat.

Salam!

Trivusi