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

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

Elizabeth Sweeny
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.

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.

Perbandingan formula skor performa Lighthouse di versi 5 dan 6.

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.

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.

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.

Rekomendasi laporan Lighthouse untuk menunda gambar di luar layar di aplikasi React.

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

Ikon plugin Lighthouse.

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.

Panel Audit Chrome DevTools dengan opsi untuk menjalankan plugin Lighthouse untuk Iklan Penayang Google dan Pengalaman Pengguna.
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.