Yang Baru di Lighthouse 6.0

Metrik baru, Pembaruan skor performa, audit baru, dan lainnya.

Connor Clark

Hari ini kami merilis Lighthouse 6.0.

Lighthouse adalah alat audit situs otomatis yang membantu pengembang beserta peluang dan diagnostik untuk meningkatkan pengalaman pengguna situs mereka. Library ini tersedia di Chrome DevTools, npm (sebagai modul Node dan CLI), atau sebagai ekstensi browser (di Chrome dan Firefox). Teknologi ini mendukung banyak Google layanan kami, termasuk web.dev/measure dan PageSpeed Insight.

Lighthouse 6.0 segera tersedia di npm dan di Chrome Canary. Layanan Google lainnya yang memanfaatkan Lighthouse akan mendapatkan {i>update<i} pada akhir bulan. Versi ini akan hadir di Chrome Stabil pada Chrome 84 (pertengahan Juli).

Untuk mencoba Lighthouse Node CLI, gunakan perintah berikut: bash npm install -g lighthouse lighthouse https://www.example.com --view

Versi Lighthouse ini hadir dengan sejumlah besar perubahan yang yang tercantum di log perubahan 6.0. Kita akan membahas yang disorot dalam artikel ini.

• Metrik baru
• Pembaruan skor performa
• Audit baru
• CI Mercusuar
• Mengganti nama panel Chrome DevTools
• Emulasi seluler
• Ekstensi browser
• Anggaran
• Link lokasi sumber
• Di cakrawala
• Terima kasih.

Metrik baru

Lighthouse 6.0 memperkenalkan tiga metrik baru pada laporan. Dua metrik baru ini–Terbesar Contentful Paint (LCP) dan Cumulative Layout Shift (CLS)–adalah implementasi lab Core Web Tanda vital.

Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) adalah pengukuran pemuatan yang dirasakan pengalaman yang lancar bagi developer. Menandai titik selama pemuatan halaman ketika konten utama–atau "terbesar" telah dimuat dan dapat dilihat oleh pengguna. LCP adalah pelengkap penting untuk First Contentful Paint (FCP) yang hanya menggambarkan awal pengalaman pemuatan. LCP memberikan sinyal kepada developer tentang bagaimana cepat pengguna benar-benar dapat melihat isi laman. Skor LCP kurang dari 2,5 detik adalah dianggap 'Baik'.

Untuk informasi selengkapnya, tonton video pembahasan mendalam tentang LCP yang ditulis oleh Paul Irish.

Pergeseran Tata Letak Kumulatif (CLS)

Pergeseran Tata Letak Kumulatif (CLS) adalah pengukuran stabilitas visual. Ini mengukur seberapa banyak konten laman bergeser secara visual. Skor CLS yang rendah adalah sinyal untuk developer bahwa pengguna mereka tidak mengalami perubahan konten yang tidak semestinya; skor CLS di bawah 0,10 adalah dianggap 'Baik'.

CLS di lingkungan lab diukur hingga akhir pemuatan halaman. Sedangkan di lapangan, Anda bisa mengukur CLS hingga interaksi pengguna pertama atau menyertakan semua input pengguna.

Untuk informasi selengkapnya, tonton pembahasan mendalam tentang CLS oleh Annie Sullivan.

Waktu Pemblokiran Total (TBT)

Total Blocking Time (TBT) mengukur responsivitas beban, yang mengukur jumlah total waktu saat thread utama diblokir cukup lama untuk mencegah responsivitas input. TBT mengukur jumlah total waktu antara First Contentful Paint (FCP) dan Waktu untuk Interaktif (TTI). Ini adalah metrik pendamping untuk TTI dan menghadirkan lebih banyak nuansa dalam mengukur aktivitas thread utama yang memblokir kemampuan pengguna untuk berinteraksi dengan halaman Anda.

Selain itu, TBT berkorelasi baik dengan metrik kolom First Input Penundaan (FID), yang merupakan Core Web Vitals.

Pembaruan skor performa

