Lighthouse

Lighthouse — встроенный в Chrome инструмент аудита веб-страниц по производительности, доступности, SEO и best practices.

Зачем нужно

Lighthouse даёт конкретные баллы (0–100) и рекомендации по улучшению. Это стандартный инструмент для оценки качества веб-приложений перед деплоем.

Где используется

  • Chrome DevTools → вкладка Lighthouse
  • CLI: npx lighthouse https://example.com
  • CI/CD пайплайны — автоматические проверки при деплое
  • PageSpeed Insights (Google) — использует Lighthouse под капотом

Предпосылки

5 категорий аудита

Категория Что проверяет
Performance LCP, FID, CLS, TTI, Speed Index
Accessibility Контраст, alt, ARIA, фокус
Best Practices HTTPS, console errors, image aspect ratio
SEO meta tags, robots.txt, mobile-friendly
PWA Service Worker, manifest, offline

Как запустить

В Chrome DevTools

  1. F12 → вкладка Lighthouse
  2. Выбери категории и устройство (Mobile/Desktop)
  3. Analyze page load

Через CLI

npm install -g lighthouse
lighthouse https://example.com --output html --output-path report.html

В CI (GitHub Actions)

- name: Lighthouse CI
  uses: treosh/lighthouse-ci-action@v10
  with:
    urls: https://my-app.com
    budgetPath: ./budget.json()

Ключевые метрики Performance

Метрика Что измеряет Хороший результат
LCP Время до отрисовки главного контента < 2.5s
FID Задержка до интерактивности < 100ms
CLS Визуальная стабильность < 0.1
TTI Время до полной интерактивности < 3.8s

Типичные рекомендации Lighthouse

  • Сжать изображения → WebP/AVIF
  • Убрать неиспользуемый CSS/JS → Code splitting
  • Добавить loading="lazy" → Lazy loading
  • Включить сжатие (gzip/brotli)
  • Использовать CDN → Caching стратегии

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

  • Тестировать только Desktop — мобильный скор обычно ниже
  • Игнорировать Accessibility — это влияет на SEO
  • Гнаться за 100/100 — в реальных проектах 90+ уже отлично

Связанные темы

Ресурсы

Предыдущая: Оптимизация изображений | Следующая: _MOC Производительность