Lighthouse adalah alat open source otomatis untuk membantu Anda meningkatkan kualitas halaman web. Anda dapat menjalankannya di halaman web apa pun, publik atau memerlukan otentikasi. Audit kompetitif mencakup audit untuk performa, aksesibilitas, progressive web app, SEO, dan lainnya.
Anda dapat menjalankan Lighthouse di Chrome DevTools, dari command line, atau sebagai modul Node. Beri Lighthouse URL untuk diaudit, Lighthouse akan menjalankan serangkaian audit terhadap halaman, lalu menghasilkan laporan tentang seberapa baik performa halaman tersebut. Gunakan audit yang gagal sebagai indikator tentang cara memperbaiki halaman. Setiap audit memiliki referensi yang menjelaskan pentingnya audit tersebut, serta cara memperbaikinya.
Anda juga dapat menggunakan Lighthouse CI untuk mencegah regresi di situs Anda.
Mulai
Pilih alur kerja Lighthouse yang paling sesuai untuk Anda:
- Di Chrome DevTools. Audit halaman yang memerlukan autentikasi dan membaca laporan Anda dalam format yang mudah digunakan, langsung dari browser.
- Dari command line. Otomatiskan operasi Lighthouse dengan skrip shell.
- Sebagai modul Node. Integrasikan Lighthouse ke dalam sistem integrasi berkelanjutan Anda.
- Dari UI web. Jalankan Lighthouse dan tautkan ke laporan, tidak perlu menginstal.
Jalankan Lighthouse di Chrome DevTools
Lighthouse memiliki panelnya sendiri di Chrome DevTools. Untuk menjalankan laporan:
- Download Google Chrome untuk Desktop.
- Buka Chrome, lalu buka URL yang ingin Anda audit. Anda dapat mengaudit URL apa pun di web.
- Buka Chrome DevTools.
Klik tab Lighthouse.
Klik Analisis pemuatan halaman. DevTools menampilkan daftar kategori audit. Biarkan semuanya aktif.
Klik Jalankan audit. Setelah 30 hingga 60 detik, Lighthouse akan memberi Anda laporan tentang halaman tersebut.
Menginstal dan menjalankan alat command line Node
Untuk menginstal modul Node:
- Download Google Chrome untuk Desktop.
- Instal Node versi Dukungan Jangka Panjang saat ini.
- Instal Lighthouse. Flag
-g
akan menginstalnya sebagai modul global.
npm install -g lighthouse
Untuk menjalankan audit:
lighthouse <url>
Untuk melihat semua opsinya:
lighthouse --help
Menjalankan modul Node secara terprogram
Baca artikel Menggunakan secara terprogram untuk contoh menjalankan Lighthouse secara terprogram, sebagai modul Node.
Jalankan PageSpeed Insights
Untuk menjalankan Lighthouse di PageSpeed Insights:
- Buka PageSpeed Insights.
- Masukkan URL halaman web.
Klik Analisis.
Menjalankan Lighthouse sebagai Ekstensi Chrome
Untuk menginstal ekstensi:
- Download Google Chrome untuk Desktop.
- Instal Ekstensi Chrome Lighthouse dari Chrome Web Store.
Untuk menjalankan audit:
- Di Chrome, buka halaman yang ingin Anda audit.
Klik Lighthouse, di samping kolom URL Chrome atau di menu ekstensi Chrome. Setelah diklik, menu Lighthouse akan diperluas.
Klik Hasilkan laporan. Lighthouse menjalankan auditnya terhadap halaman yang saat ini difokuskan, lalu membuka tab baru dengan laporan hasilnya.
Membagikan dan melihat laporan secara online
Gunakan Lighthouse Viewer untuk melihat dan membagikan laporan secara online.
Membagikan laporan sebagai JSON
Lighthouse Viewer memerlukan output JSON dari laporan Lighthouse. Buat output JSON sebagai berikut:
- Dari laporan Lighthouse. Klik untuk menu, lalu klik Save as JSON
- Command line. Jalankan:
shell lighthouse --output json --output-path <path/for/output.json>
Untuk melihat data laporan:
- Buka Lighthouse Viewer.
- Tarik file JSON ke Penampil, atau klik di mana saja di Penampil untuk membuka navigator file dan memilih file.
Membagikan laporan sebagai GitHub Gist
Jika tidak ingin meneruskan file JSON secara manual, Anda juga dapat membagikan laporan sebagai ringkasan GitHub rahasia. Salah satu manfaat ringkasan adalah kontrol versi gratis.
Untuk mengekspor laporan sebagai ringkasan dari laporan:
- Klik menu
https://googlechrome.github.io/lighthouse/viewer/
.
, lalu klik
Buka di Penampil. Laporan ini terletak di
- Dari Penampil, klik menu , lalu klik Simpan sebagai Gist. Saat pertama kali melakukannya, pop-up akan meminta izin untuk mengakses data GitHub dasar Anda, serta untuk membaca dan menulis ke gist Anda.
Untuk mengekspor laporan sebagai ringkasan dari Lighthouse versi CLI,
buat ringkasan secara manual dan salin-tempel output JSON
laporan ke ringkasan. Nama file gist yang berisi output JSON harus
diakhiri dengan .lighthouse.report.json
. Baca artikel Membagikan laporan sebagai JSON untuk mengetahui contoh cara membuat output JSON dari alat command line.
Untuk melihat laporan yang telah disimpan sebagai inti:
- Tambahkan
?gist=<ID>
ke URL Pelihat, dengan<ID>
adalah ID inti.text https://googlechrome.github.io/lighthouse/viewer/?gist=<ID>
- Buka Pelihat, lalu tempel URL ringkasan ke dalamnya.
Ekstensibilitas Lighthouse
Lighthouse bertujuan untuk memberikan panduan yang relevan dan dapat ditindaklanjuti oleh semua developer web. Untuk itu, ada dua fitur yang tersedia yang memungkinkan Anda menyesuaikan Lighthouse dengan kebutuhan spesifik Anda.
Paket stack
Developer menggunakan banyak teknologi yang berbeda (backend, sistem pengelolaan konten, dan framework JavaScript) untuk membangun halaman web mereka. Lighthouse tidak menampilkan rekomendasi umum, tetapi memberikan saran yang relevan dan dapat ditindaklanjuti, bergantung pada alat yang digunakan.
Dengan paket stack, Lighthouse dapat mendeteksi platform tempat situs Anda dibangun dan menampilkan rekomendasi berbasis stack tertentu. Rekomendasi ini ditentukan dan diseleksi oleh pakar dari komunitas.
Untuk memberikan kontribusi dalam bentuk paket stack, tinjau Panduan Berkontribusi.
Plugin Lighthouse
Plugin Lighthouse memungkinkan pakar domain memperluas fungsi Lighthouse untuk kebutuhan khusus komunitas mereka. Anda dapat memanfaatkan data yang dikumpulkan Lighthouse untuk membuat audit baru. Pada intinya, plugin Lighthouse adalah modul node yang menerapkan serangkaian pemeriksaan yang akan dijalankan oleh Lighthouse dan ditambahkan ke laporan sebagai kategori baru.
Untuk mengetahui informasi lebih lanjut tentang cara membuat plugin Anda sendiri, lihat Buku Panduan Plugin kami di repo GitHub Lighthouse.
Integrasikan Lighthouse
Jika Anda adalah perusahaan atau individu yang mengintegrasikan Lighthouse sebagai bagian dari produk atau layanan yang Anda tawarkan, itu bagus. Kami ingin sebanyak mungkin orang menggunakan Lighthouse.
Lihat Panduan dan Aset Merek untuk Mengintegrasikan Lighthouse untuk menunjukkan bahwa Lighthouse digunakan, sekaligus melindungi merek kami.
Berkontribusi ke Lighthouse
Lighthouse bersifat open source dan menerima kontribusi. Periksa Issue tracker repositori untuk menemukan bug yang dapat Anda perbaiki, atau audit yang dapat Anda buat atau tingkatkan. Masalah adalah tempat yang tepat untuk membahas metrik performa, ide untuk audit baru, atau hal lain yang terkait dengan Lighthouse.