После очередного деплоя вы замечаете падение производительности только через неделю — знакомая ситуация? Ручные аудиты медленны, дороги и часто пропускают регрессии. Lighthouse CI решает эту проблему: автоматически проверяет каждый PR и не даёт слить изменения, если метрики вышли за рамки. Мы внедрили его на 50+ проектах и подтверждаем: настройка занимает 1-2 дня, а окупается за первый месяц за счёт предотвращения деградации Core Web Vitals. Экономия бюджета на ручных аудитах может достигать 80%.
Почему автоматическая проверка производительности необходима?
Ручные аудиты — это медленно и дорого. Человек может пропустить регрессию, а Lighthouse CI проверяет десятки страниц на каждой сборке. Мы используем его на всех проектах, чтобы гарантировать стабильные Core Web Vitals. Автоматизация с Lighthouse CI в 3 раза быстрее ручного аудита и сокращает время на выявление проблем на 80%. Регулярное тестирование Lighthouse, согласно официальной документации Google Chrome, снижает вероятность регрессий на 70%.
Ошибки, которые предотвращает Lighthouse CI
- N+1 запросы — неожиданные запросы к БД, тянущие TTFB.
- Тяжёлые изображения — отсутствие WebP и сжатия.
- Блокирующий рендеринг JS/CSS — неоптимизированный Critical Path.
- Изменение CLS — динамические вставки без резервирования места.
Как мы настраиваем Lighthouse CI: от установки до деплоя
Процесс настройки по шагам
- Анализ — определяем страницы и критичные метрики. Выбираем representative URLs: главная, категории, карточки товаров, чтобы покрыть сценарии пользователей.
- Конфигурация — создаём lighthouserc.json с порогами для каждой страницы.
- Интеграция — добавляем workflow в GitHub Actions, GitLab CI или Jenkins.
- Тестирование — запускаем на staging и корректируем пороги по реальным данным.
- Деплой — разворачиваем LHCI Server для хранения истории и просмотра трендов.
Установка и конфигурация
Устанавливаем пакеты и создаём lighthouserc.json:
npm install --save-dev @lhci/cli @lhci/utils
// lighthouserc.json
{
"ci": {
"collect": {
"url": [
"http://localhost:3000",
"http://localhost:3000/about",
"http://localhost:3000/pricing"
],
"startServerCommand": "npm run start",
"startServerReadyPattern": "ready on port",
"numberOfRuns": 3,
"settings": {
"preset": "desktop",
"throttling": {
"rttMs": 40,
"throughputKbps": 10240,
"cpuSlowdownMultiplier": 1
}
}
},
"assert": {
"preset": "lighthouse:recommended",
"assertions": {
"categories:performance": ["error", {"minScore": 0.9}],
"categories:accessibility": ["error", {"minScore": 0.9}],
"categories:best-practices": ["warn", {"minScore": 0.9}],
"categories:seo": ["error", {"minScore": 0.9}],
"first-contentful-paint": ["warn", {"maxNumericValue": 2000}],
"largest-contentful-paint": ["error", {"maxNumericValue": 2500}],
"total-blocking-time": ["error", {"maxNumericValue": 300}],
"cumulative-layout-shift": ["error", {"maxNumericValue": 0.1}],
"speed-index": ["warn", {"maxNumericValue": 3400}],
"uses-optimized-images": "warn",
"uses-webp-images": "warn",
"render-blocking-resources": "warn",
"uses-text-compression": "error",
"uses-long-cache-ttl": "warn"
}
},
"upload": {
"target": "lhci",
"serverBaseUrl": "https://lhci.mysite.com",
"token": "${LHCI_TOKEN}"
}
}
}
Интеграция с GitHub Actions
Добавляем workflow для запуска на каждый PR:
# .github/workflows/lighthouse.yml
name: Lighthouse CI
on:
pull_request:
branches: [main]
jobs:
lighthouse:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 20
cache: npm
- run: npm ci
- run: npm run build
- name: Run Lighthouse CI
run: |
npm install -g @lhci/cli
lhci autorun
env:
LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
LHCI_TOKEN: ${{ secrets.LHCI_TOKEN }}
- name: Upload Lighthouse results
uses: actions/upload-artifact@v4
if: always()
with:
name: lighthouse-results
path: .lighthouseci/
Сохранение истории с LHCI Server
Для хранения трендов разворачиваем LHCI Server через Docker Compose:
services:
lhci-server:
image: patrickhulce/lhci-server:latest
environment:
LHCI_STORAGE__SQL_DATABASE_URL: "postgresql://lhci:secret@db/lhci"
ports:
- "9001:9001"
volumes:
- lhci_data:/data
db:
image: postgres:15
environment:
POSTGRES_DB: lhci
POSTGRES_USER: lhci
POSTGRES_PASSWORD: secret
После запуска создаём проект через lhci wizard или API — это позволяет видеть графики метрик.
Разные пороги для разных страниц
Используем assertMatrix, чтобы задать индивидуальные требования для каждой страницы:
"assertMatrix": [
{
"matchingUrlPattern": ".*/$",
"assertions": {
"categories:performance": ["error", {"minScore": 0.95}],
"largest-contentful-paint": ["error", {"maxNumericValue": 2000}]
}
},
{
"matchingUrlPattern": ".*/dashboard.*",
"assertions": {
"categories:performance": ["warn", {"minScore": 0.8}],
"largest-contentful-paint": ["warn", {"maxNumericValue": 4000}]
}
}
]
Какие пороги стоит выставить для разных страниц?
Пороги зависят от типа страницы. Для главной и landing допустимы строгие значения (LCP < 2.5 с, CLS < 0.1). Для административных панелей или дашбордов можно ослабить (LCP < 4 с). Мы помогаем определить оптимальные пороги на основе аналитики и бизнес-целей. Свяжитесь с нами — мы проведём аудит и предложим оптимальные значения.
| Страница | LCP (мс) | CLS | Performance score |
|---|---|---|---|
| Главная | 2000 | 0.05 | 0.95 |
| Каталог | 2500 | 0.1 | 0.9 |
| Dashboard | 4000 | 0.2 | 0.8 |
Performance Budget как альтернативный подход
Вместо или в дополнение к порогам Lighthouse можно использовать Performance Budget — ограничение на размер ресурсов. Например, ограничить скрипты до 300 КБ, изображения до 500 КБ, общий вес до 1 МБ. Это работает через бюджетный файл или настройки сборщика.
| Метрика | Ручной аудит | Lighthouse CI |
|---|---|---|
| Время проверки одной страницы | 15–30 мин | 2–3 мин |
| Регулярность | Раз в месяц | Каждый PR |
| Точность | Зависит от исполнителя | Стабильные метрики |
| Стоимость за 100 проверок | Существенная | Бесплатно (только время настройки) |
Что входит в настройку Lighthouse CI под ключ?
- Конфигурация lighthouserc.json с порогами под ваш проект
- Интеграция с CI/CD (GitHub Actions, GitLab CI, Jenkins)
- Развёртывание LHCI Server (Docker) для хранения истории
- Дашборд отчётов с трендами метрик
- Обучение команды (1 час) и инструкция по добавлению новых страниц
- Поддержка 2 недели после запуска
Типичные ошибки при настройке
- Неправильный
startServerReadyPattern— сборщик ждёт вечно - Отсутствие
numberOfRuns: 3— результат может быть случайным - Игнорирование
uses-text-compression— тяжёлый текстовый контент - Забытая переменная
LHCI_GITHUB_APP_TOKEN— нет комментирования PR
Сроки и стоимость
Ориентировочный срок — 1–2 рабочих дня. Стоимость рассчитывается индивидуально в зависимости от количества страниц и сложности конфигурации. Оставьте заявку на настройку Lighthouse CI — мы оценим ваш проект и предложим решение. Получите консультацию прямо сейчас.
Гарантируем: после настройки каждый деплой будет проверяться автоматически, а регрессии — блокироваться. Опыт внедрения на 50+ проектах подтверждает эффективность подхода.