13. Lighthouse & DevTools

Lighthouse — это автоматический инструмент аудита от Google. Оценивает производительность, SEO, доступность и лучшие практики по шкале 0-100.

Запуск Lighthouse

Chrome DevTools

F12 → Lighthouse → Analyze page load

Выберите:

✅ Performance
✅ Accessibility
✅ Best Practices
✅ SEO
Устройство: Mobile / Desktop

CLI

npm install -g lighthouse

# Базовый аудит
lighthouse https://example.com --output html --output-path report.html

# Только производительность
lighthouse https://example.com --only-categories=performance

# Мобильный аудит
lighthouse https://example.com --emulated-form-factor=mobile

# JSON вывод для CI
lighthouse https://example.com --output json --output-path report.json

PageSpeed Insights

https://pagespeed.web.dev/

Показывает реальные данные из Chrome UX Report (CrUX) + Lighthouse.

Что проверяет Lighthouse?

Performance (0-100)

Метрика	Вес	Описание
FCP	10%	First Contentful Paint
LCP	25%	Largest Contentful Paint
TBT	30%	Total Blocking Time
CLS	15%	Cumulative Layout Shift
Speed Index	10%	Визуальная скорость
TTI	10%	Time to Interactive

Цели: 90+ отлично, 50-89 нужно улучшить, < 50 плохо.

SEO (0-100)

Title и meta description
Robots.txt и canonical
Viewport meta тег
Читаемый размер текста
Правильные ссылки
Структурированные данные

Accessibility (0-100)

Alt-теги для изображений
Контрастность текста
ARIA атрибуты
Заголовки (правильная иерархия)
Фокусируемые элементы

Best Practices

HTTPS
Нет ошибок в консоли
Современные API
Безопасные запросы

Chrome DevTools — Performance Panel

Запись профиля

1. F12 → Performance
2. Нажмите Record (или Ctrl+Shift+E)
3. Взаимодействуйте со страницей
4. Нажмите Stop

Что искать в профиле

Main Thread:
- Long Tasks (красные!) → > 50ms блокировки
- Layout (фиолетовый) → reflow
- Paint (зелёный) → перерисовка
- Script (жёлтый) → JS выполнение

Network:
- Большие ресурсы
- Медленные запросы (TTFB > 200ms)
- Очередь запросов (HTTP/1.1)

Memory:
- Постоянный рост → memory leak
- GC паузы → частая сборка мусора

Network Panel

F12 → Network

Фильтры:
- JS, CSS, Img, XHR — по типу ресурса
- Large requests row — размеры видны
- Capture screenshots — видеозапись загрузки

Полезные метрики:
- DOMContentLoaded (синяя линия)
- Load (красная линия)
- TTFB (первый байт ответа)

Автоматизация в CI/CD

// Запуск Lighthouse в GitHub Actions
name: Lighthouse CI
on: [push]

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
      - run: npm ci
      - run: npm run build
      - run: npm install -g @lhci/cli
      - run: lhci autorun

module.exports = {
  ci: {
    collect: {
      url: ['http://localhost:3000/', 'http://localhost:3000/about/'],
      startServerCommand: 'npm start',
    },
    assert: {
      assertions: {
        'categories:performance': ['warn', { minScore: 0.9 }],
        'categories:seo': ['error', { minScore: 0.9 }],
        'categories:accessibility': ['warn', { minScore: 0.9 }],
      },
    },
    upload: {
      target: 'temporary-public-storage',
    },
  },
};

Web Vitals в Production

// Отправка метрик в аналитику
import { onCLS, onFCP, onINP, onLCP, onTTFB } from 'web-vitals';

function sendToAnalytics({ name, value, rating, id }) {
  // Google Analytics 4
  gtag('event', name, {
    event_category: 'Web Vitals',
    event_label: id,
    value: Math.round(name === 'CLS' ? value * 1000 : value),
    non_interaction: true,
    metric_rating: rating, // 'good', 'needs-improvement', 'poor'
  });
}

onCLS(sendToAnalytics);
onFCP(sendToAnalytics);
onINP(sendToAnalytics);
onLCP(sendToAnalytics);
onTTFB(sendToAnalytics);