Lighthouse в Chrome DevTools: как запустить и читать отчёт

Что умеет Lighthouse и где его границы

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

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

Lighthouse в Chrome DevTools: запуск по шагам

Всё делается в обычном Chrome на компьютере, без расширений и регистрации.

• Откройте нужную страницу в окне инкогнито.
• Нажмите F12 или правой кнопкой мыши выберите «Просмотреть код».
• Найдите вкладку Lighthouse. Если её не видно, раскройте список вкладок значком двойной стрелки.
• Выберите режим: навигация, период или снимок.
• Выберите устройство. Начните с мобильного: многие посетители приходят с телефона, например по ссылке из Instagram или Telegram.
• Отметьте нужные категории и запустите анализ.
• Дождитесь отчёта и сохраните его, чтобы потом сравнить с новым замером.

Как получить честный замер

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

Если баллы всё равно заметно расходятся, ориентируйтесь на середину нескольких запусков, а не на лучший или худший результат.

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

Режимы и категории: что выбрать

Режим определяет, что именно измеряется. Для первого знакомства почти всегда подходит навигация.

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

Как читать производительность и рекомендации

Главный блок отчёта — метрики: время появления первого контента, отрисовка самого крупного элемента, общее время блокировки, сдвиги макета и индекс скорости. Итоговый балл складывается из них с разными весами, поэтому смотрите не только на число, но и на то, какая метрика «краснеет».

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

Ниже идут «Возможности» (что ускорит страницу) и «Диагностика» (почему так происходит). Разбирайте их в таком порядке:

• Главное изображение на экране: вес, формат, размеры.
• Скрипты и стили, блокирующие отрисовку.
• Неиспользуемый код и сторонние виджеты: чаты, пиксели, счётчики.
• Элементы, которые прыгают при загрузке: баннеры, шрифты, картинки без заданных размеров.

Лабораторные и полевые данные: на примере магазина

Представим интернет-магазин одежды в Ташкенте. Менеджер проверяет карточку товара на мощном ноутбуке с хорошим Wi-Fi и видит приличный балл. Но покупатели из регионов открывают её с недорогих телефонов, через мобильный интернет и нередко прямо внутри Instagram, а потом уходят, не дойдя до оплаты через Click или Payme. Балл Lighthouse этого не покажет.

Реальный опыт людей отражают полевые данные: отчёт Core Web Vitals в Search Console и блок с данными пользователей в PageSpeed Insights, если трафика достаточно. Если лабораторный и полевой результаты расходятся, верьте полевому. Lighthouse в этом случае нужен, чтобы найти причину.

SEO-категория: что она проверяет на самом деле

Этот раздел проверяет только базу: есть ли title и description, не закрыта ли страница от индексации, понятны ли тексты ссылок, заданы ли alt у изображений, корректен ли robots.txt, читаем ли шрифт и удобны ли кнопки на телефоне.

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

Типичные ошибки при работе с отчётом

Большинство проблем возникает не в инструменте, а в выводах, которые из него делают.

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

Чек-лист и передача отчёта разработчику

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

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

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

• Устройство выбрано осознанно, начато с мобильного.
• Замер сделан в инкогнито, несколько раз.
• Проверены страницы разных шаблонов.
• Сверены полевые данные в Search Console.
• Исправлено то, что влияет на главное изображение и блокирующие ресурсы.
• Базовые ошибки SEO-категории устранены.
• Повторный замер сохранён рядом с первым.