Type to search

SEO

Apa itu Largest Contentful Paint (LCP) dan Cara Optimasi nya

Optimasi Largest Contentful Paint/ LCP

Largest Contentful Paint adalah istilah yang kerap muncul saat kita mengecek kecepatan website. LCP ini sendiri adalah metrik pengalaman pengguna Google yang disebut- sebut sebagai salah satu penentu faktor peringkat di 2021 nanti.

Itulah mengapa LCP menjadi salah satu pembahasan menarik yang akan diulas Panda 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 diketahui dari Largest Contentful Paint?

Tentu ada alasan mengapa LCP dipilih 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) yang Digunakan 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 perlu dicatat juga, tidak semua elemen ini digunakan. Misalnya saja, elemen SVG dan video saat ini tidak digunakan 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 diutamakan, baru selanjutnya desktop.

Menunda Load Elemen Besar Mungkin Tak Berpengaruh

Mungkin saja Anda berpikir bahwa elemen besar itu terlalu penting untuk ukurannya dikecilkan atau bahkan dihilangkan. Sehingga memilih untuk menunda load mereka dengan plugin atau tool.

Sayangnya, hal ini disebut 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 ditampilkan dalam ukuran yang lebih kecil.

Ukuran asli ini disebut oleh Google 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 disebut 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 mengatur yang disebut dengan 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 dibutuhkan, 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 ditampilkan di luar layar dan kemudian masuk ke halaman setelah proses rendering, tidak dihitung sebagai bagian dari skor LCP.

Kebalikannya, elemen yang tampil dari awal viewport kemudian terdorong keluar dari layan 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 disebut 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 diterapkan 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
Optimasi Largest Contentful Paint

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 diperlukan untuk pengguna. 

Untuk problem yang berkaitan dengan CSS yang tidak penting untuk menyajikan apa yang dilihat pengguna, 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 diperlukan 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 <image> di dalam elemen <svg>
  • <video> elemen (Gambar poster video digunakan untuk mengukur LCP)
  • Elemen dengan gambar latar belakang dimuat melalui fungsi url () (sebagai lawan dari CSS gradient)
  • Elemen tingkat blok yang mengandung simpul teks atau elemen teks inline lainnya

Untuk mengurangi loading resource ini, berikut adalah beberapa cara yang bisa digunakan :

  • 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 diulas Panda di atas tadi. Yaitu terdiri dari Lab Tools dan Field Tools.

Field Tools

Field tool rekomendasi Google untuk mengukur LCP adalah :

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 disajikan Panda :

Apa itu Largest Contentful Paint?

Artikel Menarik Lainnya :   Sejarah Perubahan Algoritma Google dari Waktu ke Waktu

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 digunakan. Selain itu, metrik ini juga disebut akan relatif mudah dioptimalkan.

Bagaimana cara menghitung skor LCP?

Ada dua jenis tool yang direkomendasikan Google untuk menghitung nilai LCP. Yang pertama disebut 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?

Artikel Menarik Lainnya :   9 Point Penting untuk Strategi SEO Jangka Panjang yang Efektif

Setidaknya ada tiga area utama yang menjadi objek optimasi LCP. Anda dapat membacanya lebih lengkap di bagian Optimasi LCP di artikel ini.

Tags:
Mas Panda

Berkecimpung di niche Blogging & Digital Marketing lebih dari 5 tahun. Pernah menjadi salah satu bagian dari Digital Marketing Agency terbesar di Jawa Tengah. Sedang dan terus belajar dalam Digital Marketing.

  • 1
0 0 vote
Article Rating
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments
11
0
Would love your thoughts, please comment.x
()
x