Largest Contentful Paint (LCP): Bagian Core Web Vitals yang Perlu Diperbaiki untuk Kenyamanan User

Largest Contentful Paint (LCP) merupakan salah satu metrik Google yang perlu Anda perhatikan.

Metrik ini berdampak langsung pada faktor user experience terhadap website. Sebab, ia menilai seberapa baik performa situs web dalam hal kecepatan loading ketika pengguna mengaksesnya. 

Pada pembahasan kali ini, DailySEO ID akan menjelaskan lebih dalam tentang apa itu LCP dan langkah-langkah untuk mengoptimalkannya.

Apa Itu LCP (Largest Contentful Paint)?

Largest Contentful Paint merupakan bagian dari core web vitals yang dikenalkan Google sejak tahun 2021.

LCP berperan sebagai metrik yang mengukur waktu yang dibutuhkan laman situs web untuk memuat atau menampilkan elemen konten terbesarnya pada layar pengguna. Elemen ini bisa berupa gambar atau blok teks.

Dengan kata lain, LCP memberikan gambaran seberapa cepat pengguna bisa mulai berinteraksi dengan website teman-teman.

Semakin cepat situs web dalam melakukan render konten-konten di dalamnya, maka semakin baik skor LCP yang dimiliki.

Kenapa LCP Penting untuk Diperhatikan?

Melakukan optimasi untuk LCP sangat penting karena menentukan kenyamanan pengguna saat membuka situs web.

Tentunya, pengguna lebih menyukai situs web yang tampilan halamannya bisa langsung muncul di layar ketika di klik.

Jika memakan waktu yang cukup lama walau hanya beberapa detik, pengguna bisa saja langsung keluar dari situs web Anda. Akibatnya bounce rate jadi meningkat.

Sebagai bagian dari core web vitals, baik tidaknya skor LCP juga dapat berpengaruh pada penilaian Google dalam menentukan peringkat website di SERP.

Maka dari itu, melakukan optimasi terhadap metrik ini dapat meningkatkan ranking situs web Anda dan mendatangkan lebih banyak traffic serta meningkatkan user experience.

Berapa Skor LCP yang Bagus?

Skor LCP diukur berdasarkan kecepatan loading situs web dalam satuan detik. Ini dia perhitungannya berdasarkan Google:

• Skor LCP dapat dikatakan bagus jika berada di bawah 2,5 detik
• Jika berada di antara 2,5 hingga 4 detik, skornya dikatakan sedang atau cukup. Hal ini berarti performa website Anda masih bisa ditingkatkan
• Skor di atas 4 detik menandakan kecepatan loading situs web perlu segera dioptimalkan karena dianggap lambat

Apabila skor LCP situs web Anda berada di angka 4 detik atau bahkan lebih, sebaiknya segera mencari tahu apa penyebabnya dan bagaimana langkah perbaikannya.

Apa Saja Penyebab Skor LCP Rendah?

Menyadur dari Semrush, berikut beberapa hal yang bisa menyebabkan website memerlukan waktu lama untuk me-loading konten-konten di dalamnya.

1. Ukuran gambar yang terlalu besar

Ukuran gambar yang terlalu besar dan tidak dioptimalkan membutuhkan waktu loading yang lebih lama.

Oleh karena itu, kurangi resolusi gambar apabila terlalu tinggi. Jika memang tidak bisa dilakukan, hindari menempatkannya di bagian atas halaman web (bagian yang langsung muncul di layar pengguna ketika website di klik).

2. Waktu respon server yang lambat

Kecepatan server atau hosting website Anda sangat berpengaruh pada skor LCP.

Hosting yang lambat akan menyebabkan waktu respon server meningkat. Hal ini membuat browser perlu menunggu lebih lama untuk menerima data dari server.

Pada akhirnya, proses loading elemen-elemen di halaman situs web menjadi lambat, termasuk elemen konten terbesar yang menjadi faktor penilaian LCP.

3. CSS dan JavaScript tidak optimal

Penggunaan kode JavaScript atau CSS yang berlebihan dapat memperlambat proses rendering konten-konten pada halaman website.

Elemen tertentu pada halaman seperti stylesheet, banner cookie, dan lain-lain bisa menghambat proses penampilan laman HTML, sehingga memperlambat loading konten suatu situs web.

Cara Mengidentifikasi Skor LCP

Ada beberapa tools yang bisa teman-teman gunakan untuk mengetahui skor LCP website. Salah satunya adalah menggunakan PageSpeed Insights milik Google.

Tools ini dapat memberikan laporan yang mendetail seputar LCP suatu situs web serta rekomendasi perbaikannya.

Untuk menggunakan PageSpeed Insights, Anda bisa lakukan langkah berikut:

• Kunjungi situs web https://pagespeed.web.dev/
• Masukkan URL website yang ingin dicek pada kolom isian yang tersedia, lalu klik tombol “Analyze”

• Nantinya, teman-teman bisa melihat detail skor LCP maupun metrik core web vitals lain seperti INP dan CLS beserta diagnosa untuk perbaikan performa website tersebut

• Anda juga bisa melihat skor LCP situs web ketika dimuat pada perangkat smartphone atau semacamnya untuk melihat seberapa mobile-friendly situs web tersebut. Caranya dengan mengeklik tulisan “Mobile” di sebelah “Desktop”

