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