Lighthouse & Chrome DevTools
Chrome DevTools adalah senjata utama untuk menganalisis dan men-debug performance web.
Lighthouse Audit
Lighthouse memberikan skor 0-100 untuk Performance, Accessibility, Best Practices, SEO, dan PWA. Cara menggunakannya:
- Buka Chrome DevTools (F12)
- Pilih tab "Lighthouse"
- Pilih kategori dan device (Mobile/Desktop)
- Klik "Analyze page load"
Performance Tab
Untuk analisis mendalam:
- Flame Chart — Visualisasi setiap fungsi yang berjalan dan berapa lama
- Main Thread — Lihat apa yang memblokir rendering
- Network Waterfall — Urutan loading setiap resource
- Layout Shifts — Ditandai dengan garis merah di timeline
Network Tab Tips
- Gunakan throttling (Slow 3G, Fast 3G) untuk simulasi jaringan lambat
- Filter by type (JS, CSS, Img) untuk fokus pada tipe tertentu
- Cek "Disable cache" saat development
- Lihat Waterfall untuk identifikasi request chain
Coverage Tab
Lihat berapa persen CSS/JS yang sebenarnya digunakan di halaman. Kode yang tidak digunakan (merah) adalah kandidat untuk dihapus atau di-lazy-load.
