Largest Contentful Paint: Cara tingkatkan skor

Jumlah waktu yang dibutuhkan seseorang ketika lagi buka website kamu menjadi komponen yang penting dan sanga berpengaruh dengan pengalaman pengguna website kamu. Apabila audiens atau pengguna website kamu mengalami masalah dengan pemuatan website yang lambat ini bisa menjadi masalah dan sangat mempengaruhi terhadap konversi.

Untuk bisa mengukur dan melacak serta mengoptimalkan pengalaman pengguna website kamu, Google memperkenalkan metrik yang bisa kamu deteksi masalah – masalah tersebut yang dikenal dengan “Largest Contentful Paint” (LCP) yang menjadi bagian dari Core Web Vitals.

Penjelasan Tentang Largest Contentful Paint

Perlu kamu ketahui untuk mengukur dan cara melacak LCP setelah browser pengguna meminta URL website kamu dari server, penting untuk kamu perhatikan bahwa Largest Contentful Paint adalah konsep waktu pemuatan halaman website. Waktu loading atau waktu muat di ukur oleh Google, hanya untuk bisa melihat seberapa cepat sih server kamu mulai mengirimkan informasi ke browser yang dikenal dengan istilah “time to first byte”

Namun, pengguna website kamu sebenarnya ngga pedulu bagaimana prosesnya dan kapan server website kamu mulai mengirimkan data pertama secara detail. Mereka hanya lebih peduli berapa lama waktu muat mereka atau berapa lama mereka harus nunggin website kamu sampai bisa terbuka secara keseluruhan.

Berapa poin Largest Contentful yang baik?

Menurut Google, untuk memberikan pengalaman pengguna terbaik, website kamu harus punya poin LCP 2,5 detik atau kurang.

Seperti metrik yang ada di Core Web Vitals, LCP dinilasi berdasarkan spektruk dari hasil yang baik hingga hasil yang buruk.

Baik: LCP 2,5 detik atau kurang dianggap baik.
Perlu Peningkatan: Skor antara 2,5 detik dan 4,0 detik perlu ditingkatkan.
Buruk: LCP yang lebih lama dari 4,0 detik dianggap buruk dan akibatnya, pengguna website kamu mendapatkan pengalaman yang buruk saat mengunjungi website kamu.

Bagaimana Cara Kerja LCP

Secara sederhana, kalau kita lihat LCP bekerja dengan cara mencatat seberapa lama waktu yang diperlukan elemen pada halaman untuk dimuat setelah itu dirender setelah pengguna meminta halaman dari browser mereka. Google melihat ukuran berbagai elemen konten yang akan di render dalam viewport perangkat pengguna, dan mencari tahu mana yang terbesera, dan mulai menghitung berapa lama waktu hingga elemen tersebut dirender.

Google, melacak elemen-eleen berikut saat menghitung First Contenful Paint:

elemen atau : Seperti yang mungkin sudah Anda duga, ini adalah tag untuk gambar. Ini termasuk tag yang muncul di .
elemen

1. Elemen <img> atau <image>: Seperti yang mungkin sudah kamu duga, ini adalah tag untuk gambar. Ini termasuk tag <img> yang muncul di <svg>.

2. Elemen <video>: Untuk video, LCP melihat apa yang dikenal sebagai "gambar poster". Ini adalah gambar yang ditentukan menggunakan atribut kontrol poster="" di dalam tag <video>.

3. Gambar latar belakang: Elemen yang menggunakan fungsi url() CSS untuk memuat gambar sebagai latar belakang. Gambar yang dimuat menggunakan fungsi CSS gradien tidak akan dilacak untuk tujuan LCP.

4. Elemen teks: Untuk mengukur konten teks, LCP mencari elemen tingkat blok yang menentukan teks, seperti paragraf, header, dan daftar.

Pergeseran tata letak dan LCP

Banyak website yang dimuat secara bertahap, mengakibatkan pergeseran tata letak dan elemen baru muncul di layar pengguna. Dalam hal ini, beberapa hal terjadi dalam penghitungan Cat Konten Terbesar.

