Apa Itu Largest Contentful Paint? Cara Optimasi LCP agar Core Web Vital Bagus

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

Untuk mempelajari lebih lengkapnya, simak pada pembahasan berikut ini.

Apa itu Largest Contentful Paint?

Largest Contentful Paint adalah waktu yang dibutuhkan pada sebuah website dalam memberikan konten utama dan juga siap untuk berinteraksi dengan user.

Karena cara kerja metrik ini adalah dengan mengukur pada waktunya, maka satuan yang digunakan tersebut adalah detik. 

Baca Juga: Core Web Vitals, Apa Itu? 

Jadi, hal apa saja yang dapat diukur pada LCP ini adalah pada bagian gambar atau blok konteks terbesar dalam viewport user. Untuk itu, apapun hal yang melampaui layar tidak dapat masuk perhitungan.

Adapun tipe-tipe elemen yang dapat diukur adalah bagian gambar, gambar poster video, gambar latar belakang, dan juga elemen teks tingkat blok seperti tag paragraf.

Apa itu Konten Utama Pada LCP?

Konten Utama pada LCP adalah bagian konten yang terlihat oleh pengguna saat pertama kali membuka website. Jadi, semua konten yang tidak terlihat, tidak dapat diperhitungkan.

LCP ini merupakan salah satu dari tiga metrik utama pada web vitals atau biasa disebut juga core web vitals. Jadi tiga metrik inilah yang memiliki peran yang besar dan menjadi salah satu faktor yang mempengaruhi SEO.

Berapa Nilai LCP yang Bagus ?

Untuk memberikan pengalaman pengguna atau user experience yang baik, maka sebuah website harus memenuhi LCP 2,5 detik atau kurang dari itu. Dan ambang batas yang baik diukur dengan perhitungan tersebut adalah 75% dari seluruh pemuatan halaman, atau kunjungan website.

Elemen yang Dihitung pada LCP

Untuk mengetahui elemen apa saja yang dapat dihitung saat menentukan skor LCP, maka Anda perlu melihat aturan yang tertera pada web.dev.

Berikut elemen-elemen yang dapat dipelajari pada LCP ini :

1. Elemen <img>

Elemen ini berguna untuk menampilkan image. Jadi, img merujuk pada image yang berarti gambar dan oleh karenanya dapat digunakan untuk keperluan menyisipkan gambar. Gambar didalam sebuah dokumen HTML tidak dapat dimasukkan sepenuhnya pada file (.html, misalnya), akan tetapi, bisa bersumber pada file sumber gambar tersebut berada atau disimpan.

2. Elemen <image> di dalam elemen <svg>

Perlu diperhatikan bahwa pada elemen svg ini secara keseluruhan tidak dapat masuk ke dalam perhitungan LCP. Hal ini karena elemen image di dalam elemen svg yang dapat diperhitungkan.

3. Poster Image pada Elemen <video>

Untuk perhitungan pada waktu load elemen pada videonya sendiri tidak dapat masuk dalam perhitungan. Hanya dengan poster imagenya saja yang dapat dihitung.

4. Elemen dengan Gambar Latar yang dimuat dengan url()

Jika Anda senang dapat melakukan pengaturan pada file CSS, mungkin Anda pernah menemukan pengaturan seperti halnya berikut.

