Largest Contentful Paint: Pengertian dan Cara Optimasinya

Pemilik website wajib mengetahui apa itu Largest Contentful Paint (LCP) karena memiliki kaitan erat dengan performa website. Largest Contentful Paint merupakan salah satu elemen matriks pada Core Web Vitals sehingga dapat menunjukkan bagaimana user berinteraksi dengan website.

Pengertian Largest Contentful Paint

Largest Contentful Paint adalah elemen matrik yang menunjukkan berapa lama waktu yang dibutuhkan website untuk loading, sehingga dapat menilai kecepatan halaman website untuk merender elemen terbesar, baik dalam bentuk teks maupun blok gambar.

Apa itu Largest Contentful Paint dan bagaimana penilaiannya? Jika nilai LCP bagus artinya pengalaman pengguna juga bagus. Cara kerja LCP dalam mengukur waktu loading halaman website menggunakan satuan detik.

Baca Juga: First Input Delay: Pengertian dan Cara Optimasinya

Dalam hal ini konten utama LCP yaitu bagian konten yang dilihat oleh pengguna ketika membuka website pertama kali. Artinya, konten yang tidak terlihat oleh pengguna ketika pertama kali membuka website tidak bisa diperhitungkan.

Cara Mengetahui Skor Largest Contentful Paint

Kriteria nilai LCP yang bagus yaitu kurang dari sama dengan 2,5 detik. Adapun limit yang baik jika diukur dari perhitungan tersebut yaitu 75% dari semua halaman yang dimuat. Untuk mengetahui nilai LCP, ada beberapa tools yang dapat digunakan.

Lab Tools

Pengukuran lab adalah pengukuran yang bisa disimulasikan sehingga nilai yang dihasilkan bukanlah hasil perhitungan dari pengguna yang nyata. Biasanya pengukuran lab tools tidak jauh lebih baik daripada pengukuran lapangan atau pengguna nyata.

Berikut beberapa rekomendasi lab tools untuk mengukur nilai LCP.

• Lighthouse
• Chrome DevTools
• WeboageTest.org

Field Tools

Field tools merupakan pengukuran lapangan, pengukuran tersebut tidak dapat disimulasikan karena mengukur langsung dari lapangan atau dari sumber aslinya, yakni pengguna nyata website itu sendiri.

Umumnya, pengukuran dengan field tools hasilnya lebih baik. Berikut beberapa field tools rekomendasi dari Google untuk mengukur LCP.

• PageSpeed Insight
• Search Console
• Chrome UX Report

Elemen yang Mempengaruhi LCP

Terdapat beberapa elemen yang dihitung ketika menentukan skor. Berikut beberapa diantaranya.

<img>

Elemen ini digunakan untuk menampilkan gambar sehingga berguna untuk kebutuhan menyisipkan gambar di halaman website. Pasalnya, gambar di dokumen html tidak bisa disisipkan sepenuhnya di file .html, tetapi bisa dari file sumber gambar tersebut disimpan.

<image> dalam <svg>

Perlu diimbau bahwa di elemen SPG secara menyeluruh tidak bisa masuk pada perhitungan LCP. Hal ini disebabkan karena elemen image pada elemen svg bisa dipertimbangkan.

Poster Image di Elemen <video>

Elemen di videonya sendiri perhitungan waktu loading tidak bisa menjadi indikator. Jadi biasanya hanya disisipkan poster image saja sehingga dapat dihitung.

Elemen gambar latar yang dimuat dengan URL

Elemen yang berisi gambar latar yang dimuat dengan url juga sangat diperhitungkan dalam menilai skor LCP. Pengaturan seperti ini dapat ditemukan ketika Anda melakukan pengaturan di file CSS.

Block-level dan inline level yang berisi teks

Elemen block level merupakan tag HTML yang merupakan bagian terpisah di alur halaman serta ditampilkan pada baris baru. Sedangkan elemen inline level merupakan tag HTML yang bisa mengikuti tampilan yang sebelumnya sudah ada. Teks tersebut tidak bisa membuat garis baru.

Cara Optimasi Largest Contentful Paint

Setelah mengetahui apa itu Largest Contentful Paint, selanjutnya adalah bagaimana cara meningkatkan Largest Contentful Paint sesuai kaidah SEO. Berikut beberapa metode untuk optimasi LCP.

Mengoptimasi File CSS

CSS adalah salah satu sumber yang dapat memblokir terjadinya proses rendering. Resource perlu didahulukan sehingga dapat melakukan rendering pada konten utama halaman website. Untuk itu usahakan untuk melakukan optimasi file CSS supaya ukurannya tidak begitu besar.

Baca Juga: Cumulative Layout Shift: Pengertian dan Cara Optimasinya

Adapun metode lainnya untuk mengoptimasi CSS yaitu menghapus kode yang tidak lagi dipakai serta melakukan optimasi gambar latar belakang dengan query media.

Mempercepat Waktu Server Merespon

Anda juga dapat mempercepat waktu yang digunakan server untuk merespon supaya LCP lebih optimal. Metode efektifnya yaitu dengan cara memilih layanan hosting yang cepat. Anda juga perlu mengoptimasi server supaya lebih stabil performanya.

Optimasi Gambar

Untuk mengoptimasi LCP salah satu cara efektif yaitu menyesuaikan gambar yang disisipkan pada halaman website. Berikut beberapa metodenya.

• Mengompresi gambar yang akan disisipkan
• Menggunakan format yang mudah dimuat
• Menambahkan video untuk mengganti GIF
• Ukuran atau dimensi gambar harus sesuai dengan halaman

Menggunakan CDN

Content Delivery Network (CDN) merupakan server yang membantu konten pada suatu halaman website dapat ditampilkan dengan cepat. Hal ini terjadi karena jarak antara lokasi pengguna dengan server proxy lebih dekat dibandingkan server utama.

Menggunakan Sistem Caching

Anda juga bisa menggunakan sistem caching untuk mengoptimasi LCP secara efektif. Ada berbagai data besar tersimpan pada cache sehingga tidak butuh waktu yang lama untuk loading halaman website.

Memilih Font Website yang Tepat

Selain beberapa elemen di atas, perhatikan penggunaan font website yang dipakai sehingga LCP lebih optimal. Umumnya, file font pada website ukurannya lebih besar sehingga waktu yang dibutuhkan untuk loading pun lebih lama.

Oleh karena itu, cobalah untuk mengurangi ukuran font serta memperbarui style halaman supaya loading website lebih cepat. Ternyata cara ini cukup efektif untuk meningkatkan performa website.

Mengoptimasi JavaScript

Untuk mempercepat loading halaman, Anda perlu melakukan optimasi JavaScript dengan mengecek program secara konsisten supaya kecepatan akses halaman tidak melambat. Untuk mengaplikasikan metode ini Anda dapat menghapus kode yang tidak digunakan, memecah kode, hingga memperbarui kode.

Itulah penjelasan dari apa itu Largest Contentful Paint hingga cara mengoptimasinya. Bagi Anda para pemilik website tentu sangat penting untuk memahami hal ini dan mengaplikasikannya sehingga performa website tetap terjaga.

Coding Studio kini menghadirkan kursus terbaik bagi Anda yang ingin belajar mengoptimalkan kinerja website. Kami memiliki mentor ahli yang terbukti telah berhasil membimbing banyak klien untuk membuat website profesional sesuai kaidah SEO.