Lighthouse, автоматизированный инструмент с открытым исходным кодом для улучшения качества ваших прогрессивных веб-приложений, устраняет большую часть ручного тестирования, которое требовалось ранее. Вы даже можете использовать Lighthouse в системах непрерывной интеграции для выявления регрессий.

Lighthouse — это автоматизированный инструмент с открытым исходным кодом для улучшения качества веб-страниц. Вы можете запустить его на любой веб-странице, общедоступной или требующей аутентификации. У него есть аудиты производительности, доступности, прогрессивных веб-приложений, SEO и многого другого.

Вы можете запустить Lighthouse в Chrome DevTools, из командной строки или в виде модуля Node. Вы даете Lighthouse URL-адрес для аудита, он запускает серию аудитов страницы, а затем создает отчет о том, насколько хорошо страница работала. Оттуда используйте неудачные проверки как индикаторы того, как улучшить страницу. У каждого аудита есть справочный документ, объясняющий, почему аудит важен, а также как его исправить.

Вы также можете использовать Lighthouse CI для предотвращения регрессий на ваших сайтах.

Запуск Lighthouse в Chrome DevTools | Оставить заявку

Посмотрите приведенное ниже видео с Google I/O 2019, чтобы узнать больше о том, как использовать Lighthouse и вносить в него свой вклад.

Начать

Выберите рабочий процесс Lighthouse, который подходит вам лучше всего:

Примечание. Рабочие процессы CLI и Node требуют, чтобы на вашем компьютере был установлен экземпляр Google Chrome.

Запустите Lighthouse в Chrome DevTools

Lighthouse поддерживает панель Аудит в Chrome DevTools. Чтобы запустить отчет:

  1. Загрузите Google Chrome для рабочего стола.
  2. В Google Chrome перейдите по URL-адресу, который вы хотите проверить. Вы можете проверить любой URL-адрес в Интернете.
  3. Открыть Chrome DevTools.
  4. Перейдите на вкладку Аудит.

5. Нажмите Выполнить аудит. DevTools показывает вам список категорий аудита. Оставьте их все включенными.

6. Нажмите Запустить аудит. Через 30-60 секунд Lighthouse выдает вам отчет о странице.

Установите и запустите инструмент командной строки Node.

Чтобы установить модуль Node:

  1. Загрузите Google Chrome для рабочего стола.
  2. Установите актуальную версию Долговременной поддержки Node.
  3. Установить Маяк. Флаг -g устанавливает его как глобальный модуль.
npm install -g lighthouse

Чтобы запустить аудит:

lighthouse <url>

Чтобы увидеть все варианты:

lighthouse --help

Запустите модуль Node программно

См. Программное использование для примера программного запуска Lighthouse в качестве модуля Node.

Запустите Lighthouse как расширение Chrome

Примечание. Если у вас нет особой причины, вам следует использовать рабочий процесс Chrome DevTools, а не этот рабочий процесс расширения Chrome. Рабочий процесс DevTools позволяет тестировать локальные сайты и страницы, прошедшие проверку подлинности, а расширение — нет.

Чтобы установить расширение:

  1. Загрузите Google Chrome для рабочего стола.

2. Установите Расширение Lighthouse Chrome из интернет-магазина Chrome.

Чтобы запустить аудит:

  1. В Chrome перейдите на страницу, которую вы хотите проверить.

2. Нажмите Маяк. Он должен быть рядом с адресной строкой Chrome. Если нет, откройте главное меню Chrome и получите доступ к нему в верхней части меню. После нажатия меню Маяка расширяется.

3. Нажмите Создать отчет. Lighthouse проводит аудит текущей страницы, а затем открывает новую вкладку с отчетом о результатах.

Запустите PageSpeed ​​​​Insights

Чтобы запустить Lighthouse на PageSpeed ​​Insights:

  1. Перейдите к PageSpeed ​​​​Insights.
  2. Введите URL-адрес веб-страницы.
  3. Нажмите Анализ.

Делитесь и просматривайте отчеты онлайн

Используйте Lighthouse Viewer для просмотра и обмена отчетами в Интернете.

