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 halaman yang akan diaudit.
- Lighthouse memuat halaman tersebut dan mencatat waktu yang diperlukan halaman untuk mencapai berbagai tonggak pencapaian performa. Tonggak pencapaian ini disebut metrik.
- Lighthouse memberikan laporan tentang performa halaman. 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 memburuk. Namun, tidak ada cara untuk menangani metrik secara langsung. Sebagai gantinya, Anda mengikuti peluang yang diberikan Lighthouse. Dengan memanfaatkan peluang tersebut, skor metrik Anda cenderung akan meningkat.
Menjalankan Lighthouse dari halaman profil
Jalankan Lighthouse dari halaman profil web.dev:
Berikan URL apa pun, dan Lighthouse akan menjalankan serangkaian audit yang menghasilkan laporan tentang seberapa baik performa halaman.
Tinjau laporan audit untuk mengidentifikasi area yang dapat ditingkatkan di halaman Anda.
Untuk setiap audit, Anda akan menemukan panduan dan langkah-langkah langsung yang dapat dilakukan untuk meningkatkan skor.
Menjalankan 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 Audit dari daftar. Lighthouse adalah mesin yang mendukung panel Audit. Itulah sebabnya Anda melihat gambar menara mercusuar.
- Pastikan tombol pilihan Mobile dipilih. Saat Lighthouse mengaudit halaman Anda, Lighthouse akan menyimulasikan area pandang perangkat seluler dan string agen pengguna.
- Pastikan kotak Performa diaktifkan. Anda dapat mengaktifkan atau menonaktifkan kotak centang lainnya di bagian Audit. Jika mengaktifkannya, Anda akan melihat banyak peluang untuk meningkatkan aspek lain halaman Anda.
- Pastikan tombol pilihan Simulated Fast 3G, 4x CPU Slowdown dipilih. Lighthouse sebenarnya tidak membatasi jaringan atau CPU Anda saat memuat halaman. Sebagai gantinya, alat ini melihat berapa lama waktu yang diperlukan halaman untuk dimuat dalam kondisi normal, lalu memperkirakan berapa lama waktu yang diperlukan di jaringan 3G cepat dengan CPU yang 4 kali lebih lemah daripada CPU komputer Anda.
- Pastikan kotak centang Clear Storage diaktifkan. Opsi ini memaksa Lighthouse untuk membuka jaringan untuk setiap resource halaman, yang merupakan pengalaman pengunjung pertama kali saat membuka halaman.
- 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 Pelambatan CPU 4x diaktifkan, lalu pada waktu lain Anda menjalankan audit dengan throttling dinonaktifkan, skor metrik Anda akan jauh lebih rendah saat Anda mengaktifkan throttling. Anda mungkin menghabiskan banyak waktu untuk mencari tahu mengapa halaman Anda jauh lebih lambat sekarang, padahal pada kenyataannya satu-satunya hal yang berubah adalah konfigurasi Anda.
Memahami laporan
Di kanan atas laporan, Anda akan melihat 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 dokumentasi tentangnya.
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 atau dari Chrome DevTools. Terapkan salah satu peluang, lalu audit halaman Anda lagi untuk melihat pengaruh perubahan tersebut terhadap laporan Anda. Idealnya, skor metrik Anda akan sedikit lebih baik, dan Lighthouse tidak akan lagi menandai peluang tersebut sebagai sesuatu yang perlu diperbaiki.
Menjalankan Lighthouse sendiri sangat bagus untuk memeriksa masalah secara menyeluruh, tetapi pada akhirnya, Anda harus menyiapkan pemantauan berkelanjutan untuk memastikan situs Anda tetap sehat. Untuk melacak progres Lighthouse dari waktu ke waktu, tambahkan situs Anda ke profil Anda.