Введение в маяк

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

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

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

Начать

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

  • В Chrome DevTools . Аудит страниц, требующих аутентификации, и чтение отчетов в удобном для пользователя формате прямо из браузера.
  • Из командной строки . Автоматизируйте запуск Lighthouse с помощью сценариев оболочки.
  • В качестве модуля Node . Интегрируйте Lighthouse в свои системы непрерывной интеграции.
  • Из веб-интерфейса . Запустите Lighthouse и получите ссылку на отчеты, установка не требуется.

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

Lighthouse имеет собственную панель в Chrome DevTools. Чтобы запустить отчет:

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

  4. Откройте вкладку «Маяк» .

    Слева находится область просмотра веб-страницы, подлежащей аудиту. Справа — панель Chrome DevTools Lighthouse .

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

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

    Отчет Lighthouse в Chrome DevTools.

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

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

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

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

lighthouse <url>

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

lighthouse --help

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

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

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

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

  1. Перейдите в PageSpeed ​​Insights .
  2. Введите URL-адрес веб-страницы.

  3. Нажмите «Анализ» .

    Веб-сайт PageSpeed ​​Insights.

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

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

  1. Загрузите Google Chrome для ПК .
  2. Установите расширение Lighthouse Chrome из интернет-магазина Chrome.

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

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

  2. Нажмите Маяк рядом с адресной строкой Chrome или в меню расширений Chrome. При нажатии меню Маяка расширяется.

    Расширение предложит вам сформировать отчет.

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

    Отчет Lighthouse, созданный расширением.

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

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

Зритель маяка

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

Средство просмотра Lighthouse Viewer требует вывода отчета Lighthouse в формате JSON. Сгенерируйте выходные данные JSON следующим образом:

  • Из репортажа Маяка . Нажмите для открытия меню, затем нажмите Сохранить как JSON
  • Командная строка . Запустите: shell lighthouse --output json --output-path <path/for/output.json>

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

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

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

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

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

  1. Откройте меню , затем нажмитеОткрыть в средстве просмотра . Отчет находится по адресу https://googlechrome.github.io/lighthouse/viewer/ .
  2. В средстве просмотра выберите меню , затем нажмитеСохранить как Gist . Когда вы делаете это в первый раз, всплывающее окно запрашивает разрешение на доступ к вашим основным данным GitHub, а также на чтение и запись в ваши списки.

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

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

  • Добавьте ?gist=<ID> к URL-адресу средства просмотра, где <ID> — это идентификатор сути. text https://googlechrome.github.io/lighthouse/viewer/?gist=<ID>
  • Откройте средство просмотра и вставьте в него URL-адрес сути.

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

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

Пакеты стека

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

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

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

Плагины маяка

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

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

Интегрировать маяк

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

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

Внести свой вклад в Маяк

Lighthouse имеет открытый исходный код, и вклад приветствуется ! Проверьте систему отслеживания ошибок репозитория, чтобы найти ошибки, которые вы можете исправить , или провести аудит, который вы можете создать или улучшить. «Проблемы» — хорошее место для обсуждения показателей производительности, идей для новых проверок или чего-либо еще, связанного с Lighthouse.