Largest Contentful Paint: Cara Mengukur dan Optimasinya

Salah satu hal yang perlu diperhatikan dalam pengelolaan website adalah Core Web Vitals. Di dalamnya, terdapat metrik bernama Largest Contentful Paint (LCP). Pengukuran metrik ini dapat berdampak pada SEO website. Untuk itu, Anda perlu mengetahui cara optimasi LCP melalui panduan ini.

LCP adalah metrik yang dikenalkan oleh Google pada tahun 2021 untuk mengukur user experience suatu website. Elemen ini merupakan bagian dari Page Experience Update yang berkontribusi dalam pengukuran Core Web Vitals secara keseluruhan.

Untuk memahami cara optimasi LCP, Anda perlu tahu beberapa hal penting tentang metrik ini. bagaimana mengukurnya, dan faktor yang membuat skornya rendah. Simak pembahasan lengkapnya di bawah ini.. 

Apa itu LCP?

Largest Contentful Paint, atau LCP, adalah metrik yang menilai waktu loading website berdasarkan rendering elemen yang dikenal dengan istilah konten above-the-fold. Dalam hal ini, elemen yang dimaksud adalah semua aspek di halaman yang ditampilkan tanpa scrolling.

Pengukuran LCP dilakukan untuk menentukan kualitas user experience. Skor yang baik menandakan bahwa user dapat mengakses halaman tanpa membutuhkan waktu loading yang lama. Hal ini juga menunjukkan bounce rate yang lebih rendah.

Adapun beberapa elemen yang dipertimbangkan dalam pengukuran Largest Contentful Paint adalah:

• Gambar
• Tag gambar
• Gambar background dengan CSS
• Thumbnail video
• Teks

Semakin singkat waktu untuk memuat elemen-elemen di atas, semakin baik skor LCP yang akan didapat. Skor ini pun akan dibuktikan dengan peringkat halaman website di SERP karena LCP merupakan salah satu metrik yang diperhatikan oleh Google.

Baik Buruknya Skor Largest Contentful Paint (LCP)

Menurut ketentuan dari Google, waktu loading halaman website yang baik adalah di bawah 2,5 detik. Apabila semua elemen besar dapat termuat dalam waktu singkat yang ditentukan, maka skor LCP website pun menjadi bagus.

Jika user harus menunggu lama untuk melihat konten above-the-fold, maka itu berarti LCP website Anda perlu ditingkatkan. Waktu loading yang lama akan membuat user keluar dari halaman dan mencari sumber informasi alternatif lainnya.

Terdapat tiga skor LCP yang akan diberikan Google kepada website, yaitu Good, Need improvement, dan Poor. Berikut rincian pemberian skor LCP berdasarkan panduan Google:

• Good: waktu loading ≤ 2,5 detik
• Need improvement: waktu loading ≤ 4 detik
• Poor: waktu loading < 4 detik

Mengukur Skor LCP

Sebelum masuk ke pembahasan optimasi LCP, Anda perlu tahu cara mengukur skornya. Untuk mengetahui skor Large Contentful Paint, Anda perlu menggunakan tools tertentu, seperti:

PageSpeed Insights

Sebagai salah satu tools yang disediakan oleh Google, PageSpeed Insights dapat membantu Anda mengidentifikasi elemen terbesar di suatu halaman website. Ketika memasuki halaman analisis, Anda akan menemukan bagian “Diagnostics”. Di sana akan tercatat elemen yang mempengaruhi metrik LCP dan memperbaikinya.

Google Search Console

Sebelum merancang strategi optimasi LCP, Anda dapat melihat skornya melalui Google Search Console. Skor LCP bisa diketahui dari tab Core Web Vitals di bagian kiri navigasi GSC. Terdapat dua macam laporan yang bisa Anda dapatkan dari GSC, yaitu dari perangkat desktop dan mobile. Periksa keduanya dan cek elemen mana yang menyebabkan nilai LCP rendah.

Faktor yang Mempengaruhi Skor LCP

Seperti yang disebutkan sebelumnya, Large Contentful Paint dipengaruhi oleh beberapa faktor. Umumnya, elemen besar yang membuat waktu loading lama bisa membuat skor LCP rendah. Di antara banyak plugin maupun elemen lain yang berkontribusi dalam hal ini, terdapat beberapa faktor teknis yang juga perlu diperhatikan, di antaranya:

Waktu Respon Server

Memiliki waktu respon server yang lambat bisa berpengaruh buruk kepada waktu loading halaman. Aspek ini dapat berdampak negatif kepada LCP yang dapat menurunkan penilaian website di mata search engine.

