Skor Lighthouse menjadi acuan penting bagi performa frontend dan SEO. Ketika aplikasi web lambat, pengguna mudah pergi dan mesin pencari menurunkan peringkat. Optimasi Lighthouse membantu tim frontend mengidentifikasi bottleneck dan memperbaiki pengalaman pengguna. Fokus utama biasanya pada LCP, CLS, dan TBT.
Percepat waktu muat awal
Kurangi ukuran bundle dengan code splitting dan lazy loading. Kompres gambar dan gunakan format modern seperti WebP. Terapkan caching untuk aset statis agar browser tidak mengunduh ulang.
- Gunakan preload untuk font penting agar teks cepat muncul.
- Minify dan tree-shake JavaScript agar lebih ringan.
- Pastikan server memberikan kompresi gzip atau brotli.
Langkah ini akan menurunkan waktu muat dan meningkatkan skor performa secara signifikan.
Stabilkan layout agar CLS rendah
Cumulative Layout Shift terjadi ketika elemen berpindah saat halaman dimuat. Beri ukuran tetap pada gambar dan iklan, serta hindari memasukkan konten di atas tanpa reservasi ruang.
Gunakan skeleton loading agar pengguna melihat struktur halaman lebih awal. Jika ada komponen yang muncul belakangan, pastikan ada placeholder yang menjaga layout tetap stabil.
Kurangi blocking time
JavaScript yang berat memperpanjang TBT. Pindahkan pekerjaan berat ke web worker dan tunda script non-kritis. Gunakan event listener pasif agar scrolling tetap lancar.
Optimasi Lighthouse bukan sekadar angka, tetapi upaya meningkatkan UX, menurunkan bounce rate, dan membuat aplikasi web lebih SEO friendly.