Lighthouse adalah alat yang membantu Anda mengukur dan menemukan cara untuk meningkatkan performa halaman. Berikut adalah alur kerja umum untuk cara menggunakan Lighthouse:
- Anda memberi tahu Lighthouse laman apa yang akan diaudit.
- Lighthouse memuat halaman tersebut dan mencatat waktu yang diperlukan halaman untuk mencapai berbagai milestone performa. Pencapaian ini disebut metrics.
- Lighthouse memberi Anda laporan tentang performa halaman tersebut. Laporan ini memberikan skor untuk setiap metrik dan daftar peluang yang, jika Anda menerapkannya, akan membuat halaman dimuat lebih cepat.
Misi Anda adalah meningkatkan skor metrik dari waktu ke waktu, atau setidaknya memastikan skor tersebut tidak menjadi lebih buruk. Namun, tidak ada cara untuk mengelola metrik secara langsung. Sebagai gantinya, Anda mengikuti peluang yang disediakan Lighthouse. Bekerja pada peluang tersebut cenderung meningkatkan skor metrik Anda.
Jalankan Lighthouse dari halaman profil Anda
Jalankan Lighthouse dari halaman profil web.dev Anda:
Berikan URL apa pun, dan Lighthouse akan menjalankan serangkaian audit untuk menghasilkan laporan tentang performa halaman.
Tinjau laporan audit untuk mengidentifikasi area halaman yang dapat ditingkatkan.
Untuk setiap audit, Anda akan menemukan panduan dan langkah langsung yang dapat diambil untuk meningkatkan skor Anda.
Jalankan Lighthouse dari Chrome DevTools
Chrome DevTools adalah serangkaian alat developer web yang terintegrasi langsung ke browser Google Chrome. Anda tidak perlu mendownload apa pun untuk mendapatkan DevTools. Jika Anda memiliki Chrome, berarti Anda memiliki DevTools.
- Di Chrome, buka halaman yang ingin Anda audit.
- Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
Klik tab Audit. Jika Anda tidak melihat tab ini, klik simbol », lalu pilih Audits dari daftar. Lighthouse adalah mesin yang menggerakkan panel Audits. Itulah sebabnya Anda melihat gambar mercusuar.
- Pastikan tombol pilihan Seluler dipilih. Saat mengaudit halaman Anda, Lighthouse akan menyimulasikan area pandang perangkat seluler dan string agen pengguna.
- Pastikan kotak centang Performa diaktifkan. Anda dapat mengaktifkan atau menonaktifkan kotak centang lainnya di bagian Audits. Jika diaktifkan, Anda akan melihat banyak peluang untuk meningkatkan aspek lain pada halaman.
- Pastikan tombol pilihan Simulated Fast 3G, 4x CPU Slowdown dipilih. Lighthouse tidak benar-benar membatasi jaringan atau CPU Anda saat memuat halaman. Sebagai gantinya, sistem akan melihat waktu yang diperlukan untuk memuat halaman dalam kondisi normal, lalu memperkirakan waktu yang diperlukan pada jaringan 3G cepat dengan CPU yang 4 kali lebih lemah daripada jaringan komputer Anda.
- Pastikan kotak centang Hapus Penyimpanan diaktifkan. Opsi ini memaksa Lighthouse membuka jaringan untuk setiap resource halaman, yang merupakan cara pengunjung pertama kali menikmati halaman tersebut.
- Klik Jalankan Audit. Setelah 5 hingga 10 detik, Lighthouse akan menampilkan laporan kepada Anda.
Misalnya, jika Anda menjalankan beberapa audit dengan Simulasi 3G Cepat, Throttling CPU Pelambat 4x diaktifkan, lalu di lain waktu Anda menjalankan audit dengan throttling dinonaktifkan, skor metrik Anda akan jauh lebih rendah jika Anda mengaktifkan throttling. Anda mungkin menghabiskan banyak waktu untuk mencoba mencari tahu mengapa halaman Anda jauh lebih lambat saat ini, padahal sebenarnya satu-satunya hal yang berubah adalah konfigurasi Anda.
Memahami laporan
Bagian kanan atas laporan mencantumkan skor performa secara keseluruhan. 100 adalah skor sempurna. Di bawah skor keseluruhan adalah skor metrik. Panduan Penskoran Lighthouse v3 menjelaskan kontribusi setiap skor metrik terhadap skor keseluruhan.
Arahkan kursor ke metrik untuk mempelajarinya lebih lanjut. Klik Pelajari lebih lanjut untuk membaca dokumentasinya.
Di bawah skor metrik, Anda akan melihat screenshot tampilan halaman saat dimuat.
Di bawah screenshot, Anda akan melihat peluang untuk meningkatkan performa halaman.
Klik peluang untuk mempelajarinya lebih lanjut.
Langkah berikutnya
Coba gunakan Lighthouse untuk mengaudit halaman Anda, baik dari halaman profil Anda atau dari Chrome DevTools. Terapkan salah satu peluang, lalu audit halaman Anda lagi untuk melihat bagaimana perubahan memengaruhi laporan Anda. Skor metrik Anda idealnya akan menjadi sedikit lebih baik, dan Lighthouse tidak perlu lagi menandai peluang itu sebagai sesuatu untuk dikerjakan.
Menjalankan Lighthouse sendiri bagus untuk masalah pemeriksaan spot, tetapi pada akhirnya Anda perlu menyiapkan pemantauan berkelanjutan untuk memastikan situs tetap responsif. Untuk melacak progres Lighthouse dari waktu ke waktu, tambahkan situs Anda ke profil Anda.