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

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.

    Di sebelah kiri adalah area pandang halaman web yang akan diaudit. Di sebelah kanan adalah panel Lighthouse Chrome DevTools.

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

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

    Laporan Lighthouse di Chrome DevTools.

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.

    Situs PageSpeed Insights.

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.

    Ekstensi akan meminta Anda membuat laporan.

  3. Klik Hasilkan laporan. Lighthouse menjalankan auditnya terhadap halaman yang saat ini difokuskan, lalu membuka tab baru dengan laporan hasilnya.

    Laporan Lighthouse yang dibuat dari ekstensi.

Membagikan dan melihat laporan secara online

Gunakan Lighthouse Viewer untuk melihat dan membagikan laporan secara online.

Lighthouse Viewer

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:

  1. Buka Lighthouse Viewer.
  2. Tarik file JSON ke Viewer, atau klik di mana saja pada Viewer untuk membuka navigator file Anda 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 , lalu klik Buka di Penampil. Laporan ini terletak di https://googlechrome.github.io/lighthouse/viewer/.
  2. 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 ringkasan yang berisi output JSON harus berakhiran .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 ringkasan:

  • Tambahkan ?gist=<ID> ke URL Pelihat, dengan <ID> adalah ID ringkasan. text https://googlechrome.github.io/lighthouse/viewer/?gist=<ID>
  • Buka Viewer, dan tempelkan URL gist ke dalamnya.

Ekstensibilitas Mercusuar

Lighthouse bertujuan untuk memberikan panduan yang relevan dan dapat ditindaklanjuti bagi semua developer web. Untuk tujuan ini, 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 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 menerima kontribusi. Lihat 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.