Respon server yang lambat bisa diakibatkan oleh masalah di bagian back-end atau kueri database yang tidak dioptimasi. Singkatnya, semua hal yang terjadi secara teknis dalam pengelolaan website bisa menjadi faktor penyebab lambannya waktu respon server.

Penggunaan JavaScript dan CSS

Halaman website yang ringan lebih mudah untuk dimuat. Oleh karena itu, penggunaan JavaScript dan CSS dapat memberatkan beban loading yang membuat skor LCP buruk. Anda bisa mengurangi plugin yang ada di halaman website untuk mempercepat loading website, utamanya di konten above-the-fold, untuk memperbaiki penilaian LCP.

Waktu Loading Resource yang Lambat

Seperti halnya dengan JavaScript dan CSS, resource atau konten berisi visual biasanya membutuhkan waktu lama untuk dimuat. Jika banyak elemen besar dalam suatu halaman, waktu loading pun menjadi lambat dan memperburuk skor LCP.

Maka dari itu, hindari penggunaan gambar dan GIF berukuran besar. Namun itu tidak berarti penggunaan elemen visual tidak diperlukan sama sekali. Anda tetap bisa menambahkan gambar menarik dengan mengoptimasinya menggunakan strategi SEO image.

Client-side Rendering 

Proses client-side rendering merupakan salah satu metode pengembangan web yang banyak digunakan. Namun cara ini membutuhkan waktu untuk menyimpan dan memuat elemen JavaScript terlebih dahulu sebelum masuk ke konten utama yang dapat memperlambat waktu loading.

Cara Optimasi LCP

Setelah mengetahui seberapa penting dan apa saja yang mempengaruhi LCP, saatnya Anda melakukan optimasi sesuai dengan kaidah SEO. Adapun beberapa penerapan metode optimasi LCP adalah:

Mengoptimasi CSS

File CSS merupakan salah satu resource yang memblokir proses rendering. Untuk melakukan rendering konten utama halaman, resource harus didahulukan. Maka dari itu, Anda perlu mengoptimasi file CSS agar ukurannya tidak terlalu besar.

Cara lain untuk mengoptimasi file CSS adalah dengan menghapus kode yang sudah tidak digunakan dan mengoptimasi gambar background dengan kueri media.

Melakukan Optimasi Gambar

Salah satu cara optimasi LCP yang efektif adalah dengan menyesuaikan gambar di halaman. Beberapa metode yang bisa diterapkan dalam hal ini adalah:

• Melakukan kompresi gambar
• Mengubah format gambar yang lebih mudah dimuat
• Menambahkan video sebagai pengganti GIF
• Memastikan dimensi atau ukuran gambar sudah sesuai dengan halaman

Mempercepat Waktu Respon Server

Untuk melakukan optimasi LCP, Anda bisa mempercepat waktu respon server. Cara efektif untuk melakukannya adalah dengan menggunakan layanan hosting yang cepat. Di samping itu, Anda juga bisa melakukan optimasi server agar performanya lebih stabil.

Menggunakan Content Delivery Network (CDN)

Content Delivery Network (CDN) adalah server yang tersebar di seluruh dunia. Dengan CDN, konten suatu halaman bisa ditampilkan dalam waktu yang lebih singkat. Hal ini dikarenakan jarak server proxy dan lokasi user yang lebih dekat daripada server utama. 

Memperhatikan Font Website

Selain gambar, elemen besar yang perlu diperhatikan dalam penerapan optimasi LCP adalah font. Biasanya, file font yang digunakan di website berukuran besar sehingga proses loading membutuhkan waktu lama. Untuk itu, gunakan kurangi ukuran font dan perbarui style halaman untuk menggunakan font tersebut agar loading menjadi lebih cepat.

Menerapkan Sistem Caching

Cara optimasi LCP yang efektif adalah dengan memberlakukan sistem caching. Banyak data besar yang perlu diakses akan tersimpan dalam cache sehingga loading halaman pun tidak akan membutuhkan waktu lama dan mengurangi TTFB secara signifikan.

Mengoptimasi JavaScript

Optimasi JavaScript perlu dilakukan untuk mempersingkat waktu loading halaman. Anda perlu melakukan pengecekan program ini secara rutin agar tidak melambatkan page speed. Untuk menerapkan cara ini, Anda perlu menghapus kode yang tidak digunakan, memperbarui kode, dan memecah kode.

Demikian panduan seputar optimasi LCP, faktor yang mempengaruhinya, dan cara mengetahui skornya. Untuk memastikan website Anda teroptimasi dengan maksimal, Anda bisa menggunakan jasa SEO yang memberikan pelayanan optimasi dengan spesialis SEO secara profesional.