Cara Optimasi dan Mengatasi Largest Contentful Paint (LCP) yang lambat di PageSpeed Insights

Menurut web.dev, Largest Contentful Paint (LCP) adalah salah satu dari metrik Core Web Vitals yang menunjukkan seberapa cepat konten utama atau bagian critical dari suatu halaman web dimuat. Secara khusus, LCP mengukur waktu dari saat browser mulai memuat elemen terbesar yang terdapat di area above the fold suatu halaman website. Ini meliputi teks, kolom, gambar, hingga video.

Agar lebih mudah memahaminya, mari kita lihat dari ilustrasi di bawah ini:

Dari ilustrasi gambar di atas bisa dililhat bahwa keseluruhan konten utama baru selesai dirender oleh browser di frame ke-5. Waktu yang dibutuhkan untuk sampai ke frame ke-5 ini yang menjadi angka Largest Contentful Paint (LCP) website kita.

Berapa angka maksimal LCP yang aman di PageSpeed Insights?

Largest Contentful Paint diukur dalam satuan detik. Untuk memberikan pengalaman pengguna yang baik, pemilik website harus berusaha untuk memiliki LCP maksimal 2,5 detik. Di atas itu, baik Lighthouse maupun PageSpeed Insights akan memberikan peringatan.

Target yang harus dikejar untuk memastikan pengalaman pengguna yang positif? Di bawah 1 detik untuk desktop dan di bawah 2 detik di pengukuran mobile.

Elemen apa saja termasuk dalam pengukuran LCP?

Largest Contentful Paint menilai elemen-elemen ini:

• Elemen gambar yang terdapat dalam <img> atau <image> tag, juga <svg> tag
• Poster image dari elemen video yang terdapat dalam <video> tag
• Elemen yang memiliki background image yang dimuat melalui CSS background-image: url()
• Elemen di tingkatan blok, seperti <h1>, <h2>, <div>, <section>, <ul>, <ol>, <table>, dsb.

yang terdapat di area above the fold dari suatu website, dan semua CSS dan JavaScript yang memproduksi tampilannya.

Bagaimana browser memproses LCP?

Seperti yang tampak dalam ilustrasi di atas, proses browser merender Largest Contentful Paint secara umum terbagi menjadi 2 bagian:

• HTML Document beserta CSS yang memproduksi tampilannya, dan
• LCP Resource (elemen-elemen yang dinilai oleh LCP serta JavaScript yang diperlukan untuk memproduksi tampilannya)

Secara detail, proses browser merender Largest Contentful Paint terdiri dari 4 tahapan. Mari kita rinci satu-per-satu:

• TTFB (Time to First Byte)
  Time to First Byte, atau yang sering disingkat dengan TTFB, adalah waktu yang dibutuhkan oleh server dari suatu website untuk mengirimkan byte pertama dari responsnya setelah menerima permintaan dari browser pengguna. Beberapa faktor yang dapat mempengaruhi TTFB antara lain:
  • Lokasi server
  • Kecepatan koneksi internet user
  • Efisiensi kode dari sisi server
  • Efisiensi kode dari sisi website
  • Kecepatan server hosting
  • DNS Lookup, SSL Connection, dan TLS Negotiation
• Resource Load Delay
  Resource Load Delay adalah jeda antara TTFB dan saat browser mulai memproses LCP resources. Semakin panjang, semakin buruk. CSS untuk membentuk tampilan above the fold dan aset yang kita preload sudah mulai diproses di tahap ini.
• Resource Load Time
  Resource Load Time adalah waktu yang dibutuhkan untuk memuat LCP resources itu sendiri, termasuk gambar, video, font, CSS, dan JavaScript. Sama seperti Resource Load Delay, semaking lama proses yang dibutuhkan oleh Rescource Load Time, semakin buruk nilai Largest Contentful Paint dan kecepatan loading website secara keseluruhan.
• Element Render Delay
  Element Render Delay adalah jeda waktu yang dibutuhkan untuk memproses (me-render) elemen-elemen LCP yang sudah diunduh oleh browser. Jeda ini dapat terjadi karena berbagai faktor seperti:
  • Jumlah dan ukuran masing-masing aset yang diperlukan (CSS, JS, font, gambar, video, dsb)
  • Penggunaan JavaScript yang berlebihan
  • Kompleksitas CSS
  • Situasi server hosting (kecepatan, bandwidth, traffic, dsb)

Bagaimana cara mengoptimasi dan memperbaiki angka LCP di Lighthouse dan PageSpeed Insights?

