Cara membaca laporan Lighthouse tanpa panik

Aturan pertama: skor Anda bukanlah situs Anda

Buka laporan Lighthouse untuk pertama kalinya dan Anda akan berhadapan dengan deretan angka, kotak berwarna, dan peringatan tentang hal-hal yang belum pernah Anda dengar. Respons yang wajar adalah panik. Skornya merah. Ada tujuh belas audit yang gagal. Pasti situsnya rusak?

Kemungkinan besar tidak. Lighthouse adalah alat diagnostik, bukan rapor. Skor tersebut adalah benchmark sintetis yang dijalankan dalam kondisi lab—sering kali pada koneksi yang dibatasi, menyimulasikan ponsel kelas menengah dari 2017. Skor itu memberi tahu bagaimana performa situs Anda dalam skenario spesifik tersebut, bukan bagaimana pengguna nyata mengalaminya di dunia sebenarnya.

Ini penting karena kebanyakan tim terpaku pada skor dan kehilangan konteks. Skor 65 mungkin baik-baik saja untuk aplikasi web kompleks dengan data real-time. Skor 95 masih bisa memberikan pengalaman buruk jika hal yang salah dioptimalkan. Skor adalah titik awal untuk investigasi, bukan metrik keberhasilan.

Yang dibaca lebih dulu: Core Web Vitals

Lewati skor performa keseluruhan. Gulir ke bagian Metrics dan lihat tiga angka: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), dan Interaction to Next Paint (INP). Inilah Core Web Vitals, dan ini adalah satu-satunya metrik performa yang digunakan Google sebagai sinyal peringkat.

• LCP mengukur berapa lama waktu yang dibutuhkan elemen terlihat terbesar untuk dirender. Target: di bawah 2,5 detik. Jika Anda di atas 4 detik, pengguna menunggu terlalu lama untuk melihat konten yang bermakna.
• CLS mengukur stabilitas visual—seberapa banyak halaman bergeser saat dimuat. Target: di bawah 0,1. Jika Anda di atas 0,25, pengguna tidak sengaja mengeklik hal yang salah karena tombol berpindah.
• INP mengukur responsivitas—seberapa cepat halaman bereaksi terhadap klik, ketukan, dan penekanan tombol. Target: di bawah 200ms. Jika Anda di atas 500ms, situs terasa lamban.

Tiga metrik ini berkorelasi dengan frustrasi pengguna yang nyata. Perbaiki ini sebelum Anda memikirkan hal lain.

Opportunities vs. Diagnostics: pahami perbedaannya

Lighthouse membagi temuannya ke dalam dua kategori: Opportunities dan Diagnostics. Opportunities diberi peringkat berdasarkan estimasi penghematan waktu. Diagnostics adalah konteks tambahan—hal-hal yang mungkin menjadi masalah, atau mungkin tidak.

Mulailah dari Opportunities. Jika Lighthouse mengatakan "Eliminate render-blocking resources" dapat menghemat 1,2 detik, itu kemenangan yang konkret. Jika dikatakan "Reduce unused JavaScript" dapat menghemat 0,1 detik, kemungkinan besar tidak sepadan dengan refactor.

Diagnostics lebih rumit. "Avoid an excessive DOM size" terdengar buruk, tetapi jika CLS Anda baik dan INP Anda cepat, DOM yang besar mungkin tidak merugikan siapa pun. Diagnostics adalah petunjuk, bukan mandat. Selidiki yang selaras dengan metrik Anda yang sebenarnya.

Audit yang biasanya bisa Anda abaikan

Beberapa peringatan Lighthouse bersifat peninggalan lama atau terlalu agresif. Berikut yang paling sering menimbulkan kepanikan yang tidak perlu:

