lighthouse
v12.2.2
Lighthouse menganalisis aplikasi web dan halaman web, mengumpulkan metrik kinerja modern dan wawasan tentang praktik terbaik pengembang.
Lighthouse terintegrasi langsung ke Chrome DevTools, di bawah panel "Lighthouse".
Instalasi : instal Chrome.
Jalankan : buka Chrome DevTools, pilih panel Lighthouse, dan tekan "Buat laporan".
Ekstensi Chrome tersedia sebelum Lighthouse tersedia di Alat Pengembang Chrome, dan menawarkan fungsi serupa.
Instalasi : instal ekstensi dari Toko Web Chrome.
Jalankan : ikuti panduan memulai cepat ekstensi.
Node CLI memberikan fleksibilitas paling besar dalam cara Lighthouse dijalankan dapat dikonfigurasi dan dilaporkan. Pengguna yang menginginkan penggunaan lebih lanjut, atau ingin menjalankan Lighthouse secara otomatis harus menggunakan Node CLI.
Catatan Lighthouse memerlukan Node 18 LTS (18.x) atau lebih baru.
Instalasi :
npm install -g lighthouse
# or use yarn:
# yarn global add lighthouse Jalankan : lighthouse https://airhorner.com/
Secara default, Lighthouse menulis laporan ke file HTML. Anda dapat mengontrol format output dengan meneruskan flag.
$ lighthouse --help
lighthouse <url> <options>
Logging:
--verbose Displays verbose logging [boolean] [default: false]
--quiet Displays no progress, debug logs, or errors [boolean] [default: false]
Configuration:
--save-assets Save the trace contents & devtools logs to disk [boolean] [default: false]
--list-all-audits Prints a list of all available audits and exits [boolean] [default: false]
--list-trace-categories Prints a list of all required trace categories and exits [boolean] [default: false]
--additional-trace-categories Additional categories to capture with the trace (comma-delimited). [string]
--config-path The path to the config JSON.
An example config file: core/config/lr-desktop-config.js [string]
--preset Use a built-in configuration.
WARNING: If the --config-path flag is provided, this preset will be ignored. [string] [choices: "perf", "experimental", "desktop"]
--chrome-flags Custom flags to pass to Chrome (space-delimited). For a full list of flags, see https://bit.ly/chrome-flags
Additionally, use the CHROME_PATH environment variable to use a specific Chrome binary. Requires Chromium version 66.0 or later. If omitted, any detected Chrome Canary or Chrome stable will be used. [string] [default: ""]
--port The port to use for the debugging protocol. Use 0 for a random port [number] [default: 0]
--hostname The hostname to use for the debugging protocol. [string] [default: "localhost"]
--form-factor Determines how performance metrics are scored and if mobile-only audits are skipped. For desktop, --preset=desktop instead. [string] [choices: "mobile", "desktop"]
--screenEmulation Sets screen emulation parameters. See also --preset. Use --screenEmulation.disabled to disable. Otherwise set these 4 parameters individually: --screenEmulation.mobile --screenEmulation.width=360 --screenEmulation.height=640 --screenEmulation.deviceScaleFactor=2
--emulatedUserAgent Sets useragent emulation [string]
--max-wait-for-load The timeout (in milliseconds) to wait before the page is considered done loading and the run should continue. WARNING: Very high values can lead to large traces and instability [number]
--enable-error-reporting Enables error reporting, overriding any saved preference. --no-enable-error-reporting will do the opposite. More: https://github.com/GoogleChrome/lighthouse/blob/main/docs/error-reporting.md [boolean]
--gather-mode, -G Collect artifacts from a connected browser and save to disk. (Artifacts folder path may optionally be provided). If audit-mode is not also enabled, the run will quit early.
--audit-mode, -A Process saved artifacts from disk. (Artifacts folder path may be provided, otherwise defaults to ./latest-run/)
--only-audits Only run the specified audits [array]
--only-categories Only run the specified categories. Available categories: accessibility, best-practices, performance, seo [array]
--skip-audits Run everything except these audits [array]
--disable-full-page-screenshot Disables collection of the full page screenshot, which can be quite large [boolean]
Output:
--output Reporter for the results, supports multiple values. choices: "json", "html", "csv" [array] [default: ["html"]]
--output-path The file path to output the results. Use 'stdout' to write to stdout.
If using JSON output, default is stdout.
If using HTML or CSV output, default is a file in the working directory with a name based on the test URL and date.
If using multiple outputs, --output-path is appended with the standard extension for each output type. "reports/my-run" -> "reports/my-run.report.html", "reports/my-run.report.json", etc.
Example: --output-path=./lighthouse-results.html [string]
--view Open HTML report in your browser [boolean] [default: false]
Options:
--version Show version number [boolean]
--help Show help [boolean]
--cli-flags-path The path to a JSON file that contains the desired CLI flags to apply. Flags specified at the command line will still override the file-based ones.
--locale The locale/language the report should be formatted in
--blocked-url-patterns Block any network requests to the specified URL patterns [array]
--disable-storage-reset Disable clearing the browser cache and other storage APIs before a run [boolean]
--throttling-method Controls throttling method [string] [choices: "devtools", "provided", "simulate"]
--throttling
--throttling.rttMs Controls simulated network RTT (TCP layer)
--throttling.throughputKbps Controls simulated network download throughput
--throttling.requestLatencyMs Controls emulated network RTT (HTTP layer)
--throttling.downloadThroughputKbps Controls emulated network download throughput
--throttling.uploadThroughputKbps Controls emulated network upload throughput
--throttling.cpuSlowdownMultiplier Controls simulated + emulated CPU throttling
--extra-headers Set extra HTTP Headers to pass with request
--precomputed-lantern-data-path Path to the file where lantern simulation data should be read from, overwriting the lantern observed estimates for RTT and server latency. [string]
--lantern-data-output-path Path to the file where lantern simulation data should be written to, can be used in a future run with the `precomputed-lantern-data-path` flag. [string]
--plugins Run the specified plugins [array]
--channel [string] [default: "cli"]
--chrome-ignore-default-flags [boolean] [default: false]
Examples:
lighthouse <url> --view Opens the HTML report in a browser after the run completes
lighthouse <url> --config-path=./myconfig.js Runs Lighthouse with your own configuration: custom audits, report generation, etc.
lighthouse <url> --output=json --output-path=./report.json --save-assets Save trace, screenshots, and named JSON report.
lighthouse <url> --screenEmulation.disabled --throttling-method=provided --no-emulatedUserAgent Disable device emulation and all throttling
lighthouse <url> --chrome-flags="--window-size=412,660" Launch Chrome with a specific window size
lighthouse <url> --quiet --chrome-flags="--headless" Launch Headless Chrome, turn off logging
lighthouse <url> --extra-headers "{"Cookie":"monster=blue", "x-men":"wolverine"}" Stringify'd JSON HTTP Header key/value pairs to send in requests
lighthouse <url> --extra-headers=./path/to/file.json Path to JSON file of HTTP Header key/value pairs to send in requests
lighthouse <url> --only-categories=performance,seo Only run the specified categories. Available categories: accessibility, best-practices, performance, seo
For more information on Lighthouse, see https://developers.google.com/web/tools/lighthouse/.
lighthouse
# saves `./<HOST>_<DATE>.report.html`
lighthouse --output json
# json output sent to stdout
lighthouse --output html --output-path ./report.html
# saves `./report.html`
# NOTE: specifying an output path with multiple formats ignores your specified extension for *ALL* formats
lighthouse --output json --output html --output-path ./myfile.json
# saves `./myfile.report.json` and `./myfile.report.html`
lighthouse --output json --output html
# saves `./<HOST>_<DATE>.report.json` and `./<HOST>_<DATE>.report.html`
lighthouse --output-path= ~ /mydir/foo.out --save-assets
# saves `~/mydir/foo.report.html`
# saves `~/mydir/foo-0.trace.json` and `~/mydir/foo-0.devtoolslog.json`
lighthouse --output-path=./report.json --output json
# saves `./report.json` Anda dapat menjalankan subset siklus hidup Lighthouse jika diinginkan melalui tanda CLI --gather-mode ( -G ) dan --audit-mode ( -A ).
lighthouse http://example.com -G
# launches browser, collects artifacts, saves them to disk (in `./latest-run/`) and quits
lighthouse http://example.com -A
# skips browser interaction, loads artifacts from disk (in `./latest-run/`), runs audits on them, generates report
lighthouse http://example.com -GA
# Normal gather + audit run, but also saves collected artifacts to disk for subsequent -A runs.
# You can optionally provide a custom folder destination to -G/-A/-GA. Without a value, the default will be `$PWD/latest-run`.
lighthouse -GA=./gmailartifacts https://gmail.comSaat pertama kali Anda menjalankan CLI, Anda akan diminta dengan pesan yang menanyakan apakah Lighthouse dapat melaporkan pengecualian runtime secara anonim. Tim Lighthouse menggunakan informasi ini untuk mendeteksi bug baru dan menghindari regresi. Memilih untuk tidak ikut serta tidak akan memengaruhi kemampuan Anda menggunakan Lighthouse dengan cara apa pun. Pelajari lebih lanjut.
Anda juga dapat menggunakan Lighthouse secara terprogram dengan modul Node.
Baca Menggunakan Lighthouse secara terprogram untuk bantuan memulai.
Baca Konfigurasi Lighthouse untuk mempelajari lebih lanjut tentang opsi konfigurasi yang tersedia.
Lighthouse dapat menghasilkan laporan sebagai JSON atau HTML.
Laporan HTML:
Menjalankan Lighthouse dengan flag --output=json menghasilkan dump JSON dari proses tersebut. Anda dapat melihat laporan ini secara online dengan mengunjungi https://googlechrome.github.io/lighthouse/viewer/ dan menyeret file ke aplikasi. Anda juga dapat menggunakan tombol "Ekspor" dari atas laporan HTML Lighthouse mana pun dan membuka laporan di Lighthouse Viewer.
Di Penampil, laporan dapat dibagikan dengan mengeklik ikon bagikan di sudut kanan atas dan masuk ke GitHub.
Catatan : laporan yang dibagikan disimpan sebagai Intisari rahasia di GitHub, di bawah akun Anda.
Dokumentasi, contoh, dan resep yang berguna untuk membantu Anda memulai.
dokumen
Resep
Video
Sesi dari Google I/O 2018 mencakup mesin kinerja baru, Lighthouse REST API yang akan datang, dan penggunaan laporan Chrome UX untuk mengevaluasi data pengguna sebenarnya.
Sesi dari Google I/O 2017 mencakup arsitektur, penulisan audit khusus, integrasi GitHub/Travis/CI, Chrome tanpa kepala, dan banyak lagi:
Klik gambar untuk menonton video di YouTube.
Baca terus untuk mengetahui dasar-dasar peretasan di Lighthouse. Lihat juga Berkontribusi untuk informasi selengkapnya.
# yarn should be installed first
git clone https://github.com/GoogleChrome/lighthouse
cd lighthouse
yarn
yarn build-allnode cli http://example.com
# append --chrome-flags="--no-sandbox --headless --disable-gpu" if you run into problems connecting to ChromeKiat memulai :
node --inspect-brk cli http://example.comuntuk membuka Chrome DevTools dan menjelajahi seluruh aplikasi. Lihat Men-debug Node.js dengan Chrome DevTools untuk info selengkapnya.
# lint and test all files
yarn test
# run all unit tests
yarn unit
# run a given unit test (e.g. core/test/audits/byte-efficiency/uses-long-cache-ttl-test.js)
yarn mocha uses-long-cache-ttl
# watch for file changes and run tests
# Requires http://entrproject.org : brew install entr
yarn watch
# # run linting, unit, and smoke tests separately
yarn lint
yarn unit
yarn smoke
# # run tsc compiler
yarn type-check Beberapa dokumen kami memiliki pengujian yang hanya dijalankan di CI secara default. Untuk mengubah dokumentasi kami, Anda harus menjalankan yarn build-pack && yarn test-docs secara lokal untuk memastikannya lulus.
Ketergantungan Tambahan
brew install jqBagian ini merinci layanan yang memiliki data Lighthouse terintegrasi. Jika Anda sedang mengerjakan proyek keren yang mengintegrasikan Lighthouse dan ingin ditampilkan di sini, ajukan masalah ke repo ini atau tweet di kami @_____lighthouse!
Pengujian Halaman Web — Alat sumber terbuka untuk mengukur dan menganalisis kinerja halaman web pada perangkat nyata. Pengguna dapat memilih untuk membuat laporan Lighthouse bersamaan dengan analisis hasil WebPageTest.
HTTPArchive - HTTPArchive melacak cara web dibuat dengan meng-crawl 500 ribu halaman menggunakan Pengujian Halaman Web, termasuk hasil Lighthouse, dan menyimpan informasi di BigQuery yang tersedia untuk umum.
Calibre - Calibre adalah platform pemantauan kinerja komprehensif yang berjalan di Lighthouse. Lihat dampak kinerja pekerjaan Anda sebelum mencapai produksi dengan GitHub Pull Request Review. Lacak dampak skrip Pihak Ketiga. Otomatiskan sistem kinerja Anda dengan API Node.js yang mengutamakan pengembang. Coba Calibre dengan uji coba gratis selama 15 hari.
DebugBear - DebugBear adalah alat pemantauan situs web berdasarkan Lighthouse. Lihat bagaimana skor dan metrik Anda berubah seiring waktu, dengan fokus pada pemahaman apa yang menyebabkan setiap perubahan. DebugBear adalah produk berbayar dengan uji coba gratis selama 30 hari.
Treo - Treo adalah Mercusuar sebagai Layanan. Ini menyediakan pengujian regresi, wilayah geografis, jaringan khusus, dan integrasi dengan GitHub & Slack. Treo adalah produk berbayar dengan rencana untuk pengembang tunggal dan tim.
PageVitals - PageVitals menggabungkan Lighthouse, CrUX, dan pengujian lapangan untuk memantau kinerja situs web. Lihat kinerja situs web Anda dari waktu ke waktu dan dapatkan peringatan jika terlalu lambat. Telusuri dan temukan penyebab sebenarnya dari masalah kinerja apa pun. PageVitals adalah produk berbayar dengan uji coba gratis selama 14 hari.
Screpy - Screpy adalah alat analisis web yang dapat menganalisis semua halaman situs web Anda dalam satu dasbor dan memantaunya bersama tim Anda. Ini didukung oleh Lighthouse dan juga mencakup beberapa alat analisis yang berbeda (SERP, W3C, Uptime, dll). Screpy memiliki paket gratis dan berbayar.
Kinerja Siteimprove — Kinerja Siteimprove adalah solusi pemantauan kinerja web yang memungkinkan pemasar, manajer, atau pengambil keputusan untuk memahami dan mengoptimalkan waktu muat situs web. Dapatkan wawasan yang mudah digunakan dengan fokus pada kemenangan cepat dan berdampak. Siteimprove Performance adalah produk berbayar dengan uji coba gratis selama 14 hari.
SpeedCurve — SpeedCurve adalah alat untuk terus memantau kinerja web di berbagai browser, perangkat, dan wilayah. Ini dapat menggabungkan metrik apa pun termasuk skor Lighthouse di beberapa halaman dan situs, dan memungkinkan Anda menetapkan anggaran kinerja dengan Slack atau pemberitahuan email. SpeedCurve adalah produk berbayar dengan uji coba gratis selama 30 hari.
Foo - Lighthouse-as-a-service yang menawarkan paket gratis dan premium. Menyediakan pemantauan dan pelaporan historis audit Lighthouse dengan CircleCI, GitHub, dan integrasi lainnya. Fitur-fiturnya termasuk pemberitahuan Slack, pelaporan komentar PR, dan banyak lagi.
Apdex - Apdex adalah layanan kinerja situs web. Fitur utamanya adalah visualisasi laporan Lighthouse historis, opsi seluler/desktop, peringatan, pemantauan uptime, dan banyak lagi. Ada paket berbayar yang fleksibel dan uji coba gratis 30 hari.
Websu - Websu adalah proyek sumber terbuka untuk menyediakan Lighthouse-as-a-Service melalui HTTP REST API sederhana. Fitur utamanya adalah kemampuan untuk menghosting dan menerapkan di lingkungan Anda sendiri dan ringkasan laporan Lighthouse historis.
DTEKT.IO - DTEKT adalah layanan pemantauan kinerja dan uptime situs web. Ia menggunakan mercusuar untuk memberikan visibilitas ke kinerja situs web dari berbagai lokasi di beberapa perangkat. Ini menawarkan uji coba gratis selama tiga bulan dan paket berbayar.
SpeedVitals - SpeedVitals adalah alat bertenaga Lighthouse untuk mengukur kinerja web di berbagai perangkat dan lokasi. Ini memiliki berbagai fitur seperti Visualisasi Pergeseran Tata Letak, Bagan Air Terjun, Data Bidang, dan Grafik Sumber Daya. SpeedVitals menawarkan paket gratis dan berbayar.
Lighthouse Metrics - Lighthouse Metrics memberi Anda wawasan kinerja global dengan satu pengujian. Anda juga dapat memantau situs web Anda setiap hari atau setiap jam. Lighthouse Metrics menawarkan pengujian satu kali global gratis dan pemantauan kinerja sebagai fitur berbayar dengan uji coba gratis selama 14 hari.
Auditzy - Auditzy™ adalah alat audit & pemantauan situs web tangguh yang memungkinkan Anda menganalisis perjalanan pra-pengguna laman web Anda. Analisis Metrik Kesehatan Pesaing, Data Web Inti, dan Teknologi. Bandingkan halaman web Anda dengan pesaing untuk memahami keunggulan atau ketertinggalan Anda. Notifikasi real-time dengan Slack. Miliki Kolaborasi yang Lancar dengan Banyak Tim. Otomatiskan Audit Anda setiap jam, harian, mingguan, dan seterusnya. Ini memiliki uji coba gratis dengan paket bayar sesuai pemakaian.
Lighthouse Metrics China - Alat metrik Lighthouse pertama yang dirancang khusus untuk China. Rasakan kemampuan pemantauan situs web yang tak tertandingi dengan Lighthouse. Dapatkan wawasan tentang fluktuasi skor dan metrik Anda dalam lingkup Great Firewall Tiongkok, sehingga memungkinkan pemahaman komprehensif tentang faktor-faktor yang mempengaruhi setiap perubahan. Lighthouse Metrics China menawarkan paket gratis dan berbayar.
DeploymentHawk - DeploymentHawk adalah alat audit situs otomatis yang didukung oleh Lighthouse. Temukan masalah performa, aksesibilitas, dan SEO dengan mudah sebelum berdampak pada pengguna Anda. DeploymentHawk adalah produk berbayar dengan uji coba gratis selama 7 hari.
Guardius - Guardius adalah platform SaaS DevOps dan DevSecOps yang mengintegrasikan Lighthouse untuk memberikan analisis kinerja web otomatis. Ini tidak hanya menyediakan evaluasi metrik dan pemindaian otomatis tetapi juga memungkinkan perbandingan kinerja di berbagai periode dan pengamatan berkelanjutan dari waktu ke waktu. Selain itu, Guardius menawarkan peringatan yang telah ditentukan sebelumnya dan disesuaikan dengan kebutuhan spesifik Anda. Versi gratis Guardius tersedia bagi pengguna untuk menjelajahi fitur-fiturnya.
PageWatch — PageWatch adalah alat untuk menemukan halaman bermasalah di situs web Anda. Ini memberikan wawasan tentang kesalahan ejaan, masalah tata letak, halaman lambat (didukung oleh Lighthouse) dan banyak lagi. PageWatch ditawarkan melalui paket gratis dan berbayar.
Fluxguard - Fluxguard menyediakan pemantauan perubahan DOM situs web yang diatur dengan Google Puppeteer, dan diaudit oleh Lighthouse. Fluxguard adalah produk freemium, dengan pemantauan bulanan hingga 75 halaman gratis.
Microlink — Microlink adalah browser cloud sebagai API. Ia menawarkan laporan Lighthouse sesuai permintaan, sehingga memudahkan untuk membangun layanan apa pun di atasnya. Fungsionalitas serupa tersedia melalui proyek sumber terbuka yang mendasarinya bernama tanpa browser.
Wattspeed — Wattspeed adalah alat gratis yang menghasilkan cuplikan - cuplikan riwayat laman web Anda yang mencakup skor Lighthouse, daftar teknologi, hasil validator HTML W3C, ukuran DOM, informasi konten campuran, dan banyak lagi.
lighthouse-plugin-field-kinerja - plugin yang menambahkan metrik kinerja pengguna nyata untuk URL menggunakan data dari Laporan UX Chrome.
lighthouse-plugin-publisher-ads - alat untuk meningkatkan kecepatan iklan dan kualitas keseluruhan melalui serangkaian audit otomatis. Saat ini, ini terutama ditargetkan pada situs yang menggunakan Pengelola Iklan Google. Alat ini akan membantu dalam menyelesaikan masalah yang ditemukan, menyediakan alat yang akan digunakan untuk mengevaluasi efektivitas perubahan berulang sambil menyarankan umpan balik yang dapat ditindaklanjuti.
lighthouse-plugin-crux - plugin yang dengan cepat mengumpulkan data metrik pengguna sebenarnya dari Chrome UX Report API.
Proyek open source mengagumkan lainnya yang menggunakan Lighthouse.
Lihat Arsitektur Mercusuar.
Lighthouse melaporkan metrik kinerja seperti yang dialami oleh pengguna seluler pada umumnya dengan koneksi 4G dan ponsel kelas menengah seharga ~$200. Meskipun situs dimuat dengan cepat di perangkat dan jaringan Anda, pengguna di lingkungan lain akan merasakan situs ini dengan sangat berbeda.
Baca lebih lanjut di panduan kami untuk pembatasan.
Skor kinerja Lighthouse akan berubah karena variabilitas yang melekat pada teknologi web dan jaringan, meskipun tidak ada perubahan kode. Uji di lingkungan yang konsisten, jalankan Lighthouse beberapa kali, dan waspadai variabilitas sebelum menarik kesimpulan tentang perubahan yang berdampak pada kinerja.
Baca selengkapnya di panduan kami untuk mengurangi variabilitas.
Ya! Detail dalam konfigurasi Lighthouse.
Pertanyaan bagus. Pelambatan jaringan dan CPU diterapkan secara default saat Lighthouse dijalankan. Jaringan mencoba meniru konektivitas 4G yang lambat dan CPU melambat 4x dari kecepatan default mesin Anda. Jika Anda lebih suka menjalankan Lighthouse tanpa pembatasan, Anda harus menggunakan CLI dan menonaktifkannya dengan tanda --throttling.* yang disebutkan di atas.
Baca selengkapnya di panduan kami tentang pembatasan jaringan.
Tidak. Lighthouse berjalan secara lokal, mengaudit halaman menggunakan versi lokal browser Chrome yang diinstal pada mesin. Hasil laporan tidak pernah diproses atau dikirim ke server jauh.
Mulai Lighthouse 8.0, Lighthouse bergantung sepenuhnya pada dukungan Intl asli dan tidak lagi menggunakan polyfill Intl . Jika Anda menggunakan Node 14 atau lebih baru, seharusnya tidak ada masalah karena Node sekarang dibuat dengan full-icu secara default.
Namun, jika Anda menggunakan build Node small-icu , Anda mungkin melihat pesan log Lighthouse tentang lokal Anda tidak tersedia. Untuk mengatasinya, Anda dapat menginstal data ICU secara manual dengan menggunakan modul full-icu dan flag node --icu-data-dir saat peluncuran.
Tip : lihat Arsitektur Mercusuar untuk informasi lebih lanjut tentang terminologi dan arsitektur.
Lighthouse dapat diperluas untuk menjalankan audit dan pengumpul khusus yang Anda buat. Ini bagus jika Anda sudah melacak metrik kinerja di situs Anda dan ingin menampilkan metrik tersebut dalam laporan Lighthouse.
Jika Anda tertarik untuk menjalankan audit khusus Anda sendiri, lihat Contoh Audit Khusus kami di resep.
Kami ingin sekali membantu menulis audit, memperbaiki bug, dan menjadikan alat ini lebih berguna! Lihat Berkontribusi untuk memulai.
Mercusuar , ˈlītˌhous (n): menara atau alat struktur lainnya yang berisi lampu suar untuk memperingatkan atau memandu kapal di pengembang laut .