Browser mengidentifikasi dan merekam elemen terbesar di layar setelah frame pertama dirender. Dengan posting blog, misalnya, ini kemungkinan akan menjadi teks header dengan judul artikel.
Saat bingkai kedua telah dirender dan elemen baru muncul, browser membuat catatan kedua yang mengidentifikasi elemen terbesar baru (jika ada). Beginilah cara browser menangani pemuatan gambar header di bingkai kedua untuk posting blog.
Saat elemen baru dimuat dan dirender, browser akan mencatat setiap yang muncul di area pandang yang lebih besar dari elemen terbesar sebelumnya. Elemen yang lebih besar ini kemudian akan menjadi elemen yang dilacak untuk Cat Konten Terbesar.
Saat tata letak bergeser dan elemen didorong keluar dari viewport, itu tidak mengubah apa yang dicatat sebagai elemen terbesar. Jadi, jika entri blog memuat blok teks berukuran besar yang didorong keluar halaman oleh elemen yang lebih kecil, seperti blok daftar isi, teks awal tersebut tetap menjadi konten terbesar meskipun sekarang berada di luar viewport.
Browser berhenti melacak LCP setelah pengguna berinteraksi dengan halaman karena interaksi pengguna sering kali mengubah apa yang terlihat di viewport (dengan menggulir halaman ke bawah, misalnya).

Berikut dibawa ini adalah contoh ketika kita lihat beberapa frame pertama halaman memberikan berbagai elemen:

Saat halaman ini dimuat, halaman ini akan merender beberapa elemen teks dengan berbagai ukuran dan beberapa gambar.

Jadi, inilah cara kerja LCP untuk halaman ini:

Pada frame pertama, teks kecil adalah elemen pertama yang dimuat dan dirender (inilah yang dikenal sebagai First Contentful Paint).
Pada frame kedua, elemen besar yang berisi beberapa teks header dimuat bersama dengan beberapa elemen teks yang lebih kecil di bawahnya. Elemen teks dengan header ini menjadi elemen terbesar pada halaman.
Lebih banyak elemen teks dimuat. Namun, semuanya lebih kecil dari elemen header sehingga tidak dihitung dalam LCP.
Gambar besar dimuat di bagian paling bawah halaman, namun hanya sebagian kecil saja yang terlihat di viewport. Karena bagian gambar yang terlihat ini lebih kecil daripada elemen teks header, gambar ini tidak dihitung untuk Largest Contentful Paint untuk halaman tersebut.
Gambar dirender pada halaman. Gambar ini lebih besar daripada blok teks header, sehingga menjadi elemen terbesar pada halaman.

Waktu yang dibutuhkan halaman untuk memuat gambar besar, sejak pengguna meminta URL dari server web, adalah skor LCP. Jadi, jika gambar dimuat setelah 1 detik, LCP akan menjadi “baik” sementara jika gambar dirender dalam 3 detik, LCP akan menjadi “buruk”.

Mengapa Largest Contentful Paint penting

Largest Contentful Paint adalah cara yang terukur dan akurat untuk mengukur berapa lama waktu yang dibutuhkan sebuah halaman untuk dapat berguna saat dimuat bagi pengguna di dunia nyata. Hal ini menjadikannya parameter mendasar untuk mengevaluasi dan menilai pengalaman pengguna situs web. Ditambah lagi, ini adalah metrik yang mudah untuk dilacak dan dioptimalkan, yang selalu membantu.

Di luar pengalaman pengguna, dan pada tingkat yang sangat praktis, Largest Contentful Paint penting karena Google menggunakan skor LCP sebagai bagian dari metrik Core Web Vitals saat menentukan peringkat webiste dalam hasil pencarian.

Memiliki LCP yang buruk, tidak hanya berarti bahwa pengguna menunggu lebih lama dari yang seharusnya untuk memuat konten. Hal ini juga dapat berdampak negatif pada SEO, bisa website kamu tidak muncul di bagian atas hasil pencarian.

Tools untuk Mengukur dan Melacak Cat Konten Terbesar

Seperti Pergeseran Tata Letak Kumulatif (Vital Web Inti lainnya), LCP dapat diukur dengan alat lab dan lapangan.

