Apa Itu Largest Contentful Paint? Dan Cara Optimasi

Largest Contentful Paint adalah waktu yang dibutuhkan sebuah website dalam menyajikan konten utama yang siap untuk berinteraksi dengan pengguna.

Largest Contentful Paint adalah metrik pengalaman pengguna (UX) Google yang dirilis pada 28 Mei 2020 ^[1]. Metrik LCP ini akan segera menjadi faktor peringkat Google di tahun 2021.

Berikut ini videonya :

Mari kita pelajari bersama mengenai apa itu largest contentful paint serta cara mengoptimasinya.

Apa Itu Largest Contentful Paint?

Karena matrik ini mengukur waktu, maka satuan yang digunakan adalah detik.

Setelah membaca pengertian LCP di atas, mungkin ada yang bertanya, apa itu konten utama?

Apa Itu Konten Utama Pada LCP?

Semua konten yang tidak terlihat, tidak akan diperhitungkan.

LCP ini merupakan salah satu dari tiga metrik utama web vitals atao biasa disebut core web vitals. Nah tiga metrik inilah yang berperan besar menjadi faktor SEO.

Lebih lengkap mengenai core web vital ini dapat anda baca pada artikel saya berikut ini.

Masih bingung? Berikut ini kita lihat contohnya.

Contoh Largest Contentful Paint

Dapat anda lihat pada gambar, itulah yang anda lihat ketika pertama kali membuka artikel saya yang berjudul Belajar SEO.

Ada beberapa konten yang tampak pada layar, yaitu :

• logo
• menu
• judul
• icon-icon social media

Jadi, waktu yang diperlukan untuk menampilkan semua elemen itulah yang diukur sebagai largest contentful paint.

Semakin sedikit elemen yang tampil pada layar, maka akan semakin sedikit juga waktu yang diperlukan untuk menampilkannya.

Hal ini berhubungan dengan desain web serta pengalaman pengguna atau user experience.

Tapi sebelum membahas lebih jauh, ada baiknya kita membahas mengenai elemen apa saja yang diperhitungkan pada metrik LCP.

Walaupun diawal dikatakan “semua elemen yang tampak” pada layar. Tapi kenyataannya tidak semua elemen akan dihitung waktu loadnya.

Elemen Yang Dihitung Pada LCP

Untuk mengetahui elemen apa saja yang dihitung saat menentukan skor LCP, maka kita harus merujuk pada web.dev ^[2]. Berikut ini elemen-elemen tersebut.

Elemen <img>

Seperti anda ketahui ini adalah elemen untuk menampilkan image.

Elemen <image> Di Dalam Elemen <svg>

Perlu diperhatikan bahwa elemen svg secara keseluruhan tidak masuk ke dalam perhitungan LCP. Hanya elemen image di dalam elemen svg yang akan diperhitungkan.

Poster Image Pada Elemen <video>

Waktu load elemen videonya sendiri tidak masuk dalam perhitungan. Hanya poster imagenya saja yang dihitung.

Elemen Dengan Gambar Latar Yang Dimuat Dengan url()

Jika anda senang melakukan pengaturan pada file CSS, mungkin pernah menemukan pengaturan seperti berikut.

background-image: url("https://domainanda.com/koala-joget-bareng.jpg");

Elemen inilah yang dimaksud, masuk dalam perhitungan LCP.

Block-Level Atau Inline-Level Element Yang Berisi Teks

Bagi anda yang belum memahami perbedaan block-level serta inline-level element, berikut ini contohnya.

<div>Ini adalah contoh elemen tingkat blok atau biasa disebut block-level element <span>Sedangkan ini adalah contoh elemen tingkat baris atau inline-level element.</span>
</div>

Kita tidak bisa membahas lebih detil mengenai ini karena sangat teknis sekali. Tapi anda ingin mempelajarinya anda dapat mengunjungi dokumentasi developer.mozilla.org ^[3] [4].

Yang perlu anda pahami adalah teks akan masuk ke dalam elemen yang akan dihitung untuk menentukan skor largest contentful paint. Baik itu teks dalam block-level element maupun dalam inline-level element.

Nah itulah lima elemen yang diperhitungkan saat menentukan skor LCP. Tapi pertanyaannya, kenapa hanya lima elemen saja?

