Pengantar Lighthouse

Lighthouse adalah alat open source otomatis untuk membantu Anda meningkatkan kualitas halaman web. Anda dapat menjalankannya di halaman web apa pun, publik atau yang memerlukan autentikasi. Alat ini memiliki audit untuk performa, aksesibilitas, progressive web app, SEO, dan lainnya.

Anda dapat menjalankan Lighthouse di Chrome DevTools, dari command line, atau sebagai modul Node. Berikan URL yang akan diaudit ke Lighthouse, lalu Lighthouse akan menjalankan serangkaian audit terhadap halaman tersebut, lalu membuat laporan tentang seberapa baik performa halaman. Gunakan audit yang gagal sebagai indikator cara meningkatkan kualitas halaman. Setiap audit memiliki referensi yang menjelaskan mengapa audit tersebut penting, 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 baca 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 continuous integration Anda.
• Dari UI web. Jalankan Lighthouse dan tautkan ke laporan, tanpa perlu penginstalan.

Menjalankan Lighthouse di Chrome DevTools

Lighthouse memiliki panelnya sendiri di Chrome DevTools. Untuk menjalankan laporan:

1. Download Google Chrome untuk Desktop.
2. Buka Chrome, lalu buka URL yang ingin Anda audit. Anda dapat mengaudit URL apa pun di web.
3. Buka Chrome DevTools.

4. Klik tab Lighthouse.

   

5. Klik Analisis pemuatan halaman. DevTools menampilkan daftar kategori audit. Biarkan semuanya diaktifkan.

6. Klik Jalankan audit. Setelah 30 hingga 60 detik, Lighthouse akan memberikan laporan tentang halaman tersebut.

   

Menginstal dan menjalankan alat command line Node

Untuk menginstal modul Node:

1. Download Google Chrome untuk Desktop.
2. Instal Node versi Dukungan Jangka Panjang saat ini.
3. Instal Lighthouse. Flag -g menginstalnya sebagai modul global.

npm install -g lighthouse

Untuk menjalankan audit:

lighthouse <url>

Untuk melihat semua opsi:

lighthouse --help

Menjalankan modul Node secara terprogram

Lihat Menggunakan secara terprogram untuk mengetahui contoh menjalankan Lighthouse secara terprogram, sebagai modul Node.

Menjalankan PageSpeed Insights

Untuk menjalankan Lighthouse di PageSpeed Insights:

1. Buka PageSpeed Insights.
2. Masukkan URL halaman web.

3. Klik Analisis.

   

Menjalankan Lighthouse sebagai Ekstensi Chrome

Untuk menginstal ekstensi:

1. Download Google Chrome untuk Desktop.
2. Instal Ekstensi Chrome Lighthouse dari Chrome Webstore.

Untuk menjalankan audit:

1. Di Chrome, buka halaman yang ingin Anda audit.

2. Klik Lighthouse, di samping kolom URL Chrome atau di menu ekstensi Chrome. Setelah diklik, menu Lighthouse akan diperluas.

   

3. 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 more_vert untuk menu, lalu klik Save as JSON
• Command line. Jalankan: shell lighthouse --output json --output-path <path/for/output.json>

Untuk melihat data laporan:

1. Buka Lighthouse Viewer.
2. 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:

1. Klik menu more_vert, lalu klik Buka di Penampil. Laporan ini terletak di https://googlechrome.github.io/lighthouse/viewer/.
2. Dari Penampil, klik menu more_vert, lalu klik Simpan sebagai Gist. Saat pertama kali Anda melakukannya, pop-up akan meminta izin untuk mengakses data GitHub dasar Anda, serta untuk membaca dan menulis ke ringkasan Anda.

Untuk mengekspor laporan sebagai ringkasan dari Lighthouse versi CLI, buat ringkasan secara manual dan salin-tempel output JSON laporan ke ringkasan. Nama file ringkasan yang berisi output JSON harus berakhiran .lighthouse.report.json. Lihat Membagikan laporan sebagai JSON untuk contoh cara membuat output JSON dari alat command line.

Untuk melihat laporan yang telah disimpan sebagai ringkasan:

• Tambahkan ?gist=<ID> ke URL Pelihat, dengan <ID> adalah ID ringkasan. 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 bagi semua developer web. Untuk itu, ada dua fitur yang tersedia yang memungkinkan Anda menyesuaikan Lighthouse dengan kebutuhan spesifik Anda.

Paket stack

Developer menggunakan berbagai teknologi (backend, sistem pengelolaan konten, dan framework JavaScript) untuk membuat halaman web mereka. Lighthouse tidak menampilkan rekomendasi umum, tetapi memberikan saran yang relevan dan bisa ditindaklanjuti, bergantung pada alat yang digunakan.

Paket stack memungkinkan Lighthouse mendeteksi platform yang digunakan untuk membuat situs Anda dan menampilkan rekomendasi berbasis stack tertentu. Rekomendasi ini ditentukan dan diseleksi oleh pakar dari komunitas.

Untuk berkontribusi pada paket stack, tinjau Panduan Berkontribusi.

Plugin Lighthouse

Plugin Lighthouse memungkinkan pakar domain memperluas fungsi Lighthouse untuk kebutuhan spesifik komunitas mereka. Anda dapat memanfaatkan data yang dikumpulkan Lighthouse untuk membuat audit baru. Pada intinya, plugin Lighthouse adalah modul node yang menerapkan serangkaian pemeriksaan untuk dijalankan oleh Lighthouse dan ditambahkan ke laporan sebagai kategori baru.

Untuk mengetahui informasi selengkapnya tentang cara membuat plugin Anda sendiri, lihat Panduan Plugin di repo GitHub Lighthouse.

Mengintegrasikan 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 Brand untuk Mengintegrasikan Lighthouse untuk menunjukkan bahwa Lighthouse digunakan, sekaligus melindungi brand kami.

Berkontribusi ke Lighthouse

Lighthouse bersifat open source dan kontribusi Anda sangatlah diharapkan. Lihat Pelacak masalah 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.