Skor performa di Lighthouse dihitung dari gabungan berbobot dari beberapa metrik untuk meringkas kecepatan halaman. Rumus skor performa 6.0 mengikuti.

Fase	Nama Metrik	Bobot Metrik
Lebih awal (15%)	First Contentful Paint (FCP)	15%
Sedang (40%)	Indeks Kecepatan (SI)	15%
	Largest Contentful Paint (LCP)	25%
Terlambat (15%)	Saatnya untuk Interaktif (TTI)	15%
Thread Utama (25%)	Waktu Pemblokiran Total (TBT)	25%
Kemampuan diprediksi (5%)	Pergeseran Tata Letak Kumulatif (CLS)	5%

Tiga metrik baru telah ditambahkan, tetapi tiga metrik lama telah dihapus: {i>First Keywordsful Paint<i}, CPU Pertama Tidak Ada Aktivitas, dan FID Potensi Maksimal. Bobot metrik yang tersisa telah dimodifikasi untuk menekankan interaktivitas thread utama dan prediktabilitas tata letak.

Sebagai perbandingan, berikut adalah penilaian versi 5:

Fase	Nama Metrik	Weight
Lebih awal (23%)	First Contentful Paint (FCP)	23%
Menengah (34%)	Indeks Kecepatan (SI)	27%
	Gambar Pertama yang Bermakna (FMP)	7%
Selesai (46%)	Waktu untuk Interaktif (TTI)	33%
	CPU Pertama Tidak Ada Aktivitas (FCI)	13%
Thread Utama	FID Potensi Maksimal	0%

Beberapa sorotan tentang perubahan skor antara Lighthouse versi 5 dan 6:

• Bobot TTI telah berkurang dari 33% menjadi 15%. Ini adalah tanggapan langsung dari pengguna masukan tentang variabilitas TTI, serta inkonsistensi dalam pengoptimalan metrik yang mengarah ke pengalaman pengguna yang lebih baik. TTI masih merupakan sinyal yang berguna saat halaman sepenuhnya interaktif, namun dengan TBT sebagai komplementer–variabilitas berkurang. Dengan perubahan skor ini, kami berharap developer terdorong lebih efektif untuk mengoptimalkan interaktivitas pengguna.
• Bobot FCP telah berkurang dari 23% menjadi 15%. Hanya mengukur saat piksel pertama dicat (FCP) tidak memberi kita gambaran yang lengkap. Menggabungkannya dengan pengukuran kapan pengguna dapat untuk melihat hal yang kemungkinan besar penting bagi pengguna (LCP) mencerminkan pengalaman pemuatan dengan lebih baik.
• FID Potensi Maksimal tidak digunakan lagi. URL tersebut tidak lagi ditampilkan dalam laporan, tetapi yang masih tersedia di JSON. Sekarang sebaiknya lihat TBT untuk mengukur interaktivitas Anda bukannya mpFID.
• Gambar Pertama yang Penuh Makna tidak digunakan lagi. Metrik ini terlalu bervariasi dan tidak valid jalur menuju standardisasi karena implementasinya khusus untuk internal rendering Chrome. Meskipun beberapa tim merasa bahwa waktu FMP bermanfaat di situs mereka, metrik tidak akan menerima peningkatan tambahan.
• CPU Pertama Tidak Ada Aktivitas tidak digunakan lagi karena tidak cukup berbeda dengan TTI. TBT dan TTI sekarang merupakan metrik utama untuk interaktivitas.
• Bobot CLS relatif rendah, meskipun kami berharap dapat meningkatkannya dalam versi utama mendatang.

Perubahan skor

Bagaimana perubahan ini memengaruhi skor situs nyata? Kami telah memublikasikan analisis perubahan skor menggunakan dua {i>dataset<i}: kumpulan situs dan kumpulan situs statis dibuat dengan Eleventy. Singkatnya, ~20% situs mengalami peningkatan skor, ~30% hampir tidak memiliki perubahan, dan ~50% mengalami penurunan minimal lima poin.