background-image: url(“https://domainanda.com/foto-gambar-website-saya.jpg“);

Elemen inilah yang dimaksud pada perhitungan LCP.

5. Block-Level atau Inline-Level Element yang Berisi Teks

Bagi Anda yang belum memahami perbedaan dari block-level dan juga inline-level element, berikut ini contoh yang dapat untuk dipahami.

<div> adalah contoh elemen pada tingkat blok atau biasa disebut dengan block-level element <span>. Sedangkan untuk tag adalah contoh elemen pada tingkat baris atau inline-level elemen.</span> </div>

Jadi Block level element (atau block level tag) merupakan tag-tag HTML yang menjadi bagian terpisah pada alur halaman, dan ditampilkan dalam baris baru.

Contoh dari block level element a tag <p> dan tag <h1>. Kedua tag ini bisa ‘menutup’ tag sebelumnya dan dapat memulai sebuah baris baru (memulai block baru). Jadi pada umumnya tag ini berada pada bagian paling luar dari struktur DOM.

Inline level element (atau inline level tag) merupakan tag-tag HTML yang dapat mengikuti tampilan yang telah ada. Tag ini tidak dapat membuat baris baru. Contoh dari inline level element seperti tag <strong> dan <em>. Kedua tag ini bisa digunakan dalam membuat huruf miring dan huruf tebal pada sebuah teks. Inline level element pada umumnya tidak dapat berdiri sendiri tetapi berada pada dalam block level element.

Jadi yang perlu Anda pahami adalah teks yang dapat masuk ke dalam elemen yang bisa dihitung dalam menentukan skor largest contentful paint. Baik hal tsb untuk teks dalam block-level element maupun dalam inline-level elemen.

Cara Mengetahui Skor Largest Contentful Paint (LCP)

1. Field Tools

Field tool adalah tool yang bisa langsung mengukur dari “lapangan” atau lebih mudahnya dari sumber aslinya, yaitu dari user website Anda sendiri.

Berikut ini sebagai rekomendasi Google dalam mengukur LCP :

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

2. Lab Tools

Pengukuran pada lab ini merupakan pengukuran yang dapat disimulasikan. Artinya, nilainya bukan pada hasil perhitungan dari user sebenarnya. Pada umumnya, hasil pengukuran field tool jauh lebih baik dari pengukuran lab. 

Berikut adalah tool rekomendasi dari Google untuk pengukuran pada Lab Tools ini :

• Chrome DevTools
• Lighthouse
• WebpageTest.org

Dari dua tools pertama di atas merupakan tools yang disediakan oleh Google, dan tool terakhir disediakan oleh pihak ketiga.

Masalah Pada Largest Contentful Paint (LCP)

Terdapat beberapa masalah yang dapat muncul saat melakukan optimasi di bagian LCP ini yang perlu Anda ketahui terlebih dahulu. Berikut ini adalah masalah yang sering terjadi yang bisa Anda pelajari.

1. Slow server response times
2. Render-blocking JavaScript and CSS
3. Slow resource load times
4. Client-side rendering

Cara Optimasi Largest Contentful Paint (LCP)

Setelah Anda mempelajari beberapa permasalahan yang sering muncul, sekarang mari kita mempelajari cara untuk mengoptimasi pada permasalahan largest contentful paint atau LCP ini. 

Sebenarnya untuk melakukan optimasi, Anda perlu mengevaluasi langsung website yang bermasalah tersebut. Karena pada setiap website mempunyai script dan konfigurasi yang berbeda-beda.

Bahkan jika Anda menggunakan WordPress. Cara optimasinya pun berbeda antara web WordPress yang satu dengan web WordPress yang lain.

Tapi pada kesempatan kali ini mari kita mempelajari cara optimasi largest contentful paint atau LCP ini secara umumnya.

1. Optimasi Pada Image

Jika Anda memperhatikan pada bagian “elemen yang dihitung pada LCP” di atas, Anda dapat menemukan fakta menarik yaitu :

Empat dari lima elemen yang dihitung pada penentuan nilai LCP adalah gambar atau image.

Baca Juga: Google Image Indonesia, Penelusuran Gambar Terbaik 

Jadi jika Anda dapat melakukan optimasi pada image dengan benar, maka kurang lebih sekitar 80% dari sumber masalah LCP ini sudah dapat diselesaikan secara teorinya.

Jadi optimasi pada image yang dimaksud adalah sebagai berikut :

• Meminimalisir ukurannya.
  Jika yang Anda butuhkan image dengan lebar 600 pixel, maka Anda tidak perlu untuk mengupload image dengan ukuran lebih besar dari hal tsb
• Lakukan kompresi.
  Anda dapat mengurangi besarnya file image dengan melakukan proses kompresi pada image.
• Utamakan editing offline.
  Jika Anda perlu melakukan editing pada image, maka Anda dapat melakukan sebelum Anda menguploadnya. Karena proses editing online ini biasanya menghasilkan file yang besar.

2. Optimasi CSS

Anda dapat menggunakan CSS yang diperlukan. Selain itu hal yang bisa Anda lakukan adalah dengan minify pada CSS. Jika diperlukan, tunda CSS yang tidak penting.

3. Optimasi JavaScript

Anda perlu menghapus kode yang tidak digunakan dan lakukan minify serta kompresi pada JavaScript website Anda.

4. Pilih Server Terbaik

Server maksudnya bisa berupa hosting. Hal ini merupakan cara optimasi yang cukup mahal, tapi dapat memberikan pengaruh yang cukup besar.Anda dapat menggunakan VPS, Google Cloud atau AWS. Walaupun memang memerlukan biaya lebih tapi server dengan performa tangguh dapat membantu Anda dalam menyelesaikan hal ini.

Tidak hanya itu saja, jika Anda ingin menggunakan hosting biasa atau shared hosting maka yang perlu Anda lakukan adalah mencari penyedia layanan hosting yang memiliki kriteria sebagai berikut : 

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

Kesimpulan

Largest Contentful Paint dapat menjadi salah satu faktor SEO, jadi Anda perlu memberikan perhatian lebih pada hal ini. Lakukanlah optimasi sesegera mungkin hal ini karena Google dapat menerapkan metrik ini di tahun 2021.

Semoga bermanfaat

Anda juga bisa mendapatkan informasi seputar teknologi, bisnis dsb pada bagian blog IDwebhost yang dapat di akses secara gratis, 

Selain itu, Anda juga bisa berkonsultasi dengan IDwebhost untuk mendapat informasi dan layanan web hosting dan domain jika Anda memerlukan layanan hosting, domain, dan lain sebagainya yang sesuai dengan kebutuhan bisnis Anda.

Jangan lewatkan berbagai promo menarik IDwebhost dengan klik gambar di bawah ini!

Webhosting ya IDwebhost Aja, Salam!