Обновление маяка за январь 2017 г.

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

Логотип маяка
Логотип маяка

Сегодня мы рады объявить о выпуске Lighthouse 1.5 , огромном выпуске, получившем более 128 PR . Lighthouse 1.5 включает в себя множество крупных новых функций, проверок и обычных исправлений ошибок. Вы можете установить его из npm ( npm i -g lighthouse ) или загрузить расширение из Интернет-магазина Chrome.

Новые аудиты

Аудит использования CSS сообщает о количестве неиспользуемых правил стиля на вашей странице и экономии средств и времени на их удаление:

Аудит использования 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. Как всегда, свяжитесь с нами, чтобы сообщить об ошибках , отправить запрос на добавление функций или обсудить идеи о том, что вы хотели бы видеть дальше.