Setelah mengetahui elemen yang diukur dan tahapan browser dalam memproses LCP, mari kita rinci satu-per-satu cara untuk mengoptimasinya.

• Cara Optimasi dan Mempercepat TTFB (Time to First Byte)
  Time to First Byte ini bisa kita percepat dan tingkatkan angkanya dengan:
  • Memilih lokasi server terdekat dengan target audiens website
  • Memilih hosting yang cepat
  • Menggunakan Caching System, bisa server side caching atau sekedar HTML page cache
  • Menggunakan CDN untuk aset-aset yang bersifat statis seperti gambar dan video
  • Percepat koneksi CDN yang digunakan menggunakan preconnect dan/atau dns-prefetch (khusus aset yang digunakan di above the fold area)
  • Percepat koneksi SSL dengan HSTS Preload
  • Atur cache-policy untuk aset-aset yang bersifat statis seperti gambar, CSS, dan JavaScript agar browser tidak perlu mengunduh ulang saat pengunjung membuka halaman yang memiliki aset-aset yang sama
  • Buat Inline Critical CSS yang diperlukan untuk styling layout area above the fold
  • Preload aset-aset yang bersifat critical (yang dibutuhkan di area above the fold) seperti gambar dan font
  • Hapus aset-aset yang tidak digunakan di halaman tersebut
  • Tunda aset-aset yang tidak digunakan di area above the fold tapi memang digunakan di halaman tersebut dengan metode async atau delay on user interaction, tujuannya adalah mengurangi jumlah total aset yang harus diproses oleh browser pada saat initial rendering process
  • Bila ada, hapus JavaScript related content seperti slider dan carousel dari area above the fold, atau pindahkan ke area below the fold
• Cara Mempercepat Resource Load Delay
  Untuk mengurangi jeda antara TTFB dan saat browser mulai memproses LCP resources, yang perlu kita lakukan adalah:
  • Sederhanakan struktur HTML area above the fold, dan sebisa mungkin, kurangi tingkat kedalaman dom-size-nya
  • Kurangi jumlah aset yang perlu dimuat di area above the fold, termasuk CSS, JS, font, dan gambar
  • Perkecil ukuran aset-aset yang perlu dimuat di area above the fold, terutama CSS, JS, dan gambar
  • Khusus untuk gambar, gunakan dimensi ukuran gambar yang sesuai dengan yang diperlukan di dalam halaman website
  • Tunda proses pemuatan gambar-gambar yang tidak diperlukan di area above the fold dengan metode lazy-load
  • Sederhanakan CSS dan JavaScript yang digunakan di area above the fold
  • Minimalisir render blocking resources dengan metode preload atau delay (preload bila diperlukan di area above the fold, delay bila tidak diperlukan di area above the fold)
  • Buat Inline Critical CSS yang diperlukan untuk styling layout area above the fold
• Cara Mempercepat Resource Load Time
  Hampir sama dengan cara mempercepat Resource Load Delay, cara mempercepat Resource Load Time adalah:
  • Sederhanakan struktur HTML website secara keseluruhan, terutama area above the fold
  • Sederhanakan CSS dan JavaScript yang digunakan di area above the fold
  • Perkecil ukuran aset-aset yang perlu dimuat di area above the fold, terutama CSS, JS, dan gambar
  • Khusus untuk gambar, gunakan dimensi ukuran gambar yang sesuai dengan yang diperlukan di dalam halaman website
  • Khusus untuk gambar, gunakan CDN bila perlu, terutama CDN yang memiliki fitur on the fly image compression (mengkompress ukuran gambar secara on the fly) dan automatic image format conversion (mengkonversi gambar ke format paling modern yang dapat disupport oleh browser). Umumnya, CDN yang memang khusus dibuat untuk gambar seperti ImageKit memiliki fitur ini
  • Percepat koneksi CDN yang digunakan menggunakan preconnect dan/atau dns-prefetch (khusus aset yang digunakan di above the fold area)
  • Buat Inline Critical CSS yang diperlukan untuk styling layout area above the fold
• Cara Optimasi dan Mempercepat Element Render Delay
  Mirip dengan cara mempercepat Resource Load Time, cara mempercepat Element Render Delay adalah:
  • Sederhanakan struktur HTML website secara keseluruhan, terutama area above the fold
  • Sederhanakan dan kurangi kompleksitas CSS dan JavaScript yang digunakan di area above the fold
  • Gunakan Paket Hosting yang spesifikasinya sesuai dengan kebutuhan website (kecepatan, bandwidth, traffic, dsb)

