Evolusi Lighthouse: continuous integration, formula skor performa baru, dan lainnya

Dapatkan update dan insight terbaru Lighthouse dari Chrome Developer Summit 2019.

Elizabeth Sweeny

Dalam diskusi Speed Tooling Evolutions di Chrome Developer Summit (CDS), Paul Irish dan saya mempresentasikan produk dan fitur terbaru dari Google yang dapat membantu Anda membuat dan mempertahankan pengalaman yang sangat cepat bagi semua pengguna. Inti cerita tersebut adalah tambahan dalam rangkaian Lighthouse untuk alat pemantauan performa.

Rilis alfa Lighthouse CI

Tim Lighthouse telah meluncurkan versi alfa Lighthouse CI, yaitu produk continuous integration baru yang memungkinkan Anda menjalankan Lighthouse pada setiap commit sebelum mendorong ke produksi. Lighthouse CI menjalankan Lighthouse beberapa kali, menyatakan batas audit atau metrik statis, lalu mengupload laporan Lighthouse ke server untuk diffing visual dan histori skor kategori dasar. Konfigurasi anggaran.json yang ada berfungsi dengan lancar bersama sintaksis ekspresif baru untuk menyatakan hasil kategori atau audit Lighthouse apa pun.

Lighthouse CI mendukung Travis CI, Circle CI, dan GitHub Actions serta layanan CI berbasis Ubuntu atau container apa pun dengan beberapa konfigurasi. Anda dapat menginstal server Lighthouse CI di infrastruktur lokal atau menggunakan image Docker untuk penyiapan instan. Penyimpanan laporan Lighthouse sementara yang gratis, bersifat publik, dan sementara tersedia sebagai alternatif untuk segera memulai.

Segera hadir: Pembaruan skor performa

Akan ada perubahan pada skor Performa Lighthouse versi 6. Pada versi 5 (per November 2019), Lighthouse memiliki lima metrik yang ditimbang dan dipadukan untuk membentuk skor Performa 0-100: First Contentful Paint, Speed Index, First Artifactful Paint, Time to Interactive, dan First CPU Idle.

Lihat penskoran performa Lighthouse untuk mengetahui informasi mendetail.

Di Lighthouse versi 6, metrik baru, Largest Contentful Paint (LCP) dan Total Blocking Time (TBT), akan menggantikan First CPU Idle (FCI) dan First Artifactful Paint (FMP). Bobot masing-masing dari kelima metrik akan disesuaikan untuk menyeimbangkan berbagai fase ukuran beban dan interaktivitas dengan lebih baik.

Catatan: Pergeseran Tata Letak Kumulatif (CLS) adalah metrik baru lainnya yang masih disempurnakan dan pada akhirnya akan menjadi bagian dari skor Performa Lighthouse.

Tim Lighthouse masih berupaya untuk memastikan bahwa semua kurva skor disesuaikan dengan baik, dan metriknya matang serta diuji secara menyeluruh. Mereka berencana mengirimkan skor Performa Lighthouse v6 pada Januari 2020.

Catatan: Performance engineer terkadang menemukan hasil alat kecepatan sulit direproduksi karena dua tantangan berbeda, yaitu variasi dan inkonsistensi lintas lingkungan. Variabilitas adalah masalah terkait perubahan angka meskipun lingkungan pengujian tetap sama. Inkonsistensi lintas-lingkungan adalah masalah mendapatkan hasil yang berbeda saat menjalankan pengujian di halaman yang sama, tetapi di lingkungan yang berbeda (misalnya, DevTools dan PageSpeed Insights). Meskipun tim Lighthouse sedang berupaya mengurangi variabilitas, sebaiknya pahami sumber variabilitas dan cara mengatasinya. Tim Lighthouse juga sedang menyelidiki metode kalibrasi untuk mengurangi perbedaan di antara lingkungan, tetapi wajar saja bahwa kondisi dan hardware yang berbeda akan menyebabkan pengukuran yang berbeda—setidaknya untuk saat ini.

Paket Tumpukan Lighthouse

Lighthouse dapat otomatis mendeteksi apakah situs menggunakan framework atau sistem pengelolaan konten (CMS) dan menyertakan saran khusus stack dalam laporan. Stack Packs menambahkan rekomendasi khusus, yang diseleksi oleh pakar komunitas (seperti Anda), selain audit inti laporan Lighthouse.

Saat ini, ada Stack Packs untuk Angular, WordPress, Magento, React, dan AMP. Untuk membuat Stack Pack Anda sendiri, buka repositori GitHub atau hubungi tim Lighthouse.

Segera hadir: Plugin Lighthouse sebagai Ekstensi Chrome

Plugin Lighthouse adalah cara lain yang dapat Anda manfaatkan dari ekstensibilitas Lighthouse. Ada banyak pemeriksaan kualitas yang saat ini tidak dicakup oleh audit inti Lighthouse, baik karena pemeriksaan tersebut hanya berlaku untuk sebagian developer atau karena tim belum memiliki bandwidth untuk membuat audit.

Plugin Lighthouse memungkinkan pakar komunitas menerapkan serangkaian pemeriksaan baru yang dapat dijalankan Lighthouse dan ditambahkan ke laporan sebagai kategori baru. Saat ini, plugin hanya berfungsi di Lighthouse CLI, tetapi tujuannya adalah untuk mengaktifkan berjalannya plugin di panel Audits DevTools juga.

Plugin Komunitas di panel Audit DevTools (beta)

Saat pengguna menginstal ekstensi plugin Lighthouse dari Chrome Web Store, DevTools akan mengidentifikasi plugin yang terinstal dan menawarkannya sebagai opsi di panel Audits. Tim Lighthouse akan membangun dukungan untuk pendekatan plugin dalam beberapa bulan mendatang, jadi nantikan kabar terbarunya. Sementara itu, Anda kini dapat membuat plugin sebagai modul node dan membuatnya dapat diakses oleh semua pengguna Lighthouse melalui CLI.

Pelajari lebih lanjut

Untuk detail selengkapnya tentang Lighthouse dan update alat performa lainnya dari CDS 2019, tonton pembahasan tentang evolusi alat Kecepatan:

Masukan Anda sangat berharga untuk membuat Lighthouse lebih baik, jadi lanjutkan dan coba Lighthouse CI, tulis Stack Pack, atau buat Plugin Lighthouse dan beri tahu kami pendapat Anda.