Membangun web yang lebih baik dengan Lighthouse

Sejak Google I/O, kami telah bekerja keras menjadikan Lighthouse sebagai pendamping yang luar biasa untuk membangun Progressive Web App yang hebat:

Hari ini, dengan senang hati kami umumkan rilis Lighthouse 1.3. Lighthouse 1.3 menyertakan banyak fitur baru yang besar, audit, dan perbaikan bug biasa. Anda dapat menginstalnya dari npm (npm i -g lighthouse) atau mendownload ekstensi ini dari Chrome Web Store.

Jadi, apa yang baru?

Tampilan dan nuansa baru

Jika Anda telah menggunakan Lighthouse versi sebelumnya, Anda mungkin melihat bahwa logo tersebut masih baru. Laporan HTML dan Ekstensi Chrome juga telah diperbarui sepenuhnya, dengan penskoran yang lebih rapi dan konsistensi yang lebih konsisten di seluruh hasil audit. Kami juga telah menambahkan informasi debug yang berguna saat Anda gagal dalam pengujian dan menyertakan petunjuk ke solusi yang direkomendasikan.

Laporan Lighthouse

Praktik Terbaik Baru

Hingga saat ini, Lighthouse telah berfokus pada metrik performa dan kualitas PWA. Namun, tujuan menyeluruh project ini adalah menyediakan buku panduan untuk semua pengembangan web. Hal ini mencakup panduan tentang praktik terbaik umum, tips performa dan aksesibilitas, serta bantuan menyeluruh dalam membuat aplikasi berkualitas.

"Do Better Web" adalah upaya dalam project Lighthouse untuk membantu developer melakukan yang lebih baik di web. Dengan kata lain, bantu mereka memodernisasi dan mengoptimalkan aplikasi web mereka. Sering kali, developer web menggunakan praktik yang sudah usang, antipola, atau mengalami kendala performa umum tanpa menyadarinya. Misalnya, sudah diketahui bahwa animasi berbasis JS harus dilakukan dengan requestAnimationFrame(), bukan setInterval(). Namun, jika developer tidak mengetahui API yang lebih baru, aplikasi web mereka akan terganggu.

Lighthouse 1.3 menyertakan lebih dari 20 saran praktik terbaik baru, mulai dari tips untuk memodernisasi fitur CSS & JavaScript hingga rekomendasi performa seperti: "Kurangi jumlah aset yang memblokir render", "Gunakan pemroses peristiwa pasif untuk meningkatkan performa scroll".

Lakukan praktik terbaik web yang lebih baik.

Kami akan terus menambahkan rekomendasi lainnya dari waktu ke waktu. Jika Anda memiliki saran praktik terbaik atau ingin membantu kami menulis audit, ajukan masalah di GitHub.

Penampil Laporan

Terakhir, dengan senang hati kami mengumumkan penampil web baru untuk hasil Lighthouse. Kunjungi googlechrome.github.io/lighthouse/viewer, tarik lalu lepas output proses Lighthouse (atau klik untuk mengupload file), dan selesai. "Insta" Lighthouse HTML.

Penampil laporan.
Penampil Laporan

Lighthouse Viewer juga memungkinkan Anda berbagi laporan dengan orang lain. Mengklik ikon bagikan akan membuat Anda login ke GitHub. Kami menyimpan laporan sebagai inti rahasia di akun, sehingga Anda dapat dengan mudah menghapus laporan yang dibagikan atau memperbaruinya nanti. Menggunakan GitHub untuk penyimpanan data juga berarti Anda mendapatkan kontrol versi secara gratis.

Arsitektur pelihat.
Arsitektur Pengakses Lihat-Saja

Laporan yang sudah ada dapat dimuat ulang oleh Lighthouse Viewer dengan menambahkan ?gist=GIST_ID ke URL:

Arsitektur penampil 2.
Arsitektur Pengakses Lihat-Saja 2

Untuk semua detail tentang hal terbaru di Lighthouse, lihat catatan rilis lengkap di GitHub. Seperti biasa, hubungi kami untuk melaporkan bug, mengajukan permintaan fitur, atau mendiskusikan ide tentang hal yang ingin Anda lihat berikutnya.