Alat lapangan untuk Cat Konten Terbesar:

Laporan Pengalaman Pengguna Chrome
Wawasan PageSpeed
Google Search Console

Alat untuk menganalisis Cat Konten Terbesar:

Chrome Dev Tools
Lighthouse
GTMetrix

Cara Meningkatkan Skor LCP Website

Misalnya website kamu ngga punya skor Largest Contentful Paint yang kamu mau, jangan takut! Langkah-langkah di bawah ini bisa bantuin kamu mengoptimalkan LCP dan meningkatkan performa halaman website kamu.

1. Optimalkan gambar

Pengoptimalan gambar adalah salah satu hal terbaik yang bisa kamu terapkan untuk skor LCP website kamu. Meskipun gambar sangat bagus untuk membuat konten berkualitas tinggi dan menarik, gambar juga menjadi penyebab utama waktu tunggu pengguna yang lama saat halaman dimuat.

Hal terbaik yang bisa kamu lakukan adalah mengurangi ukuran file gambar, mengurangi dimensinya melalui HTML tidak mengubah berapa lama waktu yang dibutuhkan gambar untuk dimuat dan dirender. Kompres gambar untuk mengurangi waktu yang dibutuhkan untuk mengunduhnya dari server.

Kamu juga harus pakai format gambar modern seperti PNG atau SVG (jika kamu punya keahlian teknis untuk mengimplementasikan PNG dengan benar…).

Perkecil, tunda, dan minimalkan

JavaScript dan CSS juga dapat memblokir konten agar tidak dapat dimuat, sehingga menyebabkan skor LCP hasilnya buruk. Jika hal ini terjadi, ada beberapa langkah yang harus kamu lakukan untuk mengoptimalkan Largest Contentful Paint:

Minifikasi JavaScript dan CSS halaman website. Minifikasi mengacu pada proses menghilangkan spasi dan karakter yang tidak perlu dari kode. Spasi, karakter, dan komentar ini berguna bagi manusia yang membaca kode, tetapi tidak diperlukan oleh browser.
Tunda skrip dan berkas yang tidak penting hingga setelah halaman memuat konten yang paling penting. Anda dapat meletakkan berkas-berkas ini di bawah lipatan dalam kode halaman atau menggunakan atribut tunda agar berkas-berkas tersebut dimuat setelah konten halaman.
Jika semuanya gagal, kurangi jumlah JavaScript dan CSS yang memblokir rendering yang di website kamu. Kamu juga harus secara teratur mencari skrip yang tidak perlu dan kode yang tidak terpakai di halaman website kamu. Jika kamu punya skrip yang memblokir LCP, pertimbangkan secara serius apakah skrip tersebut benar-benar diperlukan untuk fungsi website kamu.

Tingkatkan Kinerja Server Website

Performa server yang lambat bisa bikin skor LCP yang buruk. Jika server atau hosting website kamu membutuhkan waktu lama untuk merespons permintaan, maka konten kamu akan membutuhkan waktu lama untuk dimuat.

Beberapa alasan umum untuk waktu respons server yang buruk meliputi:

Serangan penolakan layanan terdistribusi, juga dikenal sebagai DDoS. Ini terjadi ketika seseorang dengan sengaja membanjiri layanan atau jaringan dengan trafik yang sangat besar.
Ada kesalahan konfigurasi atau menjalankan software dengan versi lama atau yang ketinggalan zaman.
Platform CMS kamu sudah ketinggalan zaman atau masih pakai versi lama atau sehingga bisa berkinerja buruk.
Kamu memilih menggunakan layanan hosting murah yang menggunakan berbagai hosting dengan website lain yang mengganggu website kamu.

Untuk menghindari masalah ini, selalu pastikan server dan CMS website kamu sudah paling terbaru dan ringan. Kamu juga harus hindari pakai layanan hosting termurah yang bisa mudah kamu dapetin. Meskipun kamua mungkin menghemat sejumlah uang dalam jangka pendek, masalah kinerja seperti skor LCP yang buruk tidak sebanding dengan penghematannya.