Что нового в Lighthouse 9.0

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

Lighthouse 9.0 доступен сразу из командной строки, в Chrome Canary и в PageSpeed ​​Insights . Он появится в стабильной версии Chrome в Chrome 98.

Изменения API

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

Полный список изменений смотрите в журнале изменений версии 9.0 .

Маяк для пользовательских потоков

У Lighthouse есть новый API пользовательского потока, который позволяет проводить лабораторное тестирование в любой момент жизненного цикла страницы.

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

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

Дополнительные сведения см. в руководстве по пользовательским потокам Lighthouse и примерах кода .

Обновление отчета

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

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

Отчет Lighthouse 9.0, в котором ключевые показатели производительности перечислены более наглядно и в отчет о производительности встроен снимок экрана окончательного вида страницы.

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

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

Чтобы увидеть новый отчет в действии, попробуйте Lighthouse 9.0 или посетите этот пример отчета .

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

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

В Lighthouse 9.0 теперь перечислены все элементы, имеющие этот идентификатор:

Аудит Lighthouse для «Все фокусируемые элементы должны иметь уникальный идентификатор», показывающий два элемента с одинаковым идентификатором.

Эта функциональность «связанных узлов» предоставляется axe-core , поэтому она также может появляться в других проверках доступности.

Дополнительные сведения см. в разделе «Проблема со сбором пользовательских отчетов и запрос на включение реализации» .

Бегущий маяк

Lighthouse доступен в Chrome DevTools, npm (как модуль Node и CLI) и как расширение браузера (в Chrome и Firefox ). Он поддерживает многие сервисы Google, включая web.dev/measure и PageSpeed ​​Insights .

Чтобы попробовать интерфейс командной строки Lighthouse Node, используйте следующие команды:

npm install -g lighthouse
lighthouse https://www.example.com --view

Свяжитесь с командой Маяк

Чтобы обсудить новые функции, изменения в версии 9.0 или что-либо еще, связанное с Lighthouse: