Cara Optimasi LCP Tanpa Jadi Developer

TL;DR: Largest Contentful Paint (LCP) yang lambat membuat halaman terasa kosong terlalu lama dan menaikkan kemungkinan pengunjung pergi. Sebagian besar perbaikan LCP, seperti mengompres gambar hero, memberi prioritas muat, dan mengaktifkan caching, bisa dikerjakan marketer tanpa menulis kode rumit. Targetnya: LCP di bawah 2,5 detik pada persentil ke-75 kunjungan.

Banyak marketer menganggap kecepatan website urusan developer. Padahal dalam beberapa audit yang saya lakukan, penyebab LCP lambat paling sering bukan kode yang rumit, melainkan gambar hero raksasa yang lupa dikompres atau plugin yang menumpuk skrip di paruh atas halaman.

Kabar baiknya, sebagian besar penyebab itu bisa Anda kenali dan perbaiki sendiri. Artikel ini membongkar langkah praktis memperbaiki LCP tanpa harus jadi developer.

Kenapa LCP Penting buat Marketer

Largest Contentful Paint mengukur kapan elemen terbesar di layar selesai dimuat, biasanya gambar hero atau judul besar. Inti dari optimasi LCP adalah memangkas waktu sampai pengunjung melihat sesuatu yang berarti, bukan layar kosong.

Metrik ini adalah satu dari tiga Core Web Vitals dan menjadi sinyal peringkat sejak 2021. Untuk gambaran ketiganya secara menyeluruh, panduan Core Web Vitals untuk marketer membahasnya tanpa jargon.

Tiga Penyebab Tersering dan Solusinya

Gambar hero adalah pelaku nomor satu. Mengganti satu file 1,5 MB menjadi versi WebP 200 KB sering memberi perbaikan yang langsung terasa. Pastikan juga gambar hero tidak ikut ditunda oleh teknik penundaan muat, karena itu justru memperlambatnya.

Studi Kasus dari Lapangan

Saat menata ulang halaman untuk salah satu klien e-commerce, gambar hero awalnya dimuat tanpa prioritas dan berukuran besar. Setelah dikompres dan diberi prioritas muat, kemunculan elemen utama terasa lebih cepat. Besar perbaikannya bervariasi tergantung kondisi awal dan jaringan pengunjung, jadi angka pastinya berbeda tiap situs.

Satu jebakan yang sering muncul: skor Lighthouse hijau di laptop developer, tetapi pengunjung asli tetap merasa lambat. Penyebabnya dibahas di kasus Lighthouse hijau tapi CrUX merah. Yang dipakai Google untuk peringkat adalah data lapangan asli, bukan uji lab.

Pertanyaan Umum

Apakah saya perlu akses ke kode untuk memperbaiki LCP?

Untuk banyak kasus, tidak. Mengompres gambar, mengaktifkan caching, dan mengurangi widget bisa dilakukan dari panel CMS atau tool online. Perbaikan tingkat lanjut memang butuh developer.

Berapa LCP yang dianggap baik?

Di bawah 2,5 detik tergolong baik, 2,5 sampai 4 detik perlu perbaikan, di atas 4 detik buruk. Diukur pada persentil ke-75 kunjungan nyata.

Alat apa untuk mengukur LCP?

PageSpeed Insights dari Google menampilkan LCP dari data lab sekaligus data lapangan. Acuan teknisnya tersedia di web.dev.

Mulai dari Gambar Hero

Kalau hanya sempat memperbaiki satu hal, mulai dari gambar hero: kompres, ubah ke format modern, dan beri prioritas muat. Langkah kecil ini sering memberi dampak paling terasa, dan semuanya bisa Anda kerjakan tanpa menyentuh satu baris kode pun.