Largest Contentful Paint adalah istilah yang kerap muncul saat kita mengecek kecepatan website. LCP ini sendiri adalah metrik pengalaman pengguna Google yang mulai menjadi salah satu penentu faktor peringkat di tahun 2021.
Itulah mengapa LCP menjadi salah satu pembahasan menarik yang akan Panda ulas kali ini.
Apa itu Largest Contentful Paint?
Definisi dari Largest Contentful Paint atau LCP adalah ukuran berapa lama sebuah situs dalam mengunduh konten utama dan siap untuk berinteraksi. Dalam hal ini, apa yang diukur adalah gambar atau blok konteks terbesar dalam viewport pengguna. Apapun yang melampaui layar tidak akan masuk hitungan.
Tipe elemen yang diukur adalah gambar, gambar poster video, gambar latar belakang, dan elemen teks tingkat blok seperti tag paragraf.
Apa saja yang perlu kita ketahui dari Largest Contentful Paint?
Tentu ada alasan mengapa LCP terpilih sebagai metrik kunci untuk skor web vitals. Salah satunya, LCP bisa secara akurat mengukur seberapa cepat halaman website digunakan. Selain itu, metrik ini juga disebut akan relatif mudah dioptimalkan.
Selain hal ini, ada beberapa hal yang webmaster perlu ketahui terkait LCP ini :
Elemen Blok Tingkat (Block Level Element) untuk Menghitung Skor LCP
Elemen tingkat blok yang digunakan untuk mengukur skor LCP adalah <main> dan <section>, serta elemen heading, div, form. Pada dasarnya, elemen HTML tingkat blok apapun yang berisi elemen teks bisa menjadi tolak ukur, asalkan merupakan elemen besar dalam website.
Tapi yang menjadi catatan, kita tidak menggunakan semua elemen ini. Misalnya saja, elemen SVG dan video saat ini tidak menjadi bagian dalam menghitung LCP.
LCP adalah Metrik yang Mudah Dipahami
LCP disebut sebagai metrik yang mudah dipahami. Yang webmaster harus lakukan adalah melihat halaman website dan menentukan apa blok teks atau gambar terbesar itu, lalu mengoptimalkannya dengan membuatnya lebih kecil.
Bisa juga dengan menghapus apapun yang bisa mencegah atau memperlambat proses pengunduhan konten utama dengan cepat.
Karena Google kini memprioritaskan pengindeksan mobile, maka optimasi untuk viewport mobile harus kita utamakan, baru selanjutnya desktop.
Menunda Load Elemen Besar Mungkin Tak Berpengaruh
Mungkin saja Anda berpikir bahwa elemen besar itu terlalu penting untuk ukurannya kita kecilkan atau bahkan kita hilangkan. Sehingga memilih untuk menunda load mereka dengan plugin atau tool.
Sayangnya, hal ini tidak berdampak banyak. Misalnya saja, gambar berfitur besar mungkin membutuhkan waktu lebih lama untuk diunduh daripada elemen level blok teks terbesar.
Elemen Gambar Sangat Berpenaruh dalam LCP
Publisher biasanya mengunggah gambar dalam ukuran asli lalu menggunakan HTML atau CSS untuk mengubah ukuran gambar agar bisa tampil dalam ukuran yang lebih kecil.
Google menyebut ukuran asli ini sebagai ukuran gambar “intrinsik”.
Misalnya saja, saat publisher mengunggah gambar berukuran 2048 x 1152. Maka ukuran ini disebut dengan ukuran intrinsik. Saat publisher mengubah ukuran gambar tersebut menjadi 640×360 maka ukuran yang tampil ini merupakan ukuran yang terlihat.
Untuk keperluan menghitung ukuran gambar, Google menggunakan ukuran yang lebih kecil antara gambar intrinsik dan ukuran yang terlihat. Jadi, trik ini bisa cukup membantu sebenarnya.
Namun untuk best practice nya, disarankan untuk mengupload gambar yang sama seperti gambar dalam ukuran yang terlihat. Ini akan membuat gambar di-unduh dengan lebih cepat dan skor LCP menjadi lebih optimal.
LCP dalam Menangani Gambar yang Dilayani dari Domain Lain
Gambar yang disajikan dari domain lain, seperti halnya dari CDN, umumnya tidak dihitung dalam perhitungan largest contentful paint. Namun jika publisher ingin sumber daya itu menjadi bagian dari perhitungan, bisa mengaturnya di fitur Timing-Allow-Origin.
Untuk memastikannya, karena ada kemungkinan setiap layanan CDN berbeda, Anda dapat membaca resource informasi dari CDN yang Anda gunakan. Jika masih belum menemukan informasi yang Anda butuhkan, cobalah untuk berkonsultasi langsung pada layanan CDN Anda.
Cara Menghitung Skor LCP
Semua elemen yang ada di viewport (layar pengguna) digunakan untuk menghitung LCP. Artinya, gambar yang tampil di luar layar dan kemudian masuk ke halaman setelah proses rendering, tidak terhitung sebagai bagian dari skor LCP.
Kebalikannya, elemen yang tampil dari awal viewport kemudian terdorong keluar dari layar bisa dihitung sebagai bagian dari perhitungan LCP.
Dan pertanyaan pentingnya adalah, bagaimana cara mendapatkan skor dalam LCP?
Dalam LCP ini sendiri terdapat dua jenis alat penilaian. Yang pertama adalah Field Tools, dan yang kedua adalah Lab Tools.
Field tools adalah pengukuran aktual sebuah website. Sedangkan Lab Tool memberikan skor virtual berdasarkan penjelajahan yang disimulasikan menggunakan algoritma dengan memperkirakan kondisi internet yang mungkin ditemui pengguna pada ponsel.
Cara Optimasi Masalah Largest Contentful Paint
Ini mungkin bagian paling penting yang perlu kita terapkan dalam optimasi website. Setidaknya ada tiga area utama (ditambah satu untuk Javascript Frameworks), yang perlu dioptimasi :
- Server lambat
- JavaScript dan CSS pemblokiran render
- Waktu loading resource/ sumber daya yang lambat
Server Lambat
Server yang lambat akan membuat waktu render apapun di layar menjadi lebih lama. Sebaliknya, waktu server yang lebih cepat bisa meningkatkan setiap metrik pemuatan satu halaman, termasuk LCP.
Sebelum melakukan perbaikan, cobalah untuk memperbaiki bagaimana dan dimana server Anda menangani konten. Anda bisa menggunakan Time to First Byte (TTFB) untuk mengukur waktu respon server.
Untuk meningkatkan TTFB, berikut ini adalah sejumlah cara berbeda yang bisa Anda coba :
- Optimalkan server Anda dengan menganalisa dan meningkatkan efisiensi kode dari sisi server
- Merutekan pengguna ke titik CDN terdekat
- Kelola aset cache
- Sajikan halaman HTML dengan halaman cache lebih dulu
- Buat koneksi pihak ketiga lebih awal
Buat Pemblokiran JavaScript dan CSS
Sebelum browser bisa merender konten apa pun, ia perlu mengurai kode HTML ke dalam DOM tree. Pengurai HTML ini akan berhenti saat bertemu dengan stylesheet eksternal (<link rel = “stylesheet”>) atau tag JavaScript yang sinkron (<script src = “main.js”>).
Script dan stylesheet keduanya adalah sumber pemblokiran render yang menunda FCP dan berakibat LCP. Maka dari itu, menunda semua javascript dan CSS tidak penting bisa membantu pemuatan konten utama halaman website.
Berikut ini adalah beberapa cara yang bisa Anda lakukan untuk membuat pemblokiran javascript dan CSS :
- Minify CSS
- Tunda load CSS tidak penting (Defer non-critical CSS)
- Sisipkan Inline critical CSS untuk konten bagian atas dengan memasukkannya langsung di bagian <head>
- Kurangi waktu pencekalan javascript dengan cara unduh dan sajikan jumlah minimal JavaScript yang pengguna perlukan.
Untuk problem yang berkaitan dengan CSS yang tidak penting untuk menyajikan apa yang pengguna lihat, tips dari Google adalah :
“Hapus semua CSS yang tidak digunakan seluruhnya atau pindahkan ke stylesheet lain jika digunakan pada halaman terpisah situs Anda.
Untuk CSS apa pun yang tidak perlu untuk rendering awal, gunakan loadCSS untuk memuat file secara tidak sinkron, yang memanfaatkan rel = “preload” dan “onload”.
<link rel=”preload” href=”stylesheet.css” as=”style” onload=”this.rel=’stylesheet’”>”
Waktu Loading Resource yang Lambat
Meskipun peningkatan waktu pemblokiran CSS atau Javascript bisa secara langsung berkontribusi pada skor LCP yang buruk, waktu yang diperlukan untuk memuat banyak resource juga mempengaruhi LCP.
Jenis resource ini antara lain :
- <img> element
- Elemen/ tag <image> di dalam elemen <svg>
- Tag <video> (Gambar poster video digunakan untuk mengukur LCP)
- Elemen dengan gambar latar belakang dimuat melalui fungsi url () (sebagai lawan dari CSS gradient)
- Juga elemen tingkat blok yang mengandung simpul teks atau elemen teks inline lainnya
Untuk mengurangi loading resource ini, berikut adalah beberapa cara yang bisa kita praktekkan :
- Optimasi dan kompresi gambar
- Pre-loading konten tertentu
- Kompres file teks (Misalnya dengan Gzip)
Tool untuk Mengukur Skor LCP
Tool untuk mengukur largest contentful paint terdiri dari dua jenis, seperti yang Panda ulas di atas tadi. Yaitu terdiri dari Lab Tools dan Field Tools.
Field Tools
Field tool rekomendasi Google untuk mengukur LCP adalah :
- 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. Berikut adalah tool rekomendasi dari Google :
Dua tool pertama disediakan oleh Google, dan tool terakhir disediakan oleh pihak ketiga.
Kesimpulan
Pembahasan Largest Contentful Paint mungkin terdengar sangat teknis untuk sebagian orang. Maka dari itu, memang perlu pemahaman dan tindakan teknis untuk melakukan optimasi LCP ini.
Berikut adalah resume dari artikel LCP yang Panda sajikan :
Apa itu Largest Contentful Paint?
Largest Contentful Paint atau LCP adalah ukuran berapa lama sebuah situs dalam mengunduh konten utama dan siap untuk berinteraksi.
Apakah Largest Contentful Paint atau LCP ini penting?
Di 2021, Google akan mulai menggunakan LCP sebagai salah satu penentu faktor peringkat. LCP akan menjadi sebuah metrik penting karena bisa secara akurat mengukur seberapa cepat halaman website yang pengguna akses. Selain itu, Google menganggap kalau praktek optimasi metrik ini relatif mudah.
Bagaimana cara menghitung skor LCP?
Ada dua jenis tool yang direkomendasikan Google untuk menghitung nilai LCP. Yang pertama adalah Field Tools dan yang kedua adalah Lab Tools. Rekomendasi tool dapat kamu temukan di bagian “Tool untuk Mengukur Skor LCP” di artikel ini.
Bagaimana cara optimasi Largest Contentful Paint atau LCP?
Setidaknya ada tiga area utama yang menjadi objek optimasi LCP. Anda dapat membacanya lebih lengkap di bagian Optimasi LCP di artikel ini.
