Обзор
Содержание
Lighthouse — Chrome Developers
Lighthouse — это автоматизированный инструмент с открытым исходным кодом для улучшения качества веб-страниц. Вы можете запустить его на любой веб-странице, общедоступной или требующей аутентификации. У него есть аудиты производительности, доступности, прогрессивных веб-приложений, SEO и многого другого.
Вы можете запустить Lighthouse в Chrome DevTools, из командной строки или как модуль Node. Вы даете Lighthouse URL-адрес для аудита, он запускает серию аудитов страницы, а затем создает отчет о том, насколько хорошо страница работала. Оттуда используйте неудачные проверки как индикаторы того, как улучшить страницу. У каждого аудита есть справочный документ, объясняющий, почему аудит важен, а также как его исправить.
Вы также можете использовать Lighthouse CI для предотвращения регрессии на своих сайтах.
Посмотрите видео ниже от Google I/O, чтобы узнать больше о том, как использовать Lighthouse и вносить в него свой вклад.
# Начало работы
Выберите рабочий процесс Lighthouse, который вам больше всего подходит:
- В Chrome DevTools. Легко проверяйте страницы, требующие аутентификации, и читайте отчеты в удобном для пользователя формате.
- Из командной строки. Автоматизируйте запуск Lighthouse с помощью сценариев оболочки.
- Как модуль узла. Интегрируйте Lighthouse в свои системы непрерывной интеграции.
- Из веб-интерфейса. Запускайте Lighthouse и ссылайтесь на отчеты, ничего не устанавливая.
Рабочие процессы CLI и Node требуют, чтобы на вашем компьютере был установлен экземпляр Google Chrome.
# Запустите Lighthouse в Chrome DevTools
Lighthouse имеет собственную панель в Chrome DevTools. Чтобы запустить отчет:
Загрузите Google Chrome для ПК.
В Google Chrome перейдите по URL-адресу, который вы хотите проверить. Вы можете проверить любой URL-адрес в Интернете.
Откройте Chrome DevTools.
Перейдите на вкладку Маяк .
Слева находится область просмотра страницы, которая будет проверяться. Справа находится панель Lighthouse Chrome DevTools на базе Lighthouse
Нажмите Анализ загрузки страницы . DevTools показывает вам список категорий аудита. Оставьте их все включенными.
Нажмите Запустить аудит . Через 30-60 секунд Lighthouse выдает вам отчет о странице.
Отчет Lighthouse в Chrome DevTools
# Установите и запустите инструмент командной строки Node
Чтобы установить модуль Node:
- Загрузите Google Chrome для рабочего стола.
- Установите текущую версию Node с долгосрочной поддержкой.
- Установить Маяк. Флаг
-g
устанавливает его как глобальный модуль.
npm install -g lighthouse
Для запуска аудита:
lighthouse
Чтобы просмотреть все параметры:
lighthouse --help
# Запустить модуль Node программно
См. Программное использование для примера запускать Lighthouse программно, как модуль Node.
# Запустить PageSpeed Insights
Чтобы запустить Lighthouse на PageSpeed Insights:
Перейдите к PageSpeed Insights.
Введите URL-адрес веб-страницы.
Нажмите Анализ .
Пользовательский интерфейс PageSpeed Insights
# Запустите Lighthouse как расширение Chrome
Если у вас нет особой причины, вам следует использовать рабочий процесс Chrome DevTools, а не этот рабочий процесс расширения Chrome. Рабочий процесс DevTools позволяет тестировать локальные сайты и страницы, прошедшие проверку подлинности, а расширение — нет.
Чтобы установить расширение:
- Загрузите Google Chrome для ПК.
- Установите расширение Lighthouse Chrome из интернет-магазина Chrome.
Чтобы запустить аудит:
В Chrome перейдите на страницу, которую вы хотите проверить.
Щелкните Маяк. Он должен быть рядом с адресной строкой Chrome. Если нет, откройте меню расширений Chrome и получите к нему доступ оттуда. После нажатия меню Маяка расширяется.
Панель расширения Lighthouse
Нажмите Создать отчет . Lighthouse проводит аудит текущей страницы, а затем открывает новую вкладку с отчетом о результатах.
Отчет Lighthouse с внутреннего номера
# Предоставление общего доступа и просмотр отчетов в Интернете
Используйте Lighthouse Viewer для просмотра и обмена отчетами в Интернете.
Средство просмотра Lighthouse
# Делитесь отчетами в формате JSON
Средство просмотра Lighthouse требует выходных данных отчета Lighthouse в формате JSON. В приведенном ниже списке объясняется, как получить выходные данные JSON в зависимости от используемого рабочего процесса Lighthouse:
Для просмотра данных отчета:
- Откройте средство просмотра Lighthouse.
- Перетащите файл JSON в средство просмотра или щелкните в любом месте средства просмотра, чтобы открыть навигатор файлов и выбрать файл.
# Делитесь отчетами как GitHub Gists
Если вы не хотите вручную передавать файлы JSON, вы также можете поделиться своими отчетами как секретными GitHub Gists. Одним из преимуществ gists является бесплатный контроль версий.
Чтобы экспортировать отчет как суть из отчета:
- (если уже используется средство просмотра, пропустите этот шаг) Откройте меню в правом верхнем углу, затем нажмите Открыть в программе просмотра . Отчет открывается в средстве просмотра, расположенном по адресу
https://googlechrome.github.io/lighthouse/viewer/
. - В средстве просмотра откройте меню в верхнем правом углу и нажмите Сохранить как Gist . Когда вы делаете это в первый раз, всплывающее окно запрашивает разрешение на доступ к вашим базовым данным GitHub, а также на чтение и запись ваших сущностей.
Чтобы экспортировать отчет как суть из CLI-версии Lighthouse, вручную создайте суть и скопируйте и вставьте выходные данные отчета в формате JSON в суть. Имя основного файла, содержащего выходные данные JSON, должно заканчиваться на 9.0074 .lighthouse.report.json . См. раздел Совместное использование отчетов в формате JSON, где приведен пример создания выходных данных JSON с помощью инструмента командной строки.
Чтобы просмотреть отчет, который был сохранен как суть:
# Расширяемость Lighthouse
Lighthouse стремится предоставить рекомендации, актуальные и полезные для всех веб-разработчиков. С этой целью доступны две функции, которые позволяют адаптировать Lighthouse к вашим конкретным потребностям.
# Stack Packs
Разработчики используют множество различных технологий (бэкэнд/CMS/JavaScript-фреймворки) для создания своих веб-страниц. Вместо того, чтобы выводить только общие рекомендации, Lighthouse теперь может давать более актуальные и действенные советы в зависимости от используемых инструментов.
«Пакеты стеков» позволяют Lighthouse определять, на какой платформе создан ваш сайт, и отображать конкретные рекомендации на основе стеков. Эти рекомендации определяются и курируются экспертами сообщества.
Чтобы внести пакет стека, ознакомьтесь с Руководством по внесению вклада.
# Плагины Lighthouse
Плагины Lighthouse позволяют специалистам в предметной области расширять функциональные возможности Lighthouse для конкретных нужд своего сообщества. Теперь вы можете использовать данные, которые собирает Lighthouse, для создания новых аудитов. По своей сути плагин Lighthouse — это модуль узла, который реализует набор проверок, которые будут запускаться Lighthouse и добавляться в отчет как новая категория.
Для получения дополнительной информации о том, как создать собственный плагин, ознакомьтесь с нашим Руководством по плагинам в репозитории Lighthouse на GitHub.
# Интеграция Lighthouse
Если вы представляете компанию или частное лицо, которое интегрирует Lighthouse как часть продуктов/услуг, которые вы предлагаете, обо всем по порядку – мы очень вас взволновали! Мы хотим, чтобы как можно больше людей использовали Lighthouse, и это руководство и активы бренда для интеграции Lighthouse предназначены для того, чтобы вам было просто показать, что Lighthouse находится под капотом, защищая наш бренд.
# Внесите вклад в Lighthouse
Lighthouse является открытым исходным кодом, и участие приветствуется! Проверьте систему отслеживания ошибок репозитория, чтобы найти ошибки, которые вы можете исправить, или аудиты, которые вы можете создать или улучшить. Трекер проблем также является хорошим местом для обсуждения показателей производительности, идей для новых аудитов или всего, что связано с Lighthouse.
Развертывание политики JSON — Chrome
Шаг 1. Создайте файл конфигурации политики Keeper JSON
1.
Если в настоящее время у вас нет созданных файлов политики JSON, в которых вы хотите использовать расширение Keeper Browser для всех ПК в вашей организации, перейдите к созданию файла политики Keeper JSON в нужном месте, например : /tmp и назовите его keeperbe.
json
Создание файла keeperbe.json через графический интерфейс Linux
ИЛИ создайте файл keeperbe.json через командную строку
ctmp0002 touch keeperbe.json
2. В предпочитаемом редакторе файлов JSON или базовом редакторе файлов скопируйте, вставьте и сохраните содержимое, указанное ниже, в файл keeperbe,json или файл политики, который вы в настоящее время используете для своей организации. .
«ExtensionSettings»: {
«bfogiafebfohielmmehodmfbbebbbpei»: {
«installation_mode»: «force_installed»,
«update_url»:
«https://0clients2.google.com/service/update20/crx»/update20003
«installation_mode»: «force_installed».
Шаг 2. Настройка папок конфигурации
Если в настоящее время у вас настроены папки конфигурации для пользовательских ПК в вашей организации, перейдите к шагу 3: развертывание файла политики Keeper JSON.
На каждом ПК в вашей организации, к которому вы хотите применить эту политику, вам потребуется как минимум одна папка для применения этой политики.
1.
Если он еще не существует, создайте дословную структуру каталогов следующим образом;
/etc/opt/chrome/policies/managed
и установите соответствующие разрешения для этого каталога.
Создание управляемого каталога политик через графический интерфейс Linux
ИЛИ создание структуры каталогов через командную строку
mkdir /etc/opt/chrome/policies/managed
chmod -w /etc/opt/chrome/policies /managed
Создание этого каталога, скорее всего, НЕ будет в том же каталоге, где установлен Chrome на целевых устройствах Linux. Пример: мой установленный каталог Chrome — /opt/google/chrome, но мой управляемый каталог политик, в котором моя организация управляет моей установкой Chrome, находится в каталоге /etc/opt/chrome/policies/managed.
Шаг 3. Развертывание файла политики Keeper JSON
Используйте предпочтительный метод (утилиту или сценарий) для отправки файла политики keeperbe.json и браузера Chrome на целевые устройства Linux в вашей организации.
1.
Поместите файл keeperbe.json в каталог
/etc/opt/chrome/policies/managed
на всех целевых устройствах Linux в вашей сети.