lighthouse
v12.2.2
Lighthouse анализирует веб-приложения и веб-страницы, собирая современные показатели производительности и лучшие практики разработчиков.
Lighthouse интегрирован непосредственно в Chrome DevTools под панелью «Маяк».
Установка : установите Chrome.
Запустите его : откройте Chrome DevTools, выберите панель Lighthouse и нажмите «Создать отчет».
Расширение Chrome было доступно до того, как Lighthouse стал доступен в инструментах разработчика Chrome, и предлагает аналогичную функциональность.
Установка : установите расширение из Интернет-магазина Chrome.
Запустите его : следуйте краткому руководству по расширению.
Node CLI обеспечивает максимальную гибкость в настройке и отчетности о запусках Lighthouse. Пользователи, которые хотят более расширенного использования или хотят запускать Lighthouse в автоматическом режиме, должны использовать Node CLI.
Примечание. Lighthouse требует Node 18 LTS (18.x) или более поздней версии.
Установка :
npm install -g lighthouse
# or use yarn:
# yarn global add lighthouse Запустите : lighthouse https://airhorner.com/
По умолчанию Lighthouse записывает отчет в файл HTML. Вы можете управлять форматом вывода, передавая флаги.
$ 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` При желании вы можете запустить подмножество жизненного цикла Lighthouse с помощью флагов CLI --gather-mode ( -G ) и --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.comПри первом запуске CLI вам будет предложено сообщение с вопросом, может ли Lighthouse анонимно сообщать об исключениях во время выполнения. Команда Lighthouse использует эту информацию для обнаружения новых ошибок и предотвращения регрессий. Отказ никоим образом не повлияет на вашу возможность использовать Lighthouse. Узнать больше.
Вы также можете использовать Lighthouse программно с модулем Node.
Прочтите «Использование Lighthouse программно», чтобы получить помощь по началу работы.
Прочтите «Конфигурация Lighthouse», чтобы узнать больше о доступных вариантах конфигурации.
Lighthouse может создавать отчет в формате JSON или HTML.
HTML-отчет:
Запуск Lighthouse с флагом --output=json генерирует дамп JSON прогона. Вы можете просмотреть этот отчет онлайн, посетив https://googlechrome.github.io/lighthouse/viewer/ и перетащив файл в приложение. Вы также можете использовать кнопку «Экспорт» в верхней части любого HTML-отчета Lighthouse и открыть отчет в средстве просмотра Lighthouse Viewer.
В средстве просмотра отчетами можно поделиться, щелкнув значок общего доступа в правом верхнем углу и войдя в GitHub.
Примечание . Общие отчеты хранятся в секретном Gist на GitHub под вашей учетной записью.
Полезная документация, примеры и рецепты, которые помогут вам начать работу.
Документы
Рецепты
Видео
Сессия Google I/O 2018 посвящена новому механизму повышения производительности, будущему Lighthouse REST API и использованию отчета Chrome UX для оценки данных реальных пользователей.
Сессия Google I/O 2017 охватывает архитектуру, написание пользовательских аудитов, интеграцию GitHub/Travis/CI, автономный Chrome и многое другое:
Нажмите на изображение, чтобы посмотреть видео на YouTube.
Прочтите основы взлома Lighthouse. Подробную информацию см. также в разделе «Вклад».
# 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 ChromeСовет по началу работы :
node --inspect-brk cli http://example.comчтобы открыть Chrome DevTools и просмотреть все приложение. Дополнительную информацию см. в разделе «Отладка Node.js с помощью Chrome DevTools».
# 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 В некоторых наших документах есть тесты, которые по умолчанию выполняются только в CI. Чтобы изменить нашу документацию, вам необходимо локально запустить yarn build-pack && yarn test-docs чтобы убедиться, что они пройдены.
Дополнительные зависимости
brew install jqВ этом разделе подробно описаны сервисы, в которых интегрированы данные Lighthouse. Если вы работаете над крутым проектом, интегрирующим Lighthouse, и хотели бы, чтобы о вас рассказали здесь, сообщите о проблеме в этом репозитории или напишите нам @_____lighthouse!
Тест веб-страниц — инструмент с открытым исходным кодом для измерения и анализа производительности веб-страниц на реальных устройствах. Пользователи могут создать отчет Lighthouse наряду с анализом результатов WebPageTest.
HTTPArchive — HTTPArchive отслеживает, как устроена сеть, сканируя 500 тысяч страниц с помощью Web Page Test, включая результаты Lighthouse, и сохраняет информацию в BigQuery, где она становится общедоступной.
Caliber — Caliber — это комплексная платформа мониторинга производительности, работающая на Lighthouse. Посмотрите, как ваша работа повлияет на производительность, прежде чем она попадет в рабочую среду, с помощью обзоров запросов на извлечение GitHub. Отслеживайте влияние сторонних сценариев. Автоматизируйте свою систему производительности с помощью API Node.js, созданного специально для разработчиков. Попробуйте Caliber с бесплатной 15-дневной пробной версией.
DebugBear — DebugBear — это инструмент мониторинга веб-сайтов, основанный на Lighthouse. Посмотрите, как ваши оценки и показатели менялись с течением времени, уделяя особое внимание пониманию причин каждого изменения. DebugBear — платный продукт с бесплатной 30-дневной пробной версией.
Treo — Treo — это «Маяк как услуга». Он обеспечивает регрессионное тестирование, географические регионы, пользовательские сети и интеграцию с GitHub и Slack. Treo — платный продукт, предназначенный для индивидуальных разработчиков и команд.
PageVitals — PageVitals сочетает в себе Lighthouse, CrUX и полевое тестирование для мониторинга производительности веб-сайтов. Посмотрите, как ваш веб-сайт работает с течением времени, и получите предупреждение, если он станет слишком медленным. Углубитесь и найдите реальную причину любой проблемы с производительностью. PageVitals — платный продукт с бесплатной 14-дневной пробной версией.
Screpy — Screpy — это инструмент веб-анализа, который может анализировать все страницы ваших веб-сайтов на одной панели и отслеживать их вместе с вашей командой. Он работает на базе Lighthouse и также включает в себя несколько различных инструментов анализа (SERP, W3C, Uptime и т. д.). У Screpy есть бесплатные и платные планы.
Siteimprove Performance — Siteimprove Performance — это решение для мониторинга производительности веб-сайта, которое позволяет маркетологу, менеджеру или лицу, принимающему решения, понимать и оптимизировать время загрузки веб-сайта. Получайте простую в использовании аналитическую информацию и сосредоточьтесь на быстрых и эффективных победах. Siteimprove Performance — платный продукт с бесплатной 14-дневной пробной версией.
SpeedCurve — SpeedCurve — это инструмент для постоянного мониторинга производительности Интернета в разных браузерах, устройствах и регионах. Он может агрегировать любые показатели, включая оценки Lighthouse, на нескольких страницах и сайтах, а также позволяет устанавливать бюджеты производительности с помощью Slack или оповещений по электронной почте. SpeedCurve — платный продукт с бесплатной 30-дневной пробной версией.
Foo — «Маяк как услуга», предлагающий бесплатные и премиальные планы. Обеспечивает мониторинг и историческую отчетность по аудитам Lighthouse с помощью CircleCI, GitHub и других интеграций. Функции включают уведомления Slack, отчеты о PR-комментариях и многое другое.
Apdex — Apdex — это служба повышения производительности веб-сайтов. Основными функциями являются визуализации исторических отчетов Lighthouse, опции для мобильных устройств и настольных компьютеров, оповещения, мониторинг времени безотказной работы и многое другое. Существуют гибкие платные планы и 30-дневная бесплатная пробная версия.
Websu — Websu — это проект с открытым исходным кодом, предоставляющий Lighthouse как услугу через простой HTTP REST API. Основными функциями являются возможность размещения и развертывания в вашей собственной среде, а также исторические сводки отчетов Lighthouse.
DTEKT.IO — DTEKT — это сервис мониторинга производительности и работоспособности веб-сайтов. Он использует маяк, чтобы обеспечить видимость производительности веб-сайтов из разных мест на нескольких устройствах. Он предлагает трехмесячную бесплатную пробную версию и платные планы.
SpeedVitals — SpeedVitals — это инструмент на базе Lighthouse для измерения производительности Интернета на нескольких устройствах и в разных местах. Он имеет различные функции, такие как визуализация смещения макета, каскадная диаграмма, данные полей и графики ресурсов. SpeedVitals предлагает как бесплатные, так и платные планы.
Lighthouse Metrics — Lighthouse Metrics дает вам глобальную информацию о производительности с помощью одного теста. Вы также можете контролировать свои веб-сайты ежедневно или ежечасно. Lighthouse Metrics предлагает бесплатные глобальные одноразовые тесты и мониторинг производительности в качестве платной функции с бесплатной 14-дневной пробной версией.
Auditzy — Auditzy™ — это надежный инструмент для аудита и мониторинга веб-сайтов, который позволяет анализировать путь пользователя к вашим веб-страницам. Анализируйте показатели здоровья конкурентов, основные веб-показатели и технологии. Сравните свои веб-страницы с веб-страницами конкурентов, чтобы понять, где вы лидируете, а где отстаете. Уведомление в реальном времени с помощью Slack. Обеспечьте беспрепятственное сотрудничество с несколькими командами. Автоматизируйте ежечасные, ежедневные, еженедельные и т. д. аудиты. У него есть бесплатная пробная версия с оплатой по мере использования.
Lighthouse Metrics China — первый инструмент для измерения показателей Lighthouse, специально разработанный для Китая. Испытайте непревзойденные возможности мониторинга веб-сайтов с помощью Lighthouse. Получите представление о колебаниях ваших показателей и показателей в пределах Великого китайского файрвола, что позволит получить полное представление о факторах, влияющих на каждое изменение. Lighthouse Metrics China предлагает как бесплатные, так и платные планы.
DeploymentHawk — DeploymentHawk — это автоматизированный инструмент аудита сайта на базе Lighthouse. Легко выявляйте проблемы с производительностью, доступностью и SEO, прежде чем они повлияют на ваших пользователей. DeploymentHawk — платный продукт с бесплатной 7-дневной пробной версией.
Guardius — Guardius — это SaaS-платформа DevOps и DevSecOps, которая интегрирует Lighthouse для автоматического анализа производительности сети. Он не только обеспечивает оценку показателей и автоматическое сканирование, но также позволяет сравнивать производительность за разные периоды и осуществлять постоянное наблюдение с течением времени. Кроме того, Guardius предлагает заранее заданные и настраиваемые оповещения, адаптированные к вашим конкретным требованиям. Бесплатная версия Guardius доступна пользователям для изучения ее возможностей.
PageWatch — PageWatch — это инструмент для поиска проблемных страниц на вашем сайте. Он предоставляет информацию об орфографических ошибках, проблемах с макетом, медленных страницах (на базе Lighthouse) и многом другом. PageWatch предлагается в бесплатных и платных планах.
Fluxguard — Fluxguard обеспечивает мониторинг изменений DOM веб-сайта, организованный с помощью Google Puppeteer и проверенный Lighthouse. Fluxguard — это бесплатный продукт с бесплатным ежемесячным мониторингом до 75 страниц.
Microlink — Microlink — это облачный браузер в качестве API. Он предлагает отчеты Lighthouse по запросу, что упрощает создание любого сервиса поверх него. Аналогичная функциональность доступна через базовый проект с открытым исходным кодом под названием «браузер без браузера».
Wattspeed — Wattspeed — это бесплатный инструмент, который создает снимки — исторические снимки ваших веб-страниц, которые включают оценки Lighthouse, список технологий, результаты валидатора HTML W3C, размер DOM, информацию о смешанном контенте и многое другое.
Lighthouse-plugin-field- Performance — плагин, который добавляет показатели производительности реальных пользователей для URL-адреса, используя данные из отчета Chrome UX.
Lighthouse-plugin-Publisher-ads — инструмент для улучшения скорости и общего качества рекламы посредством серии автоматических проверок. На данный момент это в первую очередь ориентировано на сайты, использующие Google Ad Manager. Этот инструмент поможет в решении обнаруженных проблем, предоставляя инструмент, который можно использовать для оценки эффективности итеративных изменений, предлагая при этом действенную обратную связь.
Lighthouse-plugin-crux — плагин, который быстро собирает данные о реальных пользователях из Chrome UX Report API.
Другие замечательные проекты с открытым исходным кодом, использующие Lighthouse.
См. Архитектуру маяка.
Lighthouse сообщает показатели производительности в том виде, в каком они наблюдаются у типичного мобильного пользователя при подключении 4G и телефоне среднего уровня стоимостью около 200 долларов. Даже если он быстро загружается на вашем устройстве и в сети, пользователи в других средах будут воспринимать сайт совсем по-другому.
Подробнее читайте в нашем руководстве по дросселированию.
Показатели производительности Lighthouse будут меняться из-за свойственной веб-технологиям изменчивости, даже если код не менялся. Тестируйте в согласованных средах, запускайте Lighthouse несколько раз и остерегайтесь изменчивости, прежде чем делать выводы об изменениях, влияющих на производительность.
Подробнее читайте в нашем руководстве по уменьшению изменчивости.
Да! Подробности в конфигурации маяка.
Хороший вопрос. Регулирование сети и ЦП применяется по умолчанию при запуске Lighthouse. Сеть пытается эмулировать медленное соединение 4G, и процессор замедляется в 4 раза по сравнению со скоростью вашего компьютера по умолчанию. Если вы предпочитаете запускать Lighthouse без регулирования, вам придется использовать CLI и отключить его с помощью флагов --throttling.* , упомянутых выше.
Подробнее читайте в нашем руководстве по регулированию сети.
Неа. Lighthouse работает локально, проверяя страницу с помощью локальной версии браузера Chrome, установленной на компьютере. Результаты отчета никогда не обрабатываются и не передаются на удаленный сервер.
Начиная с Lighthouse 8.0, Lighthouse полностью полагается на встроенную поддержку Intl и больше не использует полифил Intl . Если вы используете Node 14 или более позднюю версию, проблем возникнуть не должно, поскольку Node теперь по умолчанию собирается с использованием full-icu .
Однако, если вы используете сборку узла small-icu , вы можете увидеть в журнале Lighthouse сообщения о недоступности вашего языкового стандарта. Чтобы исправить это, вы можете вручную установить данные ICU, используя модуль full-icu и флаг узла --icu-data-dir при запуске.
Совет : дополнительную информацию о терминологии и архитектуре см. в разделе «Архитектура маяка».
Lighthouse можно расширить для запуска собственных аудитов и сборщиков, созданных вами. Это замечательно, если вы уже отслеживаете показатели производительности на своем сайте и хотите отображать эти показатели в отчете Lighthouse.
Если вы заинтересованы в проведении собственного пользовательского аудита, ознакомьтесь с нашим примером пользовательского аудита в рецептах.
Мы будем рады помочь в написании аудитов, исправлении ошибок и повышении полезности инструмента! Чтобы начать, см. «Внесение вклада».
Маяк , ˈlītˌhous (сущ): башня или другой строительный инструмент, содержащий световой маяк для предупреждения или направления кораблей в море разработчиков.
