Lighthouse — 2learn

Что это такое

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

Почему это важно

Быстрее всего именно так получают структурированное и повторяемое мнение о странице. Пять категорий — performance, accessibility, best practices, SEO и, в браузере, PWA — пробегают меньше чем за минуту, а к каждому проваленному пункту приложены элемент, которого он касается, и описание исправления. При хорошем использовании смутное ощущение, что страница медленная или недоступная, превращается в нумерованный список. При плохом — в оценку, за которой гоняются, однако число остаётся лабораторным резюме, снятым в смоделированных условиях: страница может получить хорошую оценку и всё равно быть медленной для большинства своих пользователей.

Ключевые идеи

Это лабораторный тест на смоделированном устройстве

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

Читайте возможности улучшения раньше оценки

Оценка — взвешенное резюме, а полезная часть — список под ней. Каждая возможность улучшения сообщает оценённую экономию и конкретные ресурсы, за неё ответственные: какое изображение слишком велико, какой скрипт заблокировал первую отрисовку, какой срок жизни кэша слишком мал.

Reduce unused JavaScript         est. 210 KiB
Properly size images             est. 480 KiB   ← самый крупный, делайте первым
Eliminate render-blocking CSS    est. 120 ms

Исправление самого крупного пункта двигает оценку. Объяснение же и есть настоящий результат.

Категории находят разные вещи

Проверки accessibility ловят конкретные механические отказы: отсутствующее доступное имя, недостаточный контраст, поле формы без метки, порядок заголовков с пропущенным уровнем. Запутанный сценарий или непригодный диалог они не поймают, зато дешёвые ошибки поймают раньше пользователя. Проверки SEO ловят пропавшие метаданные и страницы, которые нельзя проиндексировать.

Он не видит ваших пользователей

Ничто в отчёте не приходит из настоящего визита. Страница с плохими полевыми данными может получить высокую оценку, если симуляция окажется доброй, а страница с отличными полевыми данными — низкую из-за одного медленного стороннего скрипта в лабораторном профиле. Оценка — дымовой тест, а правда — полевые показатели.

Запускайте его в конвейере против бюджета

Числа перестают сползать обратно только тогда, когда аудит идёт на каждой сборке и падает при выходе за порог — минимальная оценка accessibility, максимальный переданный объём. Бюджет, который требует сборка, — решение, а отчёт, который никто не открывает, — документ.

Не гонитесь за идеальной оценкой

Сотня — не цель, а её достижение часто означает удаление того, что помогает пользователям. Задайте нижнюю границу под вашу аудиторию, исправьте важные возможности улучшения и остановитесь, когда полевые данные хороши.

Практика

Проведите один аудит и займитесь самым крупным пунктом

Проведите аудит страницы, прочитайте возможности улучшения по порядку оценённой экономии и исправьте только самый крупный пункт. Запустите аудит снова.

Готово, когда: самая крупная возможность исчезла из отчёта, а затронутый ею показатель улучшился.

Добавьте порог доступности в сборку

Настройте аудит так, чтобы он выполнялся на одной показательной странице и падал, если оценка accessibility опустится ниже согласованного порога.

Готово, когда: сборка падает на странице с внесённым дефектом доступности и снова проходит, как только он исправлен.

Частые ошибки

Погоня за оценкой — усилия уходят в последние пункты, пока настоящая проблема остаётся; исправить: проходите возможности улучшения по оценённой экономии.
Отношение к одному запуску как к измерению — разница в несколько пунктов укладывается в шум и тянет за собой бессмысленную работу; исправить: повторяйте аудит и сравнивайте медианы.
Игнорирование полевых показателей — лабораторный результат не равен опыту пользователя; исправить: сверяйтесь с данными реальных пользователей рядом с отчётом.
Запуск аудита только локально перед релизом — регрессии приходят вместе с очередным коммитом; исправить: запускайте его в конвейере против бюджета.
Исправление предупреждения доступности без его понимания — проверка проходит, а интерфейс всё ещё непригоден; исправить: читайте, чего требует правило, а не только куда оно указывает.

Что читать дальше

Инструменты разработчика в браузере (02-frontend/27-browser-devtools) — панель аудита стоит рядом с инструментами, которые объясняют его находки.
Веб-производительность (Core Web Vitals) (02-frontend/26-web-performance-core-web-vitals) — показатели, из которых построена оценка производительности.
SEO (02-frontend/08-seo) — категория SEO в аудите — подмножество технической работы.