• "Does not use passive listeners to improve scrolling performance" — Ini adalah mikro-optimasi yang jarang memberi dampak besar. Kecuali Anda memiliki bukti scrolling yang tersendat, lewatkan saja.
• "Image elements do not have explicit width and height" — Ini penting untuk CLS, tetapi hanya jika gambar menyebabkan pergeseran tata letak. Jika CLS Anda sudah baik, jangan refactor hanya demi audit.
• "Serve images in next-gen formats" — Ya, WebP dan AVIF lebih kecil. Namun jika gambar Anda sudah dioptimalkan dan LCP Anda cepat, ini bagus untuk dimiliki, bukan krisis.
• "Avoid enormous network payloads" — Lighthouse menandai apa pun di atas 1,6 MB. Namun halaman 2 MB yang dimuat cepat lebih baik daripada halaman 500 KB yang memblokir rendering. Fokus pada bagaimana byte dikirimkan, bukan hanya totalnya.

Apa yang harus dilakukan saat semuanya merah

Jika skor Lighthouse Anda di bawah 50 dan sebagian besar audit gagal, kemungkinan Anda menghadapi salah satu dari tiga akar masalah:

1. Font yang belum dioptimalkan. Web font masih menjadi kemenangan performa paling mudah di sebagian besar situs. Periksa apakah Anda memuat enam ketebalan font padahal hanya menggunakan dua, atau mengirim file WOFF alih-alih WOFF2.
2. CSS dan JavaScript yang memblokir rendering. Jika First Contentful Paint (FCP) Anda di atas 3 detik, ada sesuatu yang menghalangi browser melakukan painting. Cari file CSS besar atau script sinkron di <head>.
3. Gambar terlalu besar. Jika elemen LCP Anda adalah gambar dan ukurannya 4 MB, itulah masalahnya. Kompres, lazy-load gambar below-the-fold, dan gunakan sintaks gambar responsif.

Perbaiki salah satunya dan jalankan ulang Lighthouse. Anda sering akan melihat kenaikan 20-30 poin. Lalu tangani yang berikutnya.

Data lab vs. data lapangan: pemeriksaan realitas

Lighthouse berjalan di lab. Lighthouse menyimulasikan koneksi lambat dan perangkat lambat, tetapi tidak dapat menyimulasikan perilaku pengguna nyata—bagaimana orang menggulir, apa yang mereka klik, apakah mereka berada di Wi-Fi yang tidak stabil.

Untuk pemeriksaan realitas, bandingkan hasil Lighthouse Anda dengan data lapangan dari Chrome User Experience Report (CrUX). CrUX menunjukkan bagaimana pengguna Chrome nyata mengalami situs Anda selama 28 hari terakhir. Jika Lighthouse mengatakan LCP Anda 4 detik tetapi CrUX menunjukkan 2 detik, percayai CrUX. Jika keduanya buruk, Anda memiliki masalah nyata.

Anda dapat menemukan data CrUX di PageSpeed Insights (versi web dari Lighthouse) atau di Google Search Console pada bagian "Core Web Vitals." Jika ada ketidaksesuaian, selidiki alasannya. Mungkin pengguna nyata Anda berada di jaringan yang lebih cepat. Mungkin Lighthouse sedang menguji build dev yang belum dioptimalkan.

Kapan menjalankan ulang Lighthouse

Lighthouse punya banyak noise. Jalankan tiga kali berturut-turut dan Anda akan mendapatkan tiga skor berbeda, bahkan pada halaman yang sama. Ini karena performa bersifat variabel—proses latar belakang, jitter jaringan, dan heuristik browser semuanya memengaruhi hasil.

Untuk mendapatkan baseline yang stabil, jalankan Lighthouse dalam mode incognito dengan semua ekstensi dinonaktifkan, atau gunakan CLI dengan flag --preset=desktop untuk hasil yang lebih konsisten. Jalankan tiga kali dan rata-ratakan skornya. Jika Anda melihat ayunan besar (lebih dari 10 poin), ada hal lain yang salah—mungkin server lambat, atau halaman memuat resource yang berbeda setiap kali.

Jalankan ulang Lighthouse setelah setiap perubahan signifikan. Menerapkan strategi font baru? Periksa LCP. Lazy-load gambar? Periksa CLS. Menambahkan script pihak ketiga? Periksa INP. Performa bukan perbaikan sekali saja; ini adalah anggaran yang Anda pertahankan.

