Daftar Isi
Lighthouse score bukan sekadar angka. Di baliknya ada pengalaman nyata pengguna — seberapa cepat halaman muncul, seberapa stabil layout, seberapa responsif tombol saat diklik. Dan sejak Google menjadikan Core Web Vitals sebagai ranking factor, score ini langsung berpengaruh ke posisi search.
Berikut hasil proyek nyata kami sebelum dan sesudah optimasi:
Setelah Optimasi
Kenapa Lighthouse Score Penting?
Studi Google menunjukkan bahwa 53% pengguna mobile meninggalkan halaman yang memuat lebih dari 3 detik. Setiap 100ms penundaan loading menurunkan konversi rata-rata 1%. Untuk website bisnis, ini langsung berdampak ke pendapatan.
"A 0.1 second improvement in load time can increase conversion rates by 8% for retail sites." — Deloitte & Google Research
1. Optimasi Gambar
Gambar adalah penyumbang terbesar ukuran halaman. Ini langkah yang kami lakukan di setiap proyek:
Gunakan format WebP atau AVIF
WebP rata-rata 30% lebih kecil dari JPEG dengan kualitas yang sama. AVIF bahkan bisa 50% lebih kecil. Untuk browser lama, gunakan <picture> dengan fallback.
<picture> <source srcset="hero.avif" type="image/avif"> <source srcset="hero.webp" type="image/webp"> <img src="hero.jpg" alt="Hero image" width="1200" height="630"> </picture>
Selalu set width dan height
Tanpa atribut width dan height, browser tidak bisa mereservasi ruang sebelum gambar dimuat. Ini menyebabkan Cumulative Layout Shift (CLS) — salah satu Core Web Vitals yang paling sering gagal.
Lazy loading untuk gambar di bawah fold
<img src="foto.webp" alt="..." loading="lazy" width="800" height="600">
squoosh.app — compress dan konversi ke WebP/AVIF langsung di browser, tanpa upload ke server.
2. Optimasi Font
Font adalah penyebab umum Flash of Invisible Text (FOIT) — teks tidak muncul sampai font selesai dimuat. Ini sangat mengganggu di koneksi lambat.
Gunakan font-display: swap
@font-face {
font-family: 'Inter';
src: url('inter.woff2') format('woff2');
font-display: swap; /* Tampilkan fallback dulu */
}
Preconnect ke Google Fonts
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
Batasi jumlah font dan weight
Setiap font weight adalah request terpisah. Idealnya maksimal 2 font family, masing-masing 2-3 weight. Lebih dari itu mulai berdampak ke performa.
3. Kurangi JavaScript
JavaScript yang tidak dipakai adalah beban terbesar untuk Time to Interactive. Audit dengan Lighthouse untuk temukan unused JS.
Defer atau async script non-kritis
<!-- Analytics, chat widget, dll --> <script src="analytics.js" defer></script>
Hindari render-blocking scripts
Script di <head> tanpa defer atau async akan memblokir render halaman. Pindahkan ke sebelum </body> atau tambahkan defer.
| Atribut | Download | Eksekusi | Gunakan untuk |
|---|---|---|---|
| (tanpa) | Langsung | Blocking | Jangan gunakan di head |
| async | Parallel | Segera selesai download | Script independen |
| defer | Parallel | Setelah HTML parsed | Hampir semua script |
4. Core Web Vitals
Google mengukur tiga metrik utama:
LCP — Largest Contentful Paint (< 2.5s)
Waktu sampai elemen terbesar (biasanya hero image atau heading) muncul. Fix: preload hero image, optimalkan server response time.
<link rel="preload" href="hero.webp" as="image">
FID / INP — Interaction to Next Paint (< 200ms)
Seberapa cepat halaman merespons interaksi. Fix: kurangi JavaScript berat, hindari long tasks di main thread.
CLS — Cumulative Layout Shift (< 0.1)
Seberapa stabil layout saat halaman dimuat. Fix: selalu set dimensi gambar, hindari inject konten di atas konten yang ada.
Checklist Lengkap
- Semua gambar dalam format WebP atau AVIF
- Semua gambar punya atribut width dan height
- Gambar di bawah fold pakai loading="lazy"
- Hero image pakai <link rel="preload">
- Google Fonts pakai preconnect
- font-display: swap di semua @font-face
- Semua script non-kritis pakai defer
- Tidak ada render-blocking script di <head>
- Test di PageSpeed Insights sebelum launch
- Test di mobile dan desktop
Dengan menerapkan semua teknik di atas secara konsisten, kami berhasil mencapai Lighthouse score 95–99 di hampir semua proyek. Tidak perlu tools mahal — sebagian besar bisa dilakukan dengan perubahan HTML dan CSS sederhana.
Butuh website dengan performa tinggi? Hubungi kami dan kami akan pastikan website kamu lolos semua Core Web Vitals.