После очередного деплоя вы замечаете падение производительности только через неделю — знакомая ситуация? Ручные аудиты медленны, дороги и часто пропускают регрессии. 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+ проектах подтверждает эффективность подхода.