Lighthouse adalah alat audit situs yang membantu developer memberikan peluang dan diagnostik untuk meningkatkan pengalaman pengguna di situs mereka.
Lighthouse 10 langsung tersedia di command line melalui npm dan di Chrome Canary. Versi ini akan tersedia di Chrome stabil di Chrome 112 dan di PageSpeed Insights dalam beberapa minggu mendatang.
Perubahan skor
Metrik Time To Interactive (TTI) yang sudah lama dihapus di Lighthouse 10, yang mengakhiri proses penghentian penggunaan yang dimulai di Lighthouse 8. Bobot skor 10% TTI beralih ke Pergeseran Tata Letak Kumulatif (CLS), yang kini akan menyumbang 25% dari skor performa secara keseluruhan.
TTI menandai suatu waktu, tetapi cara penetapannya membuatnya terlalu sensitif terhadap permintaan jaringan yang menyimpang dan tugas yang lama. Largest Contentful Paint (LCP) dan Speed Index biasanya merupakan heuristik yang lebih baik untuk konten halaman yang terasa dimuat daripada jumlah permintaan jaringan aktif. Sementara itu, Total Blocking Time (TBT) menangani tugas panjang dan ketersediaan thread utama dengan lebih andal, dan meskipun bukan proxy langsung, cenderung berkorelasi lebih baik dengan Data Web Inti seperti yang diukur di lapangan.
Peningkatan bobot CLS bersifat insidental terhadap penghapusan TTI, tetapi lebih mencerminkan pentingnya hal tersebut sebagai Core Web Vitals dan idealnya akan meningkatkan fokus untuk situs yang masih membuat pergeseran tata letak yang tidak perlu.
Kami berharap hal ini dapat meningkatkan sebagian besar skor performa halaman, karena sebagian besar halaman cenderung memiliki skor CLS yang lebih baik daripada TTI. Dalam analisis terhadap 13 juta pemuatan halaman dalam proses Arsip HTTP terbaru, 90% dari halaman tersebut akan melihat peningkatan skor performa Lighthouse mereka, dengan 50% di antaranya melihat peningkatan performa lebih dari 5 poin.
Jika karena alasan tertentu Anda masih memerlukan nilai TTI Lighthouse (misalnya, dalam pernyataan CI), nilai tersebut masih tersedia tanpa perubahan di output JSON Lighthouse, hanya dengan bobot skor 0 dan tersembunyi dalam laporan HTML. Setiap akses berskrip nilai JSON akan terus berfungsi tanpa perubahan.
Audit baru
Lighthouse 10 menghadirkan audit kinerja yang baru dan perubahan signifikan pada yang lain.
Back-forward cache
Back/forward cache (bfcache) adalah salah satu alat paling canggih yang tersedia untuk meningkatkan performa halaman bagi pengguna nyata. Di luar cache browser biasa, halaman yang dimuat dari bfcache akan memulihkan tata letak dan status eksekusi halaman hampir seketika, sebagian besar melewati semua aktivitas pemuatan halaman dan menampilkan halaman Anda langsung kepada pengguna saat mereka menavigasi mundur dan maju di histori mereka.
Namun, ada beberapa cara yang dapat digunakan halaman untuk mencegah browser memulihkan halaman dari bfcache. Audit Lighthouse baru ini sebenarnya keluar dari halaman pengujian dan kembali lagi untuk menguji apakah dapat melakukan bfcache, dan mencantumkan alasan kegagalan.
Lihat dokumen audit bfcache untuk informasi selengkapnya.
Tempel yang mencegah input
Audit Praktik Terbaik lama "Mengizinkan pengguna menempelkan ke kolom sandi" telah diperluas untuk saat ini memeriksa apakah menempelkan ke kolom input (yang tidak hanya baca) akan berfungsi. Untuk sebagian besar situs, mencegah penempelan adalah pengalaman pengguna yang negatif dan mencegah alur kerja keamanan dan aksesibilitas yang sah.
Audit baru kini menjadi "Mengizinkan pengguna menempelkan konten 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 detail selengkapnya.
Lighthouse 10 juga disertakan dengan deklarasi tipe TypeScript lengkap! Apa pun yang diimpor dari lighthouse kini akan diketik, yang akan sangat membantu jika Anda membuat skrip alur pengguna Lighthouse.
Cobalah jenisnya dan beri tahu kami jika Anda mengalami masalah saat menggunakannya.
Mercusuar Berlari
Lighthouse tersedia di Chrome DevTools, npm (sebagai modul Node dan alat CLI), dan sebagai ekstensi browser (di Chrome dan Firefox). Teknologi 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
Hubungi tim Lighthouse
Untuk membahas fitur baru, perubahan dalam rilis Lighthouse 10, atau hal lain yang terkait dengan Lighthouse:
- Laporkan masalah atau kirim masukan di issue tracker GitHub Lighthouse.
- Ajukan pertanyaan di forum diskusi GitHub Lighthouse.
- Hubungi tim Lighthouse di Twitter @____lighthouse.