Metrik baru, pembaruan Skor performa, audit baru, dan lainnya.
Hari ini kami merilis Lighthouse 6.0.
Lighthouse adalah alat audit situs otomatis yang membantu developer dengan peluang dan diagnostik untuk meningkatkan pengalaman pengguna situs mereka. Alat ini tersedia di Chrome DevTools, npm (sebagai modul Node dan CLI), atau sebagai ekstensi browser (di Chrome dan Firefox). Cloud Bigtable mendukung banyak layanan Google, termasuk PageSpeed Insights.
Lighthouse 6.0 langsung tersedia di npm dan di Chrome Canary. Layanan Google lainnya yang memanfaatkan Lighthouse akan mendapatkan update ini pada akhir bulan. Fitur ini akan tersedia di Chrome Stabil di 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 dilengkapi dengan sejumlah besar perubahan yang tercantum dalam log perubahan 6.0. Kami akan membahas sorotan dalam artikel ini.
- Metrik baru
- Pembaruan skor performa
- Audit baru
- Lighthouse CI
- Panel Chrome DevTools yang diganti namanya
- Emulasi seluler
- Ekstensi browser
- Anggaran
- Link lokasi sumber
- Di cakrawala
- Terima kasih.
Metrik baru
Lighthouse 6.0 memperkenalkan tiga metrik baru ke laporan. Dua dari metrik baru ini, yaitu Largest Contentful Paint (LCP) dan Cumulative Layout Shift (CLS), adalah implementasi lab dari Core Web Vitals.
Largest Contentful Paint (LCP)
Largest Contentful Paint (LCP) adalah pengukuran pengalaman pemuatan yang dirasakan. Ini menandai titik selama pemuatan halaman saat konten utama–atau "terbesar"–telah dimuat dan terlihat oleh pengguna. LCP adalah pelengkap penting untuk First Contentful Paint (FCP) yang hanya menangkap awal pengalaman pemuatan. LCP memberikan sinyal kepada developer tentang kecepatan pengguna sebenarnya dapat melihat konten halaman. Skor LCP di bawah 2,5 detik dianggap 'Baik'.
Untuk informasi selengkapnya, tonton penjelasan mendalam tentang LCP oleh Paul Irish.
Pergeseran Tata Letak Kumulatif (CLS)
Pergeseran Tata Letak Kumulatif (CLS) adalah pengukuran stabilitas visual. Metrik ini mengukur seberapa banyak konten halaman bergeser secara visual. Skor CLS yang rendah adalah sinyal bagi developer bahwa pengguna mereka tidak mengalami pergeseran konten yang tidak semestinya; skor CLS di bawah 0,10 dianggap 'Baik'.
CLS di lingkungan lab diukur hingga akhir pemuatan halaman. Sedangkan di lapangan, Anda dapat mengukur CLS hingga interaksi pengguna pertama atau menyertakan semua input pengguna.
Untuk informasi selengkapnya, tonton pembahasan mendalam tentang CLS oleh Annie Sullivan.
Total Blocking Time (TBT)
Total Blocking Time (TBT) mengukur responsivitas pemuatan, 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). Metrik ini adalah metrik pendamping untuk TTI dan memberikan nuansa yang lebih beragam untuk mengukur aktivitas thread utama yang memblokir kemampuan pengguna untuk berinteraksi dengan halaman Anda.
Selain itu, TBT berkorelasi dengan baik dengan metrik kolom First Input Delay (FID), yang merupakan Core Web Vitals.
Pembaruan skor performa
Skor performa di Lighthouse dihitung dari gabungan berbobot beberapa metrik untuk meringkas kecepatan halaman. Berikut adalah formula skor performa 6.0.
Fase | Nama Metrik | Bobot Metrik |
---|---|---|
Awal (15%) | First Contentful Paint (FCP) | 15% |
Tengah (40%) | Speed Index (SI) | 15% |
Largest Contentful Paint (LCP) | 25% | |
Terlambat (15%) | Time To Interactive (TTI) | 15% |
Thread Utama (25%) | Total Blocking Time (TBT) | 25% |
Prediktibilitas (5%) | Pergeseran Tata Letak Kumulatif (CLS) | 5% |
Meskipun tiga metrik baru telah ditambahkan, tiga metrik lama telah dihapus: First Meaningful Paint, First CPU Idle, dan Max Potential FID. Bobot metrik yang tersisa telah diubah untuk menekankan interaktivitas thread utama dan prediktabilitas tata letak.
Sebagai perbandingan, berikut adalah penskoran versi 5:
Fase | Nama Metrik | Weight |
---|---|---|
Awal (23%) | First Contentful Paint (FCP) | 23% |
Tengah (34%) | Speed Index (SI) | 27% |
First Meaningful Paint (FMP) | 7% | |
Selesai (46%) | Time to Interactive (TTI) | 33% |
CPU Tidak Ada Aktivitas Pertama (FCI) | 13% | |
Thread Utama | FID Potensi Maksimal | 0% |
Beberapa sorotan perubahan penskoran antara Lighthouse versi 5 dan 6:
- Bobot TTI telah dikurangi dari 33% menjadi 15%. Hal ini merupakan respons langsung terhadap masukan pengguna tentang variabilitas TTI, serta inkonsistensi dalam pengoptimalan metrik yang mengarah pada peningkatan pengalaman pengguna. TTI masih merupakan sinyal yang berguna saat halaman sepenuhnya interaktif, tetapi dengan TBT sebagai komplemen–variabilitas akan berkurang. Dengan perubahan penskoran ini, kami berharap developer lebih didorong secara efektif untuk mengoptimalkan interaksi pengguna.
- Bobot FCP telah dikurangi dari 23% menjadi 15%. Mengukur hanya saat piksel pertama digambar (FCP) tidak memberikan gambaran lengkap. Menggabungkannya dengan mengukur kapan pengguna dapat melihat hal yang paling mereka minati (LCP) akan lebih mencerminkan pengalaman pemuatan.
- FID Potensi Maksimal tidak digunakan lagi. Kolom ini tidak lagi ditampilkan dalam laporan, tetapi masih tersedia dalam JSON. Sebaiknya lihat TBT untuk mengukur interaktivitas Anda, bukan mpFID.
- First Meaningful Paint tidak digunakan lagi. Metrik ini terlalu bervariasi dan tidak memiliki jalur yang layak untuk standardisasi karena implementasinya khusus untuk internal rendering Chrome. Meskipun beberapa tim menganggap waktu FMP bermanfaat di situs mereka, metrik ini tidak akan menerima peningkatan tambahan.
- CPU Pertama Tanpa Aktivitas tidak digunakan lagi karena tidak cukup berbeda dengan TTI. TBT dan TTI adalah metrik yang paling sering digunakan untuk interaktivitas saat ini.
- Bobot CLS relatif rendah, meskipun kami berharap dapat meningkatkannya di versi utama mendatang.
Perubahan skor
Bagaimana pengaruh perubahan ini terhadap skor situs sebenarnya? Kami telah memublikasikan analisis perubahan skor menggunakan dua set data: kumpulan situs umum dan kumpulan situs statis yang dibuat dengan Eleventy. Singkatnya, ~20% situs mengalami skor yang jauh lebih tinggi, ~30% hampir tidak mengalami perubahan, dan ~50% mengalami penurunan setidaknya lima poin.
Perubahan skor dapat dibagi menjadi tiga komponen utama:
- perubahan bobot skor
- perbaikan bug pada penerapan metrik yang mendasarinya
- perubahan kurva skor individual
Perubahan bobot skor dan pengenalan tiga metrik baru mendorong sebagian besar perubahan skor keseluruhan. Metrik baru yang belum dioptimalkan oleh developer memiliki bobot yang signifikan dalam skor performa versi 6. Meskipun skor performa rata-rata korpus pengujian di versi 5 adalah sekitar 50, skor rata-rata pada metrik Total Blocking Time dan Largest Contentful Paint yang baru adalah sekitar 30. Kedua metrik tersebut memiliki bobot 50% dalam skor performa Lighthouse versi 6, sehingga wajar jika 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 mengalami penurunan skor karena perubahan penerapan metrik. Sekitar 88% situs tidak terpengaruh oleh perbaikan ini.
Perubahan kurva skor individual juga memengaruhi pergeseran skor secara keseluruhan, meskipun sangat sedikit. Kami secara berkala memastikan bahwa kurva skor selaras dengan metrik yang diamati dalam set data HTTPArchive. Tidak termasuk situs yang terpengaruh oleh perubahan penerapan utama, penyesuaian kecil pada kurva skor untuk setiap metrik meningkatkan skor sekitar 3% situs dan menurunkan skor sekitar 4% situs. Sekitar 93% situs tidak terpengaruh oleh perubahan ini.
Kalkulator skor
Kami telah memublikasikan kalkulator penskoran untuk membantu Anda mempelajari penskoran performa. Kalkulator ini juga memberi Anda perbandingan antara skor Lighthouse versi 5 dan 6. Saat Anda menjalankan audit dengan Lighthouse 6.0, laporan akan dilengkapi dengan link ke kalkulator yang berisi hasil Anda.
Audit baru
JavaScript yang tidak digunakan
Kami memanfaatkan cakupan kode DevTools dalam audit baru: JavaScript yang Tidak Digunakan.
Audit ini tidak sepenuhnya baru: audit ini ditambahkan pada pertengahan tahun 2017, tetapi karena overhead performa, audit ini dinonaktifkan secara default agar Lighthouse tetap secepat mungkin. Mengumpulkan data cakupan ini jauh lebih efisien sekarang, sehingga kami merasa nyaman mengaktifkannya secara default.
Audit aksesibilitas
Lighthouse menggunakan library axe-core yang luar biasa untuk mendukung kategori aksesibilitas. Di Lighthouse 6.0, kami telah menambahkan audit berikut:
aria-hidden-body
aria-hidden-focus
aria-input-field-name
aria-toggle-field-name
form-field-multiple-labels
heading-order
duplicate-id-active
duplicate-id-aria
Ikon maskable
Ikon yang dapat disamarkan adalah format ikon baru yang membuat ikon untuk PWA Anda terlihat 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.
Pernyataan set karakter
Elemen meta charset mendeklarasikan encoding karakter yang harus digunakan untuk menafsirkan dokumen HTML. Jika elemen ini tidak ada, atau jika dideklarasikan terlambat dalam dokumen, browser akan menggunakan sejumlah heuristik untuk menebak encoding mana yang harus digunakan. Jika browser menebak secara salah, dan elemen meta charset terlambat ditemukan, parser umumnya akan menghapus semua pekerjaan yang telah dilakukan sejauh ini dan memulai dari awal, sehingga menyebabkan pengalaman yang buruk bagi pengguna. Audit baru ini memverifikasi bahwa halaman memiliki encoding karakter yang valid dan ditentukan sejak awal.
CI Lighthouse
Pada CDS November lalu, kami mengumumkan Lighthouse CI, CLI Node open source dan server yang melacak hasil Lighthouse pada setiap commit di pipeline integrasi berkelanjutan Anda, dan kami telah melakukan banyak hal sejak rilis alfa. Lighthouse CI kini memiliki dukungan untuk sejumlah penyedia CI, termasuk Travis, Circle, GitLab, dan GitHub Actions. Image docker yang siap di-deploy memudahkan penyiapan, dan desain ulang dasbor yang komprehensif kini mengungkapkan tren di setiap kategori dan metrik di Lighthouse untuk analisis mendetail.
Mulai gunakan Lighthouse CI di project Anda sekarang dengan mengikuti panduan memulai kami.
Panel Chrome DevTools diganti namanya
Kami telah mengganti nama panel Audit menjadi panel Lighthouse. Cukup sekian.
Bergantung pada ukuran jendela DevTools, panel mungkin berada di belakang tombol »
. Anda dapat menarik tab untuk mengubah urutan.
Untuk menampilkan panel dengan menu Perintah dengan cepat:
- Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
- Tekan
Control+Shift+P
(atauCommand+Shift+P
di Mac) untuk membuka menu Command. - Mulai ketik "Lighthouse".
- Tekan
Enter
.
Emulasi seluler
Lighthouse mengikuti pola pikir mobile-first. Masalah performa lebih terlihat dalam kondisi perangkat seluler yang umum, tetapi developer sering kali tidak melakukan pengujian dalam kondisi ini. Inilah sebabnya konfigurasi default di Lighthouse menerapkan emulasi perangkat seluler. Emulasi terdiri dari:
- Simulasi kondisi jaringan dan CPU lambat (melalui mesin simulasi yang disebut Lantern).
- Emulasi layar perangkat (sama seperti yang ditemukan di Chrome DevTools).
Sejak awal, Lighthouse telah menggunakan Nexus 5X sebagai perangkat referensinya. Dalam beberapa tahun terakhir, sebagian besar engineer performa telah menggunakan Moto G4 untuk tujuan pengujian. Sekarang Lighthouse mengikutinya dan telah mengubah perangkat referensinya menjadi 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 piksel menjadi 360x640 piksel.
- String agen pengguna sedikit berubah, bagian perangkat yang sebelumnya
Nexus 5 Build/MRA58N
sekarang menjadiMoto G (4)
.
Mulai Chrome 81, Moto G4 juga tersedia di daftar emulasi perangkat Chrome DevTools.
Ekstensi browser
Ekstensi Chrome untuk Lighthouse telah menjadi cara yang mudah untuk menjalankan Lighthouse secara lokal. Sayangnya, dukungan untuk aplikasi ini sangat rumit. Kami merasa bahwa karena panel Lighthouse Chrome DevTools adalah pengalaman yang lebih baik (laporan terintegrasi dengan panel lain), kami dapat mengurangi overhead engineering dengan menyederhanakan ekstensi Chrome.
Alih-alih menjalankan Lighthouse secara lokal, ekstensi kini menggunakan PageSpeed Insights API. Kami menyadari bahwa hal ini tidak akan menjadi pengganti yang memadai bagi sebagian pengguna kami. Berikut adalah perbedaan utamanya:
- PageSpeed Insights tidak dapat mengaudit situs non-publik, karena dijalankan melalui server jarak jauh, bukan instance Chrome lokal Anda. Jika Anda perlu mengaudit situs non-publik, gunakan panel Lighthouse DevTools, atau Node CLI.
- PageSpeed Insights tidak dijamin akan menggunakan rilis Lighthouse terbaru. Jika Anda ingin menggunakan rilis terbaru, gunakan Node CLI. Ekstensi browser akan mendapatkan update ~1-2 minggu setelah rilis.
- PageSpeed Insights adalah Google API, dan penggunaannya berarti menyetujui Persyaratan Layanan Google API. Jika Anda tidak ingin atau tidak dapat menyetujui persyaratan layanan, gunakan panel Lighthouse DevTools, atau Node CLI.
Kabar baiknya adalah menyederhanakan cerita produk memungkinkan kami berfokus pada masalah teknik lainnya. Oleh karena itu, kami merilis ekstensi Firefox Lighthouse.
Anggaran
Lighthouse 5.0 memperkenalkan anggaran performa yang mendukung penambahan nilai minimum untuk jumlah setiap jenis resource (seperti skrip, gambar, atau css) yang dapat ditayangkan halaman.
Lighthouse 6.0 menambahkan dukungan untuk metrik anggaran, sehingga kini Anda dapat menetapkan nilai minimum untuk metrik tertentu seperti FCP. Untuk saat ini, anggaran hanya tersedia untuk Node CLI dan Lighthouse CI.
Link lokasi sumber
Beberapa masalah yang ditemukan Lighthouse tentang halaman dapat ditelusuri kembali ke baris kode sumber tertentu dan laporan akan menyatakan file dan baris yang relevan secara tepat. Agar mudah dijelajahi di DevTools, mengklik lokasi yang ditentukan dalam laporan akan membuka file yang relevan di panel Sources.
Di cakrawala
Lighthouse telah 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.
- Memperkuat audit JavaScript yang Tidak Digunakan untuk memberikan perincian tingkat modul.
- Visualisasi peta hierarki yang menyoroti modul yang memerlukan tindakan.
- Menampilkan kode sumber asli untuk item laporan dengan "lokasi sumber".
Fitur ini akan diaktifkan secara default di versi Lighthouse mendatang. Untuk saat ini, Anda dapat melihat audit eksperimental Lighthouse dengan flag CLI berikut:
lighthouse https://web.dev --view --preset experimental
Terima kasih!
Terima kasih telah menggunakan Lighthouse dan memberikan masukan. Masukan Anda membantu kami meningkatkan Lighthouse, dan kami harap Lighthouse 6.0 akan mempermudah Anda meningkatkan performa situs.
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 project Anda.
- Tinjau dokumentasi audit Lighthouse.
- Selamat bersenang-senang membuat web menjadi lebih baik.
Kami menyukai web dan senang bekerja sama dengan komunitas developer untuk membuat alat guna membantu meningkatkan kualitas web. Lighthouse adalah project open source dan kami mengucapkan terima kasih banyak kepada semua kontributor yang membantu dalam segala hal, mulai dari perbaikan kesalahan ketik hingga pemfaktoran ulang dokumentasi hingga audit baru. Tertarik untuk berkontribusi? Buka GitHub repo Lighthouse.