Lighthouse — это автоматизированный инструмент с открытым исходным кодом для улучшения качества ваших веб-приложений. Вы можете установить его как расширение Chrome или запустить как инструмент командной строки Node. Когда вы даете Lighthouse URL-адрес, он запускает множество тестов для страницы, а затем генерирует отчет, объясняющий, насколько хорошо страница работала, и указывающий области для улучшения.
Сегодня мы рады объявить о выпуске Lighthouse 1.5 , огромном выпуске, получившем более 128 PR . Lighthouse 1.5 включает в себя множество крупных новых функций, проверок и обычных исправлений ошибок. Вы можете установить его из npm ( npm i -g lighthouse ) или загрузить расширение из Интернет-магазина Chrome.
Новые аудиты
Аудит использования CSS сообщает о количестве неиспользуемых правил стиля на вашей странице и экономии средств и времени на их удаление:
Аудит оптимизированных изображений сообщает об изображениях, которые не оптимизированы, а также об экономии затрат и времени на их оптимизацию:
Аудит адаптивных изображений сообщает об изображениях, которые слишком велики, и о потенциальной экономии средств и времени при правильном изменении их размера для данного устройства:
В аудите устаревания и вмешательств перечислены предупреждения консоли Chrome, если на вашей странице используются устаревшие API или функции, требующие вмешательства :
Сообщить об изменениях
Как вы видели, мы сосредоточились на том, чтобы сделать отчет менее визуально загроможденным, добавив табличные данные, скрыв лишний текст справки и добавив новые функции, упрощающие навигацию по данным.
Настройки эмуляции
Легко забыть, какие настройки регулирования и эмуляции использовались для конкретного запуска Lighthouse. Отчеты Lighthouse теперь включают настройки эмуляции времени выполнения , которые использовались для создания отчета; давний запрос функции :
Более полезные данные трассировки
Метрики-маяки, такие как «Первая осмысленная отрисовка», «Время взаимодействия» и т. д., моделируются как показатели пользовательского времени и вводятся обратно в данные трассировки, сохраненные с флагом --save-assets .
Если вы используете флаг --save-assets , теперь вы можете переместить трассировку в DevTools или открыть ее в средстве просмотра временной шкалы DevTools . Вы сможете увидеть свои ключевые показатели в контексте полной трассировки загрузки страницы.
Наблюдатель маяка
В отчетах HTML вы увидите новую кнопку с возможностью экспорта отчета в различные форматы. Один из этих вариантов — «Открыть в средстве просмотра». При нажатии на эту кнопку отчет будет отправлен в онлайн- просмотрщик , где вы сможете в дальнейшем поделиться им с пользователями GitHub.
За кулисами Viewer получает ваше разрешение через OAuth на создание секретного списка GitHub и сохраняет там отчет. Поскольку это делается как ваш Gist, вы сохраняете полный контроль над обменом отчетом и можете удалить его в любое время. Вы можете отозвать разрешение средства просмотра на создание сводных материалов в настройках GitHub .
Эксперимент по производительности
Первая версия проекта Performance Experiment появилась в версии 1.5.0. Это позволяет вам экспериментировать с производительностью загрузки страниц, интерактивно тестируя эффекты блокировки или задержки ресурсов на критическом пути во время разработки .
Когда Lighthouse запускается с флагом --interactive , создается специальный отчет, позволяющий интерактивно выбирать дорогостоящие ресурсы страницы. Затем сервер эксперимента повторно запускает Lighthouse на этой странице с заблокированными ресурсами.
Узнайте больше об эксперименте с производительностью в Lighthouse.
Новая документация
И последнее, но не менее важное: мы обновили документацию на странице Developers.google.com/web/tools/lighthouse/ и добавили новые ссылки на аудит.
Вот и все!
Все подробности о последних версиях Lighthouse см. в полных примечаниях к выпуску на GitHub. Как всегда, свяжитесь с нами, чтобы сообщить об ошибках , отправить запрос на добавление функций или обсудить идеи о том, что вы хотели бы видеть дальше.