Урок 03

Lighthouse и PageSpeed Insights

Что такое Lighthouse

Lighthouse — инструмент Google для аудита страницы.

Что проверяет:

  • Performance.
  • Accessibility.
  • Best Practices.
  • SEO.
  • PWA.

Что даёт:

  • Оценку 0–100.
  • Список проблем.
  • Рекомендации.

Правило: базовая проверка — всегда.

PageSpeed Insights

PSI — веб-версия Lighthouse + CrUX.

Что даёт:

  • Field — CWV реальных пользователей.
  • Lab — Lighthouse.
  • Возможности оптимизации.
  • Диагностика.

URL: pagespeed.web.dev.

Правило: главный для CWV.

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

3 способа:

  1. Chrome DevTools → Lighthouse.
  2. PageSpeed Insights онлайн.
  3. CLI через npm.

Правило: DevTools — для отладки, PSI — для отчётов.

DevTools Lighthouse

Шаги:

  1. F12 → вкладка Lighthouse.
  2. Выбрать категории.
  3. Device — Mobile / Desktop.
  4. Analyze.

Что важно:

  • Mobile — приоритет.
  • Throttling — эмуляция 4G.
  • Clear storage — для чистого теста.

Категории

Performance — 0–100.

Что влияет:

  • FCP.
  • LCP.
  • TBT.
  • CLS.
  • SI — Speed Index.

Цель: 90+.

Accessibility — доступность.

Best Practices — безопасность, современные API.

SEO — базовая проверка.

Performance Score

Как считается: взвешенная сумма метрик.

Веса (примерно):

  • FCP — 10%.
  • SI — 10%.
  • LCP — 25%.
  • TBT — 30%.
  • CLS — 25%.

Правило: TBT влияет сильно.

TBT

Total Blocking Time — сумма времени, где main thread занят > 50 мс.

Что влияет:

  • JS.
  • Hydration.
  • Long tasks.

Цель: < 200 мс.

Правило: TBT — прокси для INP.

Чтение отчёта

Что смотреть по порядку:

  1. Metrics — какие плохие.
  2. Opportunities — что можно исправить.
  3. Diagnostics — детали.
  4. Passed audits — что уже хорошо.

Правило: начинать с Opportunities.

Opportunities

Типичные:

  • Eliminate render-blocking resources.
  • Properly size images.
  • Defer offscreen images.
  • Minify CSS / JS.
  • Remove unused CSS / JS.
  • Reduce server response times.
  • Enable text compression.

Правило: каждая — конкретное действие.

Diagnostics

Типичные:

  • Avoid enormous network payloads.
  • Serve images in modern formats.
  • Use HTTP/2.
  • Avoid long main-thread tasks.
  • Avoid multiple page redirects.

Правило: диагностика — контекст.

Что чинить первым

Приоритеты:

  1. LCP — если плохой.
  2. TBT — если влияет на INP.
  3. CLS — если > 0.1.
  4. Размер ресурсов.
  5. Render-blocking.

Правило: сначала то, что даёт максимум.

CLI

Установка:

npm install -g lighthouse

Запуск:

lighthouse https://example.com --view

Что даёт: отчёт в браузере.

Headless:

lighthouse https://example.com --output=json --output-path=report.json

Что даёт: JSON для парсинга.

CI/CD

Lighthouse CI:

npm install -g @lhci/cli

lhci autorun

Что даёт: проверка на каждом коммите.

Что важно:

  • Baseline бюджет.
  • Fail при регрессии.
  • Отчёт в PR.

Правило: автоматизировать проверку.

Lab vs Field

Lab:

  • Один прогон.
  • Синтетика.
  • Для отладки.
  • TBT, SI.

Field:

  • Реальные данные.
  • 28 дней.
  • Для решений.
  • INP, CWV.

Правило: оба нужны.

CrUX

Chrome UX Report — база реальных метрик Google.

Что даёт:

  • CWV для сайта.
  • Для origin и URL.
  • 28 дней скользящее окно.

Где смотреть:

  • PSI.
  • GSC → CWV.
  • BigQuery (детально).

GSC Core Web Vitals

GSC → Опыт → CWV:

Что показывает:

  • Группы URL.
  • Mobile / Desktop.
  • Плохие / средние / хорошие.

Что делать:

  • Клик на группу.
  • Примеры URL.
  • PSI для деталей.

Отчёт для стейкхолдеров

Что включить:

  • CWV field — общие.
  • Сколько страниц хороших.
  • Топ-5 проблем.
  • Что сделано за месяц.
  • План на следующий.

Правило: конкретика, не «всё медленно».

Практика

1. Откройте PageSpeed Insights.

2. Проверьте 5 страниц:

  • Главная.
  • Топ-курс.
  • Урок.
  • Статья.
  • Каталог.

3. Запишите CWV.

4. Прогоните Lighthouse в DevTools.

5. Найдите топ-3 проблемы.

6. Исправьте.

7. Проверьте снова.

8. Настройте Lighthouse CI.

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

1. Только DevTools:

Не видеть field

Решение: PSI.

2. Только PSI:

Не видеть деталей

Решение: DevTools.

3. Прогон на быстрой сети:

Завышенные оценки

Решение: throttling.

4. Без baseline:

Не видеть регрессий

Решение: CI.

5. Игнорировать TBT:

INP плохой

Решение: оптимизировать JS.

6. Чинить всё сразу:

Мало эффекта

Решение: приоритеты.

7. Разово:

Регрессия

Решение: мониторинг.

8. Не смотреть GSC:

CWV по группам — важно

Решение: регулярно.

Итог

  • Lighthouse — аудит страницы.
  • PSI — CWV field.
  • Mobile — приоритет.
  • TBT — ключевая метрика.
  • Lab vs Field — оба.
  • Opportunities — конкретные действия.
  • Lighthouse CI — автоматизация.
  • GSC CWV — по группам.
  • CrUX — реальные данные.
  • Регулярность — мониторинг.

Дальше — Laravel Pulse: метрики приложения.