Kunci untuk Meningkatkan dan Memperbaiki Largest Contentful Paint untuk Core Web Vitals

Dari rincian di atas, dapat kita simpulkan cara untuk mengoptimasi dan meningkatkan angka LCP di PageSpeed Insights sekaligus memperbaiki nilai LCP di Core Web Vitals kita adalah sebagai berikut:

• Sederhanakan keseluruhan struktur HTML halaman website, terutama di area above the fold.
• Minimalisir jumlah aset yang diperlukan untuk membuat tampilan area above the fold, termasuk gambar, video, CSS, JS, dan bahkan font
• Sederhanakan dan minimalisir kompleksitas CSS dan JavaScript yang digunakan di area above the fold.
• Perkecil ukuran aset-aset yang perlu dimuat di area above the fold, terutama CSS, JS, dan gambar.
• Buat Critical CSS dan taruh secara inline di <head> section untuk mempercepat proses browser membuat tampilan area above the fold.
• Kontrol pemuatan aset. Preload yang diperlukan di area above the fold, dan delay yang tidak diperlukan di area above the fold. Ini juga berguna untuk menghindari peringatan Eliminate Render Blocking Resources.
• Khusus untuk gambar, tunda pemuatan gambar-gambar yang tidak digunakan di area above the fold dengan metode lazyload.
• Hindari JavaScript related content seperti slider dan carousel dari area above the fold. Pindahkan ke area below the fold bila memang masih diperlukan. Dengan ini, selain dapat menyederhanakan struktur HTML area above the fold website kita, kita juga jadi bisa menunda pemanggilan CSS dan JavaScript-nya dengan metode delay on user interaction.
• Sebisa mungkin, jangan gunakan font lebih dari 2 jenis, terutama untuk area above the fold. Bila memang memerlukan font lebih dari 2 untuk mempercantik tampilan website, taruh elemen yang menggunakan font ke-3 dan seterusnya di area below the fold, sehingga kita dapat menaruh pemanggilan font-nya dalam CSS yang kita tunda pemuatannya dengan metode delay on user interaction.
• Gunakan CDN untuk aset-aset yang bersifat statis, terutama gambar.
• Gunakan CDN khusus untuk gambar yang memiliki fitur on the fly image compression dan automatic image format conversion.
• Untuk gambar, sebisa mungkin kompress ukurannya sebelum upload dan gunakan dimensi ukuran gambar yang sesuai dengan yang diperlukan di dalam halaman website.
• Percepat koneksi CDN yang digunakan dengan menggunakan preconnect dan/atau dns-prefetch, terutama untuk aset-aset yang digunakan di above the fold area.
• Percepat koneksi SSL dengan HSTS Preload.
• Gunakan Paket Hosting yang spesifikasinya sesuai dengan kebutuhan website (kecepatan, bandwidth, traffic, dsb), dan pilih hostng yang lokasi server-nya dekat dengan lokasi target audiens website kita.
• Atur cache-policy untuk aset-aset yang bersifat statis seperti gambar, CSS, dan JavaScript agar browser tidak perlu mengunduh ulang saat pengunjung membuka halaman yang memiliki aset-aset yang sama
• Aktifkan Cache, baik itu berupa server side caching atau HTML page cache.

Bila Anda menggunakan WordPress, plugin optimasi WordPress yang saya buat, Optimize More! dan Optimize More! – Images, dapat banyak membantu untuk melakukan langkah-langkah optimasi LCP di atas dengan mudah.

Penutup

Optimasi LCP demi memperbaiki skor di PageSpeed Insights dan nilai di Core Web Vitals memang bukan pekerjaan yang mudah, terutama untuk website-website yang sudah terlanjur jadi. Banyak faktor yang dapat mempengaruhinya. Tapi bila bisa memahami kunci untuk meningkatkan dan memperbaiki Largest Contentful Paint di atas, mempercepat LCP website kita sangat tidak mustahil untuk dilakukan.

Kunci utamanya terletak di struktur HTML yang ada di area above the fold dan total aset yang harus dimuat oleh browser di awal. Bila perlu, jangan ragu untuk mengubah desain area above the fold demi memastikan kecepatan load time website dan kenyamanan pengguna saat pertama kali membuka website kita.

Good Luck! =)

Bingung dan tidak berhasil mengoptimasi Largest Contentful Paint website Anda? Konsultasi dan minta audit website Anda melalui form yang ada di halaman jasa optimasi speed website ini.