Lighthouse в Chrome DevTools: как проверить страницу и читать результаты

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

Как открыть Lighthouse

1. Откройте нужную страницу в Chrome
2. Нажмите правой кнопкой мыши и выберите «Просмотреть код» или откройте инструменты разработчика сочетанием клавиш
3. Перейдите на вкладку Lighthouse. Если её не видно, она может прятаться за значком двойной стрелки в списке вкладок
4. Выберите режим, устройство и категории, затем запустите анализ

Подготовка к честному замеру

• Используйте окно инкогнито: расширения браузера влияют на результат
• Закройте тяжёлые вкладки и программы
• Проверяйте рабочую версию сайта, а не локальную
• Повторите замер два-три раза: результаты скорости колеблются от запуска к запуску

Режимы проверки

Навигация

Стандартный режим: страница загружается с нуля, и Lighthouse оценивает загрузку. Подходит для большинства задач.

Период

Записывает взаимодействия за промежуток времени: вы кликаете, открываете меню, заполняете форму. Полезен для поиска задержек при работе со страницей.

Снимок

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

Категории отчёта

• Производительность — скорость загрузки и отзывчивость
• Доступность — удобство для людей с ограничениями: контраст, подписи, порядок заголовков
• Лучшие практики — безопасность, ошибки в консоли, устаревшие API
• SEO — базовые проверки: title, description, индексируемость, alt, читаемые размеры шрифтов, корректные ссылки

Метрики производительности

В отчёте вы увидите время отрисовки первого контента, отрисовку крупнейшего элемента, общее время блокировки, сдвиги макета и индекс скорости. Общий балл складывается из них с разными весами.

Важно: показатель отзывчивости INP в лабораторном режиме навигации не измеряется. Его косвенно отражает общее время блокировки.

Лабораторные и полевые данные

Lighthouse работает в лаборатории: одна загрузка, искусственно замедленная сеть и процессор. Реальные посетители из Ташкента заходят с разных телефонов и сетей. Поисковик учитывает именно реальные данные — их видно в отчёте Core Web Vitals в Search Console и в PageSpeed Insights, если трафика достаточно.

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

Как читать рекомендации

Раздел «Возможности» показывает, что ускорит страницу: сжатие изображений, удаление неиспользуемого кода, отложенную загрузку скриптов. Раздел «Диагностика» объясняет причины. Начинайте с пунктов, которые касаются главного изображения и блокирующих ресурсов: они дают наибольший эффект.

Типичные ошибки интерпретации

• Гонка за баллом 100 вместо исправления реальных проблем
• Проверка только главной страницы, хотя трафик идёт на карточки и статьи
• Сравнение результатов, полученных на разных компьютерах
• Игнорирование категории доступности: многие её пункты улучшают и удобство, и SEO

Проверка SEO-категории

SEO-раздел Lighthouse проверяет только базу: есть ли title и description, не закрыта ли страница от индексации, есть ли у ссылок понятный текст, заданы ли alt у изображений, валиден ли файл robots.txt, нормальный ли размер шрифта и элементов для нажатия на телефоне. Полный балл в этой категории не означает, что страница хорошо оптимизирована: здесь не оцениваются семантика, полнота ответа и ссылки. Зато низкий балл — точный сигнал о базовой ошибке, которую стоит исправить сразу.

Когда звать разработчика

Если рекомендации касаются серверного ответа, сборки скриптов или шаблона темы, сохраните отчёт в формате JSON или HTML и передайте разработчику. Так он увидит те же данные, что и вы.