Hal ini juga sudah dijawab oleh Google. Google menyatakan bahwa pemilihan lima elemen ini tujuannya untuk penyederhanaan.

Dikemudian hari, bisa saja elemen yang diperhitungkan menjadi bertambah ^[2].

Cara Mengetahui Skor Largest Contentful Paint

Field Tools

Field tool maksudnya adalah tool yang dapat langsung mengukur dari “lapangan”. Atau dari sumber aslinya, yaitu dari user website anda sendiri.

Berikut ini rekomendasi Google untuk mengukur LCP :

• PageSpeed Insights
• Search Console (Core Web Vitals report)
• Chrome User Experience Report (membutuhkan akun Google dan Google Cloud Project)

Lab Tools

Pengukuran secara lab ini adalah pengukuran yang disimulasikan. Artinya nilainya bukan dari hasil perhitungan dari user sebenarnya.

Biasanya hasil pengukuran field tool lebih baik dari pengukuran lab.

Berikut adalah tool rekomendasi dari Google :

• Chrome DevTools
• Lighthouse
• WebPageTest.org

Dua tool pertama disediakan oleh Google, dan tool terakhir disediakan oleh pihak ketiga.

Masalah Pada Largest Contentful Paint

Ada beberapa masalah yang timbul ketika melakukan optimasi pada LCP ini. Berikut ini adalah masalah yang sering terjadi.

• Slow server response times
• Render-blocking JavaScript and CSS
• Slow resource load times
• Client-side rendering

Cara Optimasi Largest Contentful Paint

Setelah kita tahu beberapa masalah yang sering muncul, sekarang tentu pertanyaannya bagaimana cara mengoptimasinya?

Sebenarnya untuk melakukan optimasi, harus dengan mengevaluasi langsung website yang bermasalah. Karena tiap website memiliki script dan konfigurasi yang berbeda.

Bahkan jika anda menggunakan WordPress. Cara optimasinya bisa berbeda antara web WordPress yang satu dengan web WordPress yang lain.

Tapi pada kesempatan kali ini saya akan coba memberikan saran secara umum.

Optimasi Pada Image

Jika anda perhatikan pada bagian “elemen yang dihitung pada LCP” di atas, Anda akan menemukan fakta menarik.

Jadi jika anda melakukan optimasi pada image dengan benar, maka 80% dari sumber masalah telah diselesaikan. Itu secara teorinya ya.

Optimasi pada image itu maksudnya adalah sebagai berikut :

1. Meminimalisir ukurannya. Jika hanya diperlukan image dengan lebar 600 pixel, maka anda tidak perlu mengupload image dengan ukuran lebih besar dari ini.
2. Lakukan kompresi. Kurangi besar file image dengan melakukan proses kompresi pada image.
3. Utamakan editing offline. Jika anda perlu melakukan editing pada image, maka lakukanlah sebelum anda menguploadnya. Karena proses editing online biasanya menghasilkan file yang besar.

Optimasi CSS

Gunakan hanya CSS yang diperlukan, lakukan minify pada CSS dan jika diperlukan tunda CSS yang tidak penting.

Optimasi JavaScript

Hapus kode yang tidak digunakan dan lakukan minify serta kompresi pada JavaScript.

Pilih Server Terbaik

Server maksudnya bisa berupa hosting. Ini merupakan cara optimasi yang cukup mahal, tapi memberi pengaruh yang cukup besar.

Saya menyarankan anda untuk menggunakan VPS, Google Cloud atau AWS. Tapi memang memerlukan biaya lebih.

Bagi anda yang ingin menggunakan hosting biasa atau shared hosting maka usahakan cari yang memiliki kriteria sebagai berikut :

• Web servernya Nginx atau Litespeed
• Sudah menggunakan SSD, akan lebih baik jika itu adalah SSD NVMe.
• Lokasi server di Indonesia.
• Memorynya besar.

Simpulan

Largest Contentful Paint akan jadi salah satu faktor SEO, jadi anda harus memberikan perhatian lebih pada hal ini. Lakukanlah optimasi sesegera mungkin karena Google akan menerapkan metrik ini mulai tahun 2021.

Referensi

1. Google.
2. web.dev.
3. Block-level element.
4. Inline-level element.

Demikian artikel mengenai apa itu largest contentful paint, semoga bermanfaat.