Делитесь отчетами в формате JSON

Средство просмотра Lighthouse Viewer нуждается в выводе отчета Lighthouse в формате JSON. В приведенном ниже списке объясняется, как получить вывод JSON, в зависимости от того, какой рабочий процесс Lighthouse вы используете:

  • Инструменты разработчика Chrome. Нажмите Загрузить отчет.
  • Командная строка. Бегать:

lighthouse --output json --output-path <path/for/output.json>

  • Просмотр маяков. Нажмите Экспорт › Сохранить как JSON.

Чтобы просмотреть данные отчета:

  1. Откройте Lighthouse Viewer в Google Chrome.
  2. Перетащите файл JSON в средство просмотра или щелкните в любом месте средства просмотра, чтобы открыть навигатор файлов и выбрать файл.

Делитесь отчетами как GitHub Gists

Если вы не хотите вручную передавать файлы JSON, вы также можете поделиться своими отчетами в виде секретных GitHub Gists. Одним из преимуществ Gists является бесплатный контроль версий.

Чтобы экспортировать отчет как Gist из отчета:

  1. (Если уже в программе просмотра, пропустите этот шаг) Нажмите Экспорт › Открыть в программе просмотра. Отчет откроется во Вьювере, расположенном по адресу https://googlechrome.github.io/lighthouse/viewer/.
  2. В средстве просмотра нажмите Поделиться.

  1. . Когда вы делаете это в первый раз, всплывающее окно запрашивает разрешение на доступ к вашим основным данным GitHub, а также на чтение и запись в ваши Gists.

Чтобы экспортировать отчет в виде Gist из CLI-версии Lighthouse, просто вручную создайте Gist и скопируйте и вставьте выходные данные отчета в формате JSON в Gist. Имя файла Gist, содержащего выходные данные JSON, должно заканчиваться на .lighthouse.report.json. См. раздел Общий доступ к отчетам в формате JSON для примера того, как генерировать выходные данные JSON из инструмента командной строки.

Чтобы просмотреть отчет, сохраненный как Gist:

  • Добавьте ?gist=<ID> к URL-адресу средства просмотра, где <ID> — это идентификатор Gist.

https://googlechrome.github.io/lighthouse/viewer/?gist=<ID>

Расширяемость маяка

Lighthouse стремится предоставить руководство, актуальное и полезное для всех веб-разработчиков. С этой целью теперь доступны две функции, которые позволяют адаптировать Lighthouse к вашим конкретным потребностям.

  • Пакеты стека. Сегодня многие разработчики используют различные технологии (бэкэнд/CMS/JavaScript-фреймворки) для создания своих веб-страниц. Вместо того, чтобы выводить только общие рекомендации, Lighthouse теперь может давать более актуальные и действенные советы в зависимости от используемых инструментов.

Пакеты стека позволяют Lighthouse определять, на какой платформе создан ваш сайт, и отображать конкретные рекомендации на основе стека. Эти рекомендации определяются и курируются экспертами сообщества.

Чтобы добавить Stack Pack, ознакомьтесь с Руководством по внесению вклада.

  • Плагины маяка. Плагины Lighthouse позволяют экспертам в данной области расширять функциональные возможности Lighthouse для своих конкретных нужд. Теперь вы можете использовать данные, которые собирает Lighthouse, для создания новых аудитов. По своей сути плагин Lighthouse представляет собой модуль узла, который реализует набор проверок, которые будут запускаться Lighthouse и добавляться в отчет как новая категория.

Для получения дополнительной информации о том, как создать собственный плагин, ознакомьтесь с нашим Руководством по плагинам в репозитории Lighthouse на GitHub.

Репозиторий LightHouse на GitHub:



GoogleChrome/lighthouse
Lighthouse анализирует веб-приложения и веб-страницы, собирая современные показатели производительности и информацию о лучших разработчиках…github.com



Использование расширения Chrome

Расширение Chrome было доступно до того, как Lighthouse стало доступно в инструментах разработчика Chrome, и предлагает аналогичную функциональность.

Установка: установить расширение из Интернет-магазина Chrome.

