Lighthouse adalah alat audit yang sudah ada di Chrome DevTools. Dia memuat ulang halamanmu dalam kondisi yang sengaja dibuat berat (HP kelas menengah dan jaringan lambat), lalu memberi skor 0 sampai 100 plus daftar hal yang bisa diperbaiki. Panel Performance, juga di DevTools, adalah rekaman detail pemuatan itu, milidetik demi milidetik. Mirip cek kesehatan di klinik: Lighthouse itu kertas hasil lab dengan angka dan rentang normalnya, panel Performance itu rekaman EKG-nya, yang kamu buka kalau mau tahu kenapa angkanya jelek.
🧪 Tebakan cepat: kamu menjalankan Lighthouse tiga kali di halaman yang sama tanpa mengubah apa pun, dan skornya 49, 46, lalu 52. Lighthouse-nya rusak? Tebak dulu, jawabannya ada di bagian "Kenapa skornya naik turun".
Menjalankan Lighthouse
- Buka jendela Incognito (
Ctrl+Shift+N, di MacCmd+Shift+N), lalu buka halamanmu. - Buka DevTools (
F12, atauCtrl+Shift+I, di MacCmd+Option+I) dan pilih tab Lighthouse. - Pilih Mode: Navigation, Device: Mobile, dan centang kategori Performance.
- Klik Analyze page load.
Lighthouse memuat ulang halaman dengan CPU diperlambat 4 kali dan jaringan setara 4G lambat (sekitar 1,6 Mbps, jeda bolak-balik 150 ms). Laporannya punya empat kategori: Performance, Accessibility, Best Practices, dan SEO. Kategori PWA yang mungkin kamu lihat di tutorial lama sudah dihapus sejak Lighthouse 12.
Dari terminal juga bisa, hasilnya sama:
# audit versi Mobile, cuma kategori Performance, lalu buka laporannya
npx lighthouse https://contoh.com --only-categories=performance --view
Membaca skor dan lima metriknya
Skor Performance dibagi tiga warna: 90 sampai 100 hijau (Good), 50 sampai 89 oranye (Needs Improvement), dan 0 sampai 49 merah (Poor). Targetnya 90 ke atas.
Skor itu gabungan lima metrik. Tiap metrik diubah jadi nilai 0 sampai 100 memakai data jutaan website asli, lalu dirata-rata dengan bobot:
| Metrik | Yang diukur | Bobot | Hijau kalau |
|---|---|---|---|
| FCP (First Contentful Paint) | kapan teks atau gambar pertama muncul | 10% | ≤ 1,8 s |
| Speed Index | seberapa cepat isi layar terlihat terisi | 10% | ≤ 3,4 s |
| LCP (Largest Contentful Paint) | kapan elemen terbesar di layar pertama muncul | 25% | ≤ 2,5 s |
| TBT (Total Blocking Time) | total waktu main thread terblokir | 30% | ≤ 200 ms |
| CLS (Cumulative Layout Shift) | seberapa jauh tampilan bergeser | 25% | ≤ 0,1 |
Main thread adalah satu jalur kerja browser yang menjalankan JavaScript, menghitung layout, dan merespons klik. Kerja yang lebih dari 50 ms disebut long task. TBT menjumlahkan bagian yang lewat 50 ms dari tiap long task, antara FCP dan saat halaman siap dipakai. Task 420 ms menyumbang 370 ms, task 40 ms menyumbang 0.
Ini halaman toko kopi di Lab, diaudit di Incognito, satu perbaikan demi satu perbaikan:
| Kondisi | FCP | Speed Index | LCP | TBT | CLS | Skor |
|---|---|---|---|---|---|---|
| Awal | 2,6 s | 4,2 s | 4,9 s | 770 ms | 0,19 | 49 merah |
app.js diberi defer dan dipecah |
1,2 s | 3,6 s | 4,9 s | 30 ms | 0,19 | 72 oranye |
| Hero 800 KB jadi 120 KB | 1,2 s | 1,6 s | 1,5 s | 30 ms | 0,19 | 91 hijau |
Banner diberi width dan height |
1,2 s | 1,6 s | 1,5 s | 30 ms | 0 | 100 hijau |
- Memecah JavaScript menaikkan skor paling banyak, karena TBT bobotnya paling besar (30%).
- CLS 0,19 sendirian masih menahan 9 poin.
Core Web Vitals sekarang LCP, INP, dan CLS. INP (Interaction to Next Paint) butuh orang sungguhan yang mengeklik, sedangkan Lighthouse cuma memuat halaman tanpa menyentuh apa pun. Makanya di lab Lighthouse memakai TBT sebagai penggantinya: banyak long task berarti klik pengguna nanti kemungkinan harus antre.
Panel Performance: mencari penyebabnya
Skor bilang apa yang jelek. Panel Performance menunjukkan kenapa.
- Buka tab Performance. Di pengaturannya (ikon roda gigi), pilih CPU 4x slowdown supaya mirip HP.
- Klik Record and reload (ikon putar ulang). Halaman dimuat ulang dan direkam.
- Baca hasilnya dari atas ke bawah:
- Network: kapan tiap file mulai dan selesai diunduh.
hero.jpg800 KB jadi batang paling panjang. - Main: kotak-kotak kerja main thread. Task di atas 50 ms diberi segitiga merah di pojoknya, dan bagian yang lewat 50 ms diarsir merah. Klik kotaknya untuk melihat function dan file penyebabnya.
- Penanda FCP dan LCP di garis waktu, plus jalur Layout shifts untuk pergeseran.
- Panel Insights di samping merangkum masalahnya, misalnya rincian LCP dan elemen yang bikin layout bergeser.
- Network: kapan tiap file mulai dan selesai diunduh.
Kalau tab Performance cuma dibuka tanpa merekam, dia langsung menampilkan LCP, CLS, dan INP dari interaksimu sendiri di halaman itu.
Kenapa skornya naik turun
Gak rusak. Itu jawaban tebakannya. Tiap audit adalah satu kali percobaan di komputermu, dan hasilnya ikut dipengaruhi dua hal:
- Ekstensi browser. Ad blocker, password manager, atau pengecek grammar menjalankan script-nya sendiri di main thread. Di Lab, satu ekstensi menambah task 300 ms, jadi TBT naik 250 ms dan halaman yang sudah beres turun dari 100 ke 94. Mode Incognito mematikan sebagian besar ekstensi, jadi hasilnya lebih bersih dan konsisten.
- Kondisi komputer dan jaringan. Tab lain yang berat atau koneksi yang naik turun ikut menggeser angkanya beberapa poin.
Jadi: jalankan di Incognito, ulangi 3 sampai 5 kali, lalu pakai nilai tengahnya (median). Dari 49, 46, dan 52, mediannya 49. Ingat juga, Lighthouse adalah data lab: satu percobaan buatan. Pengalaman pengguna asli (data lapangan) bisa berbeda.
⚠️ Jebakan yang sering ketemu
- Audit di jendela biasa. Ekstensi ikut menambah long task, dan kamu sibuk memperbaiki masalah yang bukan milik halamanmu. Pakai Incognito.
- Puas dengan skor Desktop. Desktop memakai CPU dan jaringan yang jauh lebih cepat, jadi skornya hampir selalu lebih tinggi. Kebanyakan pengunjung buka dari HP, jadi cek Mobile.
- Mengaudit server development.
npm run devmenyajikan kode yang belum di-minify dan penuh alat bantu debug. Audit hasil build produksi, misalnyanpm run buildlalunpm run preview. - Menganggap TBT sama dengan INP. TBT cuma perkiraan di lab. INP asli datang dari pengguna yang benar-benar mengeklik.
TL;DR: Lighthouse (tab Lighthouse di DevTools, Mode Navigation, Device Mobile, Analyze page load) memberi skor Performance 0 sampai 100: 90 ke atas hijau, 50 sampai 89 oranye, di bawah 50 merah. Skornya gabungan lima metrik: FCP 10%, Speed Index 10%, LCP 25%, TBT 30%, CLS 25%. TBT menjumlahkan bagian lewat 50 ms dari tiap long task, dan jadi pengganti INP di lab. Panel Performance (Record and reload) menunjukkan penyebabnya: file di jalur Network, long task bersegitiga merah di jalur Main, penanda FCP dan LCP, dan layout shift. Jalankan di Incognito supaya ekstensi gak ikut, ulangi beberapa kali, dan pakai median.
