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