Lighthouse Audit: Cara Baca Skor Web Vitals Sebelum Launching

TL;DR: Google Lighthouse memberi skor 0-100 di lima kategori. Untuk launching production, target minimum yang realistis adalah Performance 80 mobile, Accessibility 95, Best Practices 95, SEO 100. Fokus perbaiki metrik berbobot tinggi dulu: LCP, TBT, CLS.

Banyak tim rilis website dengan bangga karena skor Lighthouse desktop 98. Dua minggu kemudian, laporan Google Search Console menunjukkan 42% halaman gagal Core Web Vitals di mobile. Jurang ini muncul karena desktop punya CPU cepat dan fiber, sementara sebagian besar user Indonesia pakai mid-range Android dengan 4G yang fluktuatif.

Dalam beberapa proyek terakhir yang dikerjakan Vito Atmo, audit Lighthouse selalu dibuka terlebih dahulu di tab Mobile, bukan Desktop. Prinsipnya sederhana: skor mobile adalah pengalaman mayoritas user Indonesia per 2026.

Kategori Mana yang Wajib Diperbaiki Dulu?

Tidak semua kategori setara. Berdasarkan praktik launching yang saya pakai untuk klien Atmo dan Vetmo, berikut prioritas realistisnya:

Lighthouse 10+ menghitung skor Performance dengan rumus weighted average, dengan bobot tertinggi di TBT (30%) dan LCP (25%). Artinya, memperbaiki dua metrik ini memberi lonjakan skor paling besar.

Cara Baca Skor per Metrik

Skor tiap metrik dipetakan dari nilai mentah via kurva log-normal. Secara sederhana:

$score_{metric} = f(value)$

Dengan $f$ bernilai antara 0-1 dan berubah drastis di sekitar threshold kritis. Contoh: LCP 2,5 detik memberi skor sekitar 0,5; LCP 4,0 detik memberi skor sekitar 0,25. Selisih 1,5 detik menghancurkan separuh skor.

Untuk detail threshold, rujuk dokumentasi resmi Google Lighthouse Scoring.

Tiga Hal yang Sering Luput

1. Gambar hero tidak eager-load. Jika pakai lazy loading pada gambar above-the-fold, LCP pasti anjlok. Beri fetchpriority="high".
2. Font menggunakan FOIT. Tambahkan font-display: swap di CSS untuk cegah teks invisible.
3. Third-party script berat. Tag Manager, chat widget, dan iklan sering jadi penyebab TBT tinggi. Defer atau load hanya saat user interact.

Studi Kasus: Menaikkan Skor Vetmo dari 58 ke 91

Saat optimasi landing page Vetmo (platform pet care), skor Lighthouse Performance mobile awalnya 58 karena hero image 1,2 MB PNG dan chat widget loading sinkron. Langkah yang dipakai:

• Konversi hero ke WebP 180 KB dengan width/height attribute
• Defer load chat widget sampai interaksi pertama
• Preload font utama
• Terapkan lazy loading pada gambar testimonial di bawah fold

Skor naik ke 91 dalam satu sprint. Dampak ke bisnis: bounce rate mobile turun dari 68% ke 51% dalam tiga minggu setelah deploy.

Pertanyaan Umum

Apakah skor Lighthouse 100 wajib untuk ranking bagus di Google?

Tidak wajib. Google pakai field data dari Chrome User Experience Report, bukan lab data Lighthouse, untuk faktor ranking. Tapi skor Lighthouse yang konsisten tinggi biasanya berkorelasi dengan field data yang sehat.

Perlu menjalankan Lighthouse di production atau staging?

Sebaiknya keduanya. Staging untuk quality gate sebelum deploy, production untuk monitoring berkala. Gunakan CI integration seperti Lighthouse CI untuk mencegah regresi.

Berapa lama audit Lighthouse membutuhkan waktu?

Antara 30-60 detik per halaman di Chrome DevTools. Untuk audit berkala 10-50 halaman, gunakan CLI atau PageSpeed Insights API.

Apakah skor Accessibility 100 berarti website sudah WCAG compliant?

Tidak. Lighthouse hanya tes 30-40% kriteria WCAG. Tes manual dengan keyboard dan screen reader tetap wajib.

Penutup Aplikatif

Jangan treat Lighthouse sebagai kompetisi skor, tapi sebagai checklist. Rilis dengan skor mobile yang jujur daripada skor desktop yang misleading. Target realistis yang disebutkan di atas lebih berguna daripada obsesi 100, karena 100 jarang bertahan lama di production dengan konten real.