Налаштування автоматичного звіту Lighthouse при кожному деплої

Настройка автоматичного звіту Lighthouse при кожному деплої

Lighthouse запускають вручну, коли що-то вже сломалося. Автоматичний запуск при кожному деплої переворачує логіку: регресії видні до того, як попали в прод, та есть точний коммит, який їх викликав.

Мінімальний стек

Мінімум: CI/CD (GitHub Actions, GitLab CI, CircleCI) + Lighthouse CI CLI + місце для зберігання. Опціонально: LHCI сервер для історії та порівняння.

Встановлення та базова настройка

npm install --save-dev @lhci/cli

Конфіг .lighthouserc.js:

module.exports = {
  ci: {
    collect: {
      url: [
        'http://localhost:3000/',
        'http://localhost:3000/about',
        'http://localhost:3000/catalog',
        'http://localhost:3000/product/test-product',
      ],
      numberOfRuns: 3,
      startServerCommand: 'npm run start:ci',
      startServerReadyPattern: 'ready on',
      startServerReadyTimeout: 30000,
    },
    assert: {
      assertions: {
        'categories:performance': ['warn', { minScore: 0.8 }],
        'categories:accessibility': ['error', { minScore: 0.9 }],
        'categories:best-practices': ['warn', { minScore: 0.85 }],
        'categories:seo': ['error', { minScore: 0.9 }],
        'first-contentful-paint': ['warn', { maxNumericValue: 2000 }],
        'largest-contentful-paint': ['error', { maxNumericValue: 2500 }],
        'total-blocking-time': ['warn', { maxNumericValue: 300 }],
        'cumulative-layout-shift': ['error', { maxNumericValue: 0.1 }],
        'speed-index': ['warn', { maxNumericValue: 3400 }],
      },
    },
    upload: {
      target: 'temporary-public-storage',
      // або свій LHCI сервер:
      // target: 'lhci',
      // serverBaseUrl: 'https://lhci.example.com',
      // token: process.env.LHCI_TOKEN,
    },
  },
};

GitHub Actions Workflow

name: Lighthouse CI

on:
  push:
    branches: [main, master]
  pull_request:
    branches: [main, master]

jobs:
  lighthouse:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm

      - name: Install dependencies
        run: npm ci

      - name: Build
        run: npm run build

      - name: Run Lighthouse CI
        run: |
          npm install -g @lhci/[email protected]
          lhci autorun
        env:
          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
          LHCI_TOKEN: ${{ secrets.LHCI_TOKEN }}

LHCI_GITHUB_APP_TOKEN потрібен щоб LHCI залишав статус-чеки на PR та посилання на звіт прямо в інтерфейсі GitHub.

Self-Hosted LHCI Сервер

temporary-public-storage зручен для старту, але зберігає дані тільки 7 днів та не дозволяє порівнювати PR з baseline. Для командного використання піднімаємо свій сервер:

# docker-compose.yml
services:
  lhci-server:
    image: patrickhulce/lhci-server:latest
    ports:
      - "9001:9001"
    volumes:
      - lhci-data:/data
    environment:
      LHCI_STORAGE__SQL_DIALECT: sqlite
      LHCI_STORAGE__SQL_DATABASE_PATH: /data/lhci.db
      LHCI_BASIC_AUTH__USERNAME: admin
      LHCI_BASIC_AUTH__PASSWORD: ${LHCI_ADMIN_PASSWORD}

volumes:
  lhci-data:

Після запуску створюємо проект та токен:

lhci wizard
# Слідуємо інструкціям, отримуємо BUILD_TOKEN

Уведомлення про деградацію в Slack

LHCI сам по собі не відправляє Slack-сповіщення, але це легко додати через крок в CI:

- name: Check Lighthouse results and notify
  if: always()
  run: |
    RESULT=$(cat .lighthouseci/manifest.json | jq -r '.[0].summary.performance')
    SCORE=$(echo "$RESULT * 100" | bc | cut -d. -f1)

    if [ "$SCORE" -lt "80" ]; then
      curl -X POST ${{ secrets.SLACK_WEBHOOK }} \
        -H 'Content-Type: application/json' \
        -d "{\"text\": \":warning: Lighthouse Performance score dropped to ${SCORE}/100\"}"
    fi

Перевірка конкретних аудитів

Окрім категорійних скорів, перевіряємо конкретні аудити:

// .lighthouserc.js
assert: {
  assertions: {
    'render-blocking-resources': 'error',
    'unsized-images': 'error',
    'no-document-write': 'warn',
    'uses-webp-images': 'warn',
    'prioritize-lcp-image': 'warn',
  },
},

Терміни

Базова настройка LHCI в GitHub Actions з temporary-public-storage — 2–4 години. Self-hosted LHCI сервер + Slack-сповіщення + настройка порогів для ключових сторінок — 1–2 робочих дні. Повноцінна система з паралельним запуском, історією, порівнянням з baseline та інтеграцією в ревью-процес — 3–5 робочих днів.