Perubahan skor dapat dibagi menjadi tiga komponen utama:

• perubahan berat skor
• perbaikan bug pada implementasi metrik yang mendasarinya
• perubahan kurva skor individual

Perubahan bobot skor dan pengenalan tiga metrik baru mendorong sebagian besar skor keseluruhan perubahan. Metrik baru yang belum dioptimalkan developer untuk membawa bobot yang signifikan dalam versi 6 skor performa. Sementara skor kinerja rata-rata korpus uji dalam versi 5 sekitar 50, skor rata-rata pada metrik Total Blocking Time dan Largest Contentful Paint yang baru adalah sekitar 30. Secara bersama-sama, kedua metrik tersebut menyumbang 50% bobot dalam skor performa Lighthouse versi 6, jadi tentu saja sebagian besar situs mengalami penurunan.

Perbaikan bug pada komputasi metrik yang mendasarinya dapat menghasilkan skor yang berbeda. Hal ini memengaruhi situs yang relatif sedikit tetapi dapat memiliki dampak yang cukup besar dalam situasi tertentu. Secara keseluruhan, sekitar 8% situs mengalami peningkatan skor karena perubahan penerapan metrik dan sekitar 4% situs melihat skor penurunan karena perubahan penerapan metrik. Sekitar 88% situs tidak terpengaruh oleh perbaikan ini.

Perubahan kurva skor individual juga memengaruhi pergeseran skor keseluruhan, meskipun sangat sedikit. Rab secara berkala memastikan bahwa kurva skor selaras dengan metrik yang diamati di dokumentasi HTTPArchive set data. Mengecualikan situs yang terpengaruh oleh perubahan penerapan besar, penyesuaian pada kurva skor untuk masing-masing metrik meningkatkan skor sekitar 3% situs dan menurunkan skor sekitar 4% situs. Sekitar 93% situs tidak terpengaruh oleh perubahan ini.

Kalkulator penskoran

Kami telah memublikasikan kalkulator skor untuk membantu Anda mempelajari penskoran kinerja. Kalkulator juga memberi Anda perbandingan antara Lighthouse versi 5 dan 6 skor. Saat Anda menjalankan audit dengan Lighthouse 6.0, laporan tersebut dilengkapi dengan tautan ke kalkulator dengan hasil Anda yang sudah terisi.

Terima kasih banyak kepada Ana Tudor untuk upgrade alat pengukur.

Audit baru

JavaScript yang tidak digunakan

Kami memanfaatkan kode DevTools cakupan dalam audit baru: Tidak digunakan JavaScript.

Audit ini tidak sepenuhnya baru: audit ini ditambahkan di pertengahan 2017, tetapi karena overhead kinerja dinonaktifkan secara {i> default<i} untuk menjaga Lighthouse tetap secepat sebaik mungkin. Pengumpulan data cakupan ini jauh lebih efisien sekarang, jadi kami merasa nyaman untuk secara {i>default<i}.

Audit aksesibilitas

Lighthouse menggunakan library axis-core yang indah untuk mendukung aksesibilitas. Di Lighthouse 6.0, kami telah menambahkan audit berikut:

• aria-hidden-body
• aria-tersembunyi-fokus
• aria-input-field-name
• aria-toggle-field-name
• form-field-multiple-labels
• urutan judul
• duplikasi-id-aktif
• duplikasi-id-aria

Ikon dapat disamarkan

Ikon yang dapat disamarkan adalah format ikon baru yang membuat ikon untuk PWA Anda tampak bagus di semua jenis perangkat. Untuk membantu PWA Anda terlihat sebaik mungkin, kami telah memperkenalkan audit baru untuk memeriksa apakah manifest.json Anda mendukung format baru ini.

Deklarasi himpunan karakter

Elemen charset meta mendeklarasikan encoding karakter yang harus digunakan menafsirkan dokumen HTML. Jika elemen ini tidak ada, atau jika dideklarasikan di akhir dokumen, {i>browser<i} menggunakan sejumlah heuristik untuk menebak pengkodean mana yang harus digunakan. Jika browser salah menebak, dan elemen charset meta yang terlambat ditemukan, parser umumnya menampilkan semua pekerjaan yang telah dilakukan sejauh ini dan memulai dari awal, yang menyebabkan pengalaman buruk bagi pengguna. Fitur baru ini audit memverifikasi bahwa laman memiliki pengkodean karakter yang valid dan didefinisikan di awal dan di awal.

CI Mercusuar

Di CDS November lalu kami mengumumkan Lighthouse CI, platform open source Node CLI dan server yang melacak hasil Lighthouse pada setiap commit dalam continuous integration Anda pipeline, dan kami telah melangkah jauh sejak rilis alfa. CI Lighthouse kini memiliki dukungan untuk berbagai penyedia CI termasuk Travis, Circle, GitLab, dan GitHub Actions. Siap di-deploy image Docker siapkan mudah, dan desain dasbor yang komprehensif kini mengungkap tren di setiap kategori dan metrik di Lighthouse untuk analisis terperinci.

Mulai gunakan Lighthouse CI pada project Anda sekarang dengan mengikuti panduan memulai.

Nama panel Chrome DevTools diganti

Kami telah mengganti nama panel Audits menjadi panel Lighthouse. Sudah cukup katanya!

Bergantung pada ukuran jendela DevTools, panel mungkin berada di belakang tombol ». Anda dapat menarik tab untuk mengubah urutan.

Untuk membuka panel dengan cepat dengan Command menu:

1. Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
2. Tekan Control+Shift+P (atau Command+Shift+P di Mac) untuk buka menu Command.
3. Mulai ketik "Lighthouse".
4. Tekan Enter.

Emulasi seluler

Lighthouse mengikuti pola pikir {i>mobile-first<i}. Masalah kinerja lebih jelas dalam kondisi seluler, namun pengembang sering kali tidak menguji dalam kondisi ini. Inilah alasan {i>default-<i}nya di Lighthouse menerapkan emulasi seluler. Emulasi terdiri dari:

• Menyimulasikan kondisi jaringan dan CPU lambat (melalui mesin simulasi yang disebut Lantern).
• Emulasi layar perangkat (hal yang sama dengan yang ditemukan di Chrome DevTools).

Sejak awal, Lighthouse telah menggunakan Nexus 5X sebagai perangkat referensinya. Dalam beberapa tahun terakhir, insinyur kinerja telah menggunakan Moto G4 untuk tujuan pengujian. Sekarang Lighthouse mengikutinya dan telah mengubah perangkat referensinya ke Moto G4. Dalam praktiknya, perubahan ini tidak terlalu terlihat, tetapi berikut adalah semua perubahan yang dapat dideteksi oleh halaman web:

• Ukuran layar diubah dari 412x660 px menjadi 360x640 px.
• String agen pengguna sedikit diubah, yaitu bagian perangkat yang sebelumnya Nexus 5 Build/MRA58N sekarang akan menjadi Moto G (4).

Mulai Chrome 81, Moto G4 juga tersedia di daftar emulasi perangkat Chrome DevTools.

Ekstensi browser

Tujuan Ekstensi Chrome untuk Lighthouse telah menjadi cara yang mudah untuk menjalankan Lighthouse secara lokal. Sayangnya, dukungan ini rumit. Kami merasa bahwa karena panel Lighthouse Chrome DevTools merupakan pengalaman yang lebih baik (laporan terintegrasi dengan panel lain), kami dapat mengurangi beban teknis kami dengan menyederhanakan Chrome .

Alih-alih menjalankan Lighthouse secara lokal, ekstensi kini menggunakan PageSpeed Insights Google Cloud Platform. Kami menyadari bahwa hal ini akan tidak menjadi pengganti yang memadai bagi sebagian pengguna kami. Berikut adalah perbedaan utamanya:

• PageSpeed Insights tidak dapat mengaudit situs non-publik, karena dijalankan melalui remote server dan bukan instance Chrome lokal Anda. Jika Anda perlu mengaudit situs web non-publik, panel Lighthouse DevTools, atau Node CLI.
• PageSpeed Insights tidak dijamin akan menggunakan rilis Lighthouse terbaru. Jika Anda ingin menggunakan rilis terbaru, menggunakan Node CLI. Ekstensi browser akan mendapatkan update dalam waktu sekitar 1-2 minggu setelah rilis.
• PageSpeed Insights adalah Google API. Dengan menggunakannya, berarti Anda menerima Persyaratan Google API Layanan. Jika Anda tidak ingin atau tidak ingin menyetujui persyaratan layanan, gunakan panel Lighthouse DevTools, atau Node CLI.

Kabar baiknya adalah bahwa menyederhanakan cerita produk memungkinkan kita untuk fokus pada teknik menyelesaikan semua jenis permasalahan. Hasilnya, kami merilis Lighthouse Firefox ekstensi!

Anggaran

Lighthouse 5.0 memperkenalkan anggaran performa mendukung penambahan nilai minimum untuk jumlah setiap jenis resource (seperti skrip, gambar, atau css) yang dapat ditayangkan oleh halaman.

Lighthouse 6.0 menambahkan dukungan untuk metrik penganggaran, sehingga kini Anda dapat menetapkan nilai minimum untuk metrik tertentu seperti FCP. Untuk saat ini, anggaran hanya tersedia ke Node CLI dan Lighthouse CI.

Link lokasi sumber

Beberapa masalah yang ditemukan Lighthouse tentang suatu laman dapat ditelusuri kembali ke baris tertentu kode sumber dan laporannya akan menyatakan file dan baris yang tepat dan relevan. Untuk memudahkan jelajahi di DevTools, mengklik lokasi yang ditentukan dalam laporan akan membuka file yang relevan di panel Sources.

DevTools menampilkan baris kode persis yang menyebabkan masalah.

Di cakrawala

Lighthouse mulai bereksperimen dengan mengumpulkan peta sumber untuk mendukung fitur baru, seperti:

• Mendeteksi modul duplikat dalam paket JavaScript.
• Mendeteksi polyfill atau transformasi yang berlebihan dalam kode yang dikirim ke browser modern.
• Meningkatkan audit JavaScript yang Tidak Digunakan untuk memberikan perincian tingkat modul.
• Visualisasi peta hierarki menyoroti modul yang memerlukan tindakan.
• Menampilkan kode sumber asli untuk item laporan dengan "lokasi sumber".

Audit JavaScript yang Tidak Digunakan yang menggunakan peta sumber untuk menampilkan kode yang tidak digunakan dalam modul paket tertentu.

Fitur ini akan diaktifkan secara default di versi Lighthouse yang akan datang. Untuk saat ini, Anda dapat melihat Audit eksperimental Lighthouse dengan tanda CLI berikut:

lighthouse https://web.dev --view --preset experimental

Terima kasih!

Terima kasih telah menggunakan Lighthouse dan memberikan masukan. Masukan Anda membantu kami meningkatkan kualitas Lighthouse dan kami harap Lighthouse 6.0 akan memudahkan Anda meningkatkan kinerja situs web.

Apa yang dapat Anda lakukan selanjutnya?

• Buka Chrome Canary dan coba panel Lighthouse.
• Gunakan Node CLI: npm install -g lighthouse && lighthouse https://yoursite.com --view.
• Jalankan Lighthouse CI dengan pada proyek Anda.
• Tinjau dokumentasi audit Lighthouse.
• Selamat membuat web menjadi lebih baik!

Kami sangat antusias dengan web dan kami senang bekerja dengan komunitas developer untuk membangun peralatan untuk membantu meningkatkan kualitas web. Lighthouse adalah proyek {i>open source<i} dan kami sangat berterima kasih kepada semua kontributor yang membantu dalam segala hal mulai dari perbaikan kesalahan ketik hingga pemfaktoran ulang dokumentasi hingga audit. Tertarik untuk berkontribusi? Kunjungi repo GitHub Lighthouse.