Запустите его: следуйте краткому руководству по расширению.

Использование интерфейса командной строки узла

Node CLI обеспечивает наибольшую гибкость в том, как можно настраивать запуски Lighthouse и сообщать о них. Пользователи, которые хотят более продвинутого использования или хотят запускать Lighthouse в автоматическом режиме, должны использовать Node CLI.

Lighthouse требует Node 10 LTS (10.13) или более поздней версии.

Установка:

npm install -g lighthouse
# or use yarn:
# yarn global add lighthouse

Запустите: lighthouse https://airhorner.com/

По умолчанию Lighthouse записывает отчет в файл HTML. Вы можете управлять форматом вывода, передавая флаги.

параметры командной строки

$ lighthouse --help
lighthouse <url>
Logging:
  --verbose  Displays verbose logging                                                                                                      [boolean]
  --quiet    Displays no progress, debug logs or errors                                                                                    [boolean]
Configuration:
  --save-assets                  Save the trace & devtools log to disk                                                                     [boolean]
  --list-all-audits              Prints a list of all available audits and exits                                                           [boolean]
  --list-trace-categories        Prints a list of all required trace categories and exits                                                  [boolean]
  --print-config                 Print the normalized config for the given config and options, then exit.                                  [boolean]
  --additional-trace-categories  Additional categories to capture with the trace (comma-delimited).
  --config-path                  The path to the config JSON.
                                 An example config file: lighthouse-core/config/lr-desktop-config.js
  --chrome-flags                 Custom flags to pass to Chrome (space-delimited). For a full list of flags, see
                                 http://peter.sh/experiments/chromium-command-line-switches/.
                                 Environment variables:
                                 CHROME_PATH: Explicit path of intended Chrome binary. If set must point to an executable of a build of
                                 Chromium version 66.0 or later. By default, any detected Chrome Canary or Chrome (stable) will be launched.
                                                                                                                                       [default: ""]
  --port                         The port to use for the debugging protocol. Use 0 for a random port                                    [default: 0]
  --preset                       Use a built-in configuration.                                            [choices: "full", "perf", "mixed-content"]
                                 WARNING: If the --config-path flag is provided, this preset will be ignored.
  --hostname                     The hostname to use for the debugging protocol.                                              [default: "localhost"]
  --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                                 [default: 45000]
  --emulated-form-factor         Controls the emulated device form factor (mobile vs. desktop) if not disabled                      [choices: "mobile", "desktop", "none"] [default: "mobile"]
  --enable-error-reporting       Enables error reporting, overriding any saved preference. --no-enable-error-reporting will do the opposite. More:
                                 https://git.io/vFFTO
  --gather-mode, -G              Collect artifacts from a connected browser and save to disk. If audit-mode is not also enabled, the run will quit
                                 early.                                                                                                    [boolean]
  --audit-mode, -A               Process saved artifacts from disk                                                                         [boolean]
Output:
  --output       Reporter for the results, supports multiple values                        [choices: "json", "html", "csv"] [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
  --view         Open HTML report in your browser                                                                                          [boolean]
Options:
  --help                        Show help                                                                                                  [boolean]
  --version                     Show version number                                                                                        [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.
  --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         [choices: "devtools", "provided", "simulate"]
  --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                                                                 [string]
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, devtoolslog, and named JSON report.
  lighthouse <url> --emulated-form-factor=none                              Disable device emulation and all throttling.
    --throttling-method=provided
  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\"}"          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,pwa                        Only run the specified categories. Available categories: accessibility,
                                                                            best-practices, performance, pwa, 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 под вашей учетной записью.

Документы и рецепты

Полезная документация, примеры и рецепты для начала работы.

Документы

Рецепты

Дополнительную информацию о Lighthouse см. в репозитории GitHub



GoogleChrome/lighthouse
Lighthouse анализирует веб-приложения и веб-страницы, собирая современные показатели производительности и информацию о лучших разработчиках…github.com



Или вы можете посмотреть видео

Чтобы узнать больше об обновлениях, оставайтесь на связи Приложение Ionic Firebase