Alat yang membantu Anda menindaklanjuti temuan Lighthouse

Lighthouse memberi tahu Anda apa yang lambat. Ia tidak selalu memberi tahu bagaimana memperbaikinya. Untuk itu, Anda memerlukan alat tambahan:

• WebPageTest memberi Anda tampilan filmstrip tentang bagaimana halaman dimuat, frame demi frame. Penting untuk mendiagnosis masalah LCP dan CLS.
• Chrome DevTools Performance panel menunjukkan dengan tepat JavaScript mana yang memblokir main thread. Gunakan untuk menemukan sumber skor INP yang buruk.
• Alat kompresor gambar memungkinkan Anda mengoptimalkan gambar langsung di browser, yang lebih cepat dan lebih privat daripada mengunggah ke layanan pihak ketiga. Pemrosesan gambar sisi klien adalah kemenangan privasi karena gambar Anda tidak pernah meninggalkan mesin Anda.

Lighthouse adalah titik awal. Alat-alat ini membantu Anda menyelesaikan pekerjaannya.

Poin utama

• Skor Lighthouse Anda adalah benchmark lab, bukan ukuran pengalaman pengguna di dunia nyata. Bandingkan dengan data lapangan dari CrUX sebelum Anda panik.
• Fokus pada Core Web Vitals (LCP, CLS, INP) terlebih dahulu. Ini adalah metrik yang berkorelasi dengan frustrasi pengguna dan dampak SEO.
• Prioritaskan Opportunities berdasarkan estimasi penghematan waktu. Abaikan Diagnostics yang tidak selaras dengan masalah performa Anda yang sebenarnya.
• Beberapa audit—seperti passive listeners atau format gambar next-gen—adalah mikro-optimasi. Perbaiki hal besar terlebih dahulu.
• Jalankan Lighthouse tiga kali dan rata-ratakan hasilnya. Performa bersifat variabel, dan satu kali proses bisa menyesatkan.

FAQ

Q: Mengapa skor Lighthouse saya berubah setiap kali saya menjalankannya?
A: Lighthouse mengukur performa dalam kondisi yang bervariasi—kecepatan jaringan, beban CPU, dan heuristik browser semuanya memengaruhi hasil. Jalankan tiga kali dalam mode incognito dan rata-ratakan skornya untuk baseline yang lebih stabil.

Q: Haruskah saya mengoptimalkan untuk mobile atau desktop terlebih dahulu?
A: Mobile. Lighthouse secara default menggunakan simulasi mobile karena sebagian besar traffic web berasal dari mobile, dan perangkat mobile lebih lambat. Jika skor mobile Anda baik, skor desktop Anda biasanya juga akan baik.

Q: Skor Lighthouse saya 95, tetapi situs saya masih terasa lambat. Apa yang salah?
A: Lighthouse mengukur pemuatan halaman, bukan interaktivitas setelah halaman dimuat. Periksa skor INP Anda dan gunakan Chrome DevTools Performance panel untuk membuat profil apa yang terjadi ketika pengguna mengeklik atau menggulir. Anda mungkin memiliki masalah JavaScript yang tidak tertangkap Lighthouse.

Q: Apakah saya perlu skor sempurna 100?
A: Tidak. Skor 90+ sudah sangat baik. Mengejar 100 sering berarti mengoptimalkan hal-hal yang tidak penting bagi pengguna. Fokus pada metrik nyata—LCP, CLS, INP—dan abaikan skor.

Q: Bisakah saya memercayai Lighthouse jika saya menggunakan banyak script pihak ketiga?
A: Lighthouse akan menandai script pihak ketiga sebagai masalah, tetapi tidak selalu dapat membedakan mana yang perlu dan mana yang tidak. Gunakan audit "Avoid enormous network payloads" dan "Reduce JavaScript execution time" untuk mengidentifikasi pelanggar terburuk, lalu putuskan apakah layak dipertahankan.

Sumber

• "Lighthouse performance scoring" — Google Developers
• "Core Web Vitals" — web.dev
• "Chrome User Experience Report" — Google Developers
• "WebPageTest Documentation" — WebPageTest.org