Определение простыми словами
Lighthouse — это «технический санинспектор» для сайта. Он открывает страницу в эмулированном Chrome, замеряет загрузку, размер картинок, отзывчивость, проверяет alt у изображений и meta-теги, а потом выдаёт пять оценок: Performance, Accessibility, Best Practices, SEO, PWA. Каждая — от 0 до 100.
Главные метрики Performance — LCP, CLS, FID (с 2024 заменена на INP) — это и есть Core Web Vitals, влияющие на ранжирование в Google. Альтернативы — WebPageTest, PageSpeed Insights (использует тот же движок), GTmetrix, Sitespeed.io.
Сравнение
| Инструмент | Где запускать | Оценка | Когда брать |
|---|---|---|---|
| Lighthouse в DevTools | Chrome локально | Лабораторные данные | Дебаг во время разработки |
| PageSpeed Insights | Веб-форма Google | Lab + Field (CrUX) | Проверка SEO-влияния |
| Lighthouse CLI | CI/CD pipeline | JSON/HTML отчёт | Регрессионный контроль перед релизом |
| WebPageTest | Удалённые агенты | Видео и waterfall | Глубокий разбор по странам |
| GTmetrix | Веб-сервис | Lighthouse + свой score | Отчёт клиенту |
Кейсы использования
- Аудит лендинга перед запуском рекламы — поднять Performance до 90+ через сжатие картинок, lazy-load, отказ от тяжёлых JS-библиотек.
- Регрессия в CI — Lighthouse CI блокирует мёрж пул-реквеста, если LCP вырос больше чем на 200 мс.
- SEO-аудит — раздел SEO в Lighthouse показывает мета, заголовки, alt у картинок, mobile-friendliness.
- Доступность — поиск контрастности текста, отсутствующих aria-label, табуляции по форме.
- Негативный сценарий: гоняться за 100/100 в Performance любой ценой — выкидывать аналитику, шрифты, рекламу. Реальный бизнес проседает по конверсии. Цель — 75–90 на проде, не зелёный круг.
Технические детали
# Установка Lighthouse CLI глобально
npm install -g lighthouse
# Базовый запуск с генерацией HTML-отчёта
lighthouse https://example.com
--output=html --output-path=./report.html
--chrome-flags="--headless --no-sandbox"
# Только Performance, mobile-эмуляция
lighthouse https://example.com
--only-categories=performance
--form-factor=mobile
--throttling-method=simulate
# JSON для CI/парсинга
lighthouse https://example.com
--output=json --output-path=./result.json
--chrome-flags="--headless"
# Извлечь ключевые метрики
jq '.audits["largest-contentful-paint"].numericValue, .audits["cumulative-layout-shift"].numericValue, .categories.performance.score' result.json
# Lighthouse CI с порогами
lhci autorun --collect.url=https://example.com
--assert.assertions.performance=0.9🔥 Где это применяется
Частые вопросы
Влияет ли Lighthouse на ранжирование в Google?
Напрямую — нет. Но Core Web Vitals (LCP, CLS, INP), которые он замеряет, входят в факторы ранжирования. Хорошие баллы коррелируют с лучшими позициями в выдаче.
Почему PageSpeed Insights и Lighthouse дают разные оценки?
PSI использует Lighthouse, но добавляет реальные данные пользователей из CrUX. Лабораторный замер делается на эталонном устройстве, поэтому результаты могут отличаться от десктопного DevTools.
Как получить стабильную оценку?
Запускать минимум 5 раз и брать медиану. На локальной машине результаты прыгают на 5–15 баллов из-за фоновой нагрузки CPU. В CI используют изолированные раннеры с фиксированными ресурсами.