Yang baru di Lighthouse 9.0

Brendan Kenny

Lighthouse adalah alat audit situs yang membantu developer dengan peluang dan diagnostik untuk meningkatkan pengalaman pengguna situs mereka.

Lighthouse 9.0 langsung tersedia di command line, di Chrome Canary, dan di PageSpeed Insights. Fitur ini akan tersedia di Chrome versi stabil pada Chrome 98.

Perubahan API

Sebagian besar pengguna tidak akan mengalami perubahan yang mengganggu alur kerja dengan rilis ini. Jika Anda menjalankan audit Lighthouse kustom atau menggunakan alat yang bergantung pada detail di dalam JSON laporan Lighthouse, mungkin ada beberapa perubahan yang menyebabkan error di versi 9.0 yang perlu Anda perhatikan.

Lihat daftar lengkap perubahan di log perubahan 9.0.

Lighthouse untuk alur penggunaan

Lighthouse memiliki API alur penggunaan baru yang memungkinkan pengujian lab kapan saja dalam masa aktif halaman.

Puppeteer digunakan untuk membuat skrip pemuatan halaman dan memicu interaksi pengguna sintetis, dan Lighthouse dapat dipanggil dengan beberapa cara untuk mendapatkan insight utama selama interaksi tersebut. Artinya, performa dapat diukur selama pemuatan halaman dan selama interaksi dengan halaman.

Laporan alur penggunaan Lighthouse, yang mencakup beberapa langkah pemuatan dan interaksi dengan situs, serta hasil audit Lighthouse untuk setiap langkah

Untuk informasi selengkapnya, lihat tutorial alur penggunaan Lighthouse dan contoh kode.

Pembaruan laporan

Laporan Lighthouse telah diperbarui untuk meningkatkan keterbacaan dan memperjelas sumber laporan serta cara laporan dijalankan.

Screenshot akhir telah disematkan di bagian atas laporan untuk memperjelas secara sekilas apakah halaman yang sedang diuji dimuat dengan benar dan dalam format yang diharapkan.

Laporan Lighthouse 9.0 yang mencantumkan metrik performa utama dengan lebih jelas dan menyematkan screenshot tampilan akhir halaman dalam laporan performa

Informasi ringkasan di bagian bawah laporan juga telah didesain ulang untuk menyampaikan cara Lighthouse dijalankan dan laporan dikumpulkan dengan lebih baik.

Bagian setelan yang diperbarui dalam laporan Lighthouse, yang kini memiliki ringkasan untuk item seperti kapan halaman diambil, jenis emulasi halaman yang digunakan, dan versi Chrome tempat pengujian dijalankan.

Untuk melihat cara kerja laporan baru, coba Lighthouse 9.0 atau buka contoh laporan ini.

Masalah aksesibilitas yang umum terjadi adalah ketika hal-hal yang seharusnya unik di halaman tidak unik, misalnya jika ID yang dirujuk dalam atribut aria-labelledby digunakan di beberapa elemen.

Lighthouse selalu memperingatkan tentang situasi ini, tetapi hanya akan mencantumkan instance pertama elemen dengan ID berulang, yang sering kali menyebabkan kebingungan karena beberapa pengguna akan menganggapnya menampilkan semua elemen yang menyebabkan masalah. Karena Lighthouse hanya menampilkan satu elemen, mereka akan menganggap bahwa elemen tunggal yang ditandai sebagai duplikat adalah bug.

Di Lighthouse 9.0, semua elemen yang memiliki ID tersebut kini tercantum:

Audit Lighthouse untuk 'Semua elemen yang dapat difokuskan harus memiliki `id` unik', yang menampilkan dua elemen, keduanya dengan `id` yang sama

Fungsi "node terkait" ini disediakan oleh axe-core, sehingga juga dapat muncul dalam audit aksesibilitas lainnya.

Untuk informasi selengkapnya, lihat masalah yang mengumpulkan laporan pengguna dan permintaan pull implementasi.

Menjalankan Lighthouse

Lighthouse tersedia di Chrome DevTools, npm (sebagai modul Node dan CLI), dan sebagai ekstensi browser (di Chrome dan Firefox). Layanan ini mendukung banyak layanan Google, termasuk web.dev/measure dan 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 9.0, atau hal lain yang terkait dengan Lighthouse: