Lighthouse adalah alat pengauditan situs yang membantu developer memberikan peluang dan diagnostik untuk meningkatkan pengalaman pengguna situs mereka.
Lighthouse 10 tersedia langsung di command line melalui npm dan di Chrome Canary. Versi ini akan hadir di Chrome stabil di Chrome 112 dan di PageSpeed Insights dalam beberapa minggu mendatang.
Perubahan skor
Metrik Time To Interactive (TTI) yang ada sedang dihapus di Lighthouse 10, sebagai penutup dari proses penghentian yang dimulai di Lighthouse 8. Bobot skor TTI 10% dialihkan ke Pergeseran Tata Letak Kumulatif (CLS), yang kini akan memperhitungkan 25% dari skor performa keseluruhan.
TTI menandai titik waktu, tetapi cara penetapannya membuatnya terlalu sensitif terhadap permintaan jaringan pencilan dan tugas yang panjang. Largest Contentful Paint (LCP) dan Speed Index biasanya merupakan heuristik yang lebih baik untuk konten halaman yang merasa termuat daripada jumlah permintaan jaringan yang aktif. Sementara itu, Total Waktu Pemblokiran (TBT) menangani tugas yang panjang dan ketersediaan thread utama secara lebih andal, dan meskipun bukan proxy langsung, cenderung berkorelasi lebih baik dengan Core Web Vitals seperti yang diukur di lapangan.
Peningkatan bobot CLS bersifat insidental dengan penghapusan TTI, tetapi lebih mencerminkan kepentingannya sebagai Core Web Vital dan idealnya akan meningkatkan fokus untuk situs yang masih melakukan pergeseran tata letak yang tidak perlu.
Kami harap hal ini dapat meningkatkan skor performa, karena sebagian besar halaman cenderung mendapatkan skor CLS lebih baik daripada TTI. Dalam analisis terhadap 13 juta pemuatan halaman dalam proses Arsip HTTP terbaru, 90% dari halaman tersebut akan melihat peningkatan dalam skor performa Lighthouse mereka, dengan 50% dari mereka melihat peningkatan kinerja lebih dari 5 poin.
Jika karena alasan tertentu Anda masih memerlukan nilai TTI Lighthouse (misalnya, dalam pernyataan CI), nilai tersebut masih tersedia tidak berubah dalam output JSON Lighthouse, hanya dengan bobot skor 0 dan disembunyikan dalam laporan HTML. Setiap akses dengan skrip untuk nilai JSON harus terus berfungsi tanpa perubahan.
Audit baru
Lighthouse 10 menghadirkan audit kinerja yang benar-benar baru dan perubahan signifikan terhadap audit lainnya.
Back-forward cache
Back/forward cache (bfcache) adalah salah satu alat paling canggih yang tersedia untuk meningkatkan performa halaman bagi pengguna yang sebenarnya. Selain cache browser biasa, halaman yang dimuat dari bfcache akan memulihkan tata letak halaman dan status eksekusi hampir secara instan, yang sebagian besar melewati semua aktivitas pemuatan halaman dan menampilkan halaman Anda di depan pengguna segera saat mereka menavigasi mundur dan maju melalui histori mereka.
Namun, ada beberapa cara yang dapat dilakukan halaman untuk mencegah browser memulihkan halaman dari bfcache. Audit Lighthouse baru ini sebenarnya keluar dari halaman pengujian dan kembali lagi untuk menguji apakah dapat dilakukan bfcache, dan mencantumkan alasan jika gagal.
Lihat dokumen audit bfcache untuk informasi selengkapnya.
Mencegah input tempel
Audit Praktik Terbaik lama "Mengizinkan pengguna menempelkan data ke kolom sandi" telah diperluas untuk memeriksa apakah menempelkan ke bidang input (tidak hanya-baca) akan berfungsi. Untuk sebagian besar situs, mencegah penempelan adalah pengalaman pengguna yang tidak berdampak negatif dan mencegah alur kerja aksesibilitas dan keamanan yang sah.
Audit baru kini menjadi "Mengizinkan pengguna menempelkan ke kolom input" (paste-preventing-inputs).
Pengguna node
Jika Anda menggunakan Lighthouse sebagai library Node, ada beberapa perubahan yang dapat menyebabkan gangguan terprogram dalam rilis ini yang mungkin perlu Anda perhitungkan. Lihat log perubahan 10.0 untuk mengetahui detail selengkapnya.
Lighthouse 10 juga dikirimkan dengan deklarasi tipe TypeScript lengkap! Apa pun yang diimpor dari lighthouse sekarang harus diketik, yang akan sangat membantu jika Anda membuat skrip alur pengguna Lighthouse.
Coba jenis-jenis tersebut dan beri tahu kami jika Anda mengalami masalah saat menggunakannya.
Mercusuar Berlari
Lighthouse tersedia di Chrome DevTools, npm (sebagai modul Node dan alat CLI), serta sebagai ekstensi browser (di Chrome dan Firefox). Platform ini juga mendukung beberapa layanan Google, termasuk PageSpeed Insights.
Untuk mencoba Lighthouse Node CLI, gunakan perintah berikut:
npm install -g lighthouse
lighthouse https://www.example.com --view
Menghubungi tim Lighthouse
Untuk membahas fitur baru, perubahan pada rilis Lighthouse 10, atau hal lain yang terkait dengan Lighthouse:
- Laporkan masalah atau kirimkan masukan di issue tracker GitHub Lighthouse.
- Ajukan pertanyaan di forum diskusi GitHub Lighthouse.
- Hubungi tim Lighthouse di Twitter @____lighthouse.