Selain PageSpeed Insight, Anda juga bisa gunakan tools lain seperti Google Lighthouse, Google Search Console, atau fitur Site Audit milik Semrush.

Dengan menggunakan berbagai tools ini, Anda bisa mengetahui seberapa optimal kecepatan loading halaman website dan mulai melakukan perbaikan apabila skor LCP-nya rendah.

Cara Memperbaiki dan Meningkatkan Skor LCP Website

1. Identifikasi elemen LCP

Langkah pertama adalah menemukan elemen-elemen yang memengaruhi LCP di halaman website Anda, mulai dari heading atau teks paragraf, gambar, atau video.

Setelah elemen tersebut diidentifikasi, baru teman-teman bisa fokus untuk mengoptimasinya.

2. Optimasi gambar

Gambar dengan resolusi maupun ukuran yang besar sering kali menjadi penyebab utama skor LCP buruk. Untuk mengoptimalkannya:

• Coba gunakan format gambar WebP
• Kompres gambar sebelum mengunggahnya ke website
• Pastikan ukuran gambar sesuai dengan container atau elemen tempat gambar akan ditampilkan

3. Optimasi font

Penggunakan font kustom dapat memperlambat waktu loading website, karena browser harus men-download font tersebut terlebih dahulu.

Untuk memperbaikinya, Anda bisa:

• Pilih font dari sistem (default font)
• Pakai font yang sudah di-hosting
• Batasi penggunaan varian font yang berbeda

4. Minimalkan file JavaScript, CSS, dan HTML

Me-minify proses optimasi kode file JavaScript, CSS, dan HTML menjadi lebih compact akan mempercepat proses rendering halaman web.

Untuk melakukannya, Anda bisa menggunakan tools bernama Minifier.

5. Hapus render-blocking kode JavaScript dan CSS

Resource JavaScript dan CSS yang menghambat rendering konten-konten halaman web dapat berpengaruh pada skor LCP.

Maka dari itu, mulai identifikasi resource mana saja yang memblokir proses rendering, lalu cek mana yang benar-benar memang dibutuhkan. 

Sebab, terkadang website melakukan loading JavaScript atau CSS yang tidak diperlukan.

Setelah itu, Anda bisa menghapus atau menunda eksekusi kode resource yang tidak diperlukan di awal proses loading.

6. Gunakan Content Delivery Network (CDN)

Content Delivery Network (CDN) dapat membantu mengurangi waktu loading dengan cara menyimpan (caching) konten website teman-teman di berbagai server.

Jika user mengakses website Anda, konten-konten di dalamnya akan di-load dari server yang terdekat dengan lokasi mereka.

Hal ini sangat bermanfaat untuk meningkatkan skor LCP, terutama jika Anda memiliki audiens yang tersebar di berbagai lokasi geografis.

7. Hindari penggunaan lazy loading yang berlebihan

Lazy loading merupakan cara untuk menunda loading elemen yang tidak penting sampai user meng-scroll halaman.

Teknik ini cukup berguna. Namun, jika digunakan secara berlebihan justru bisa memperburuk skor LCP, terutama jika konten terbesar pada website teman-teman berupa gambar.

Oleh karena itu, sebaiknya jangan terlalu berlebihan dalam menggunakan lazy loading. Pastikan elemen gambar yang penting pada website bisa langsung dimuat saat halaman dibuka.

8. Upgrade web hosting

Jika hosting teman-teman kurang optimal, waktu respon server bisa menjadi lambat. Tentunya, hal ini dapat mempengaruhi skor LCP.

Hindari memakai shared hosting dan pertimbangkanlah untuk meng-upgrade ke server hosting yang lebih terpercaya.

9. Aktifkan cache halaman di website

Cache bisa membantu proses loading konten menjadi lebih cepat bagi user yang sudah pernah mengakses situs Anda.

Dengan mengaktifkan cache halaman website, elemen-elemen yang sudah pernah di-load sebelumnya tidak perlu dimuat ulang setiap kali user mengakses halaman tersebut.

Itulah hal-hal yang bisa Anda lakukan untuk meningkatkan skor LCP.

Optimalkan elemen-elemen yang memengaruhinya untuk meningkatkan performa website, serta memperbaiki user experience-nya agar lebih teroptimasi secara SEO.

Pastikan untuk secara rutin mengecek skor LCP website dengan tools tertentu seperti PageSpeed Insights dan terus lakukan perbaikan.

Apabila ingin mencari tahu lebih dalam tentang LCP atau bertukar insight seputar optimasinya, teman-teman bisa coba bergabung dengan grup Telegram DailySEO, komunitas para pegiat SEO dan digital marketer se-Indonesia.

Bagi teman-teman yang masih awam tentang SEO dan ingin mempelajari ilmunya bersama pakar berpengalaman, yuk, ikut kelas SEO Fundamental Course DailySEO Batch 7. Daftar sekarang dengan klik di sini.

References:

Largest Contentful Paint (LCP): What It Is & How to Improve It

Largest Contentful Paint

✕

Dapatkan berita terbaru seputar SEO Gratis!
Subscribe Sekarang!

Leave this field empty if you're human: