Frontend Academy · Урок

Автоматические проверки Lighthouse

Добавьте действие Lighthouse CI для GitHub, установите пороги производительности и доступности и блокируйте слияния, ухудшающие основные веб-показатели

Урок 4 из 414 шагов

«Автоматические проверки Lighthouse» — бесплатный урок Frontend Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.

Зачем автоматизировать Lighthouse

Ручные запуски Lighthouse выявляют ухудшение производительности слишком поздно — обычно после жалобы реального пользователя. Автоматизированный Lighthouse CI запускается для каждого PR, останавливает сборки при ухудшении ключевых показателей и отслеживает оценки во времени. Относитесь к производительности как к набору тестов.

Lighthouse CI

Набор инструментов с открытым исходным кодом Lighthouse CI (lhci) от Google: он запускает Lighthouse несколько раз, вычисляет медиану, проверяет пороговые значения и загружает результаты.

npm install -D @lhci/cli

# Run locally:
npx lhci autorun

Конфигурация lighthouserc.json

Настройте адреса для проверки, количество запусков и утверждения.

// lighthouserc.json
{
  "ci": {
    "collect": {
      "url": [
        "http://localhost:3000",
        "http://localhost:3000/blog",
        "http://localhost:3000/pricing"
      ],
      "numberOfRuns": 5,
      "startServerCommand": "npm run start"
    },
    "assert": {
      "assertions": {
        "categories:performance":   ["error", { "minScore": 0.9 }],
        "categories:accessibility": ["error", { "minScore": 0.95 }],
        "categories:seo":            ["warn", { "minScore": 0.9 }],
        "largest-contentful-paint":  ["error", { "maxNumericValue": 2500 }],
        "total-blocking-time":       ["error", { "maxNumericValue": 200 }],
        "cumulative-layout-shift":   ["error", { "maxNumericValue": 0.1 }]
      }
    },
    "upload": {
      "target": "temporary-public-storage"
    }
  }
}

Интеграция с GitHub Actions

Официальное действие treosh/lighthouse-ci-action запускает lhci для каждого PR и публикует проверку статуса.

# .github/workflows/lighthouse.yml
name: Lighthouse CI
on: [pull_request]
jobs:
  audit:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: '20', cache: 'npm' }
      - run: npm ci && npm run build
      - uses: treosh/lighthouse-ci-action@v11
        with:
          configPath: ./lighthouserc.json
          uploadArtifacts: true
          temporaryPublicStorage: true

Медиана нескольких запусков

Оценки Lighthouse различаются между запусками из-за случайных временных колебаний. numberOfRuns: 5 вычисляет медиану — этого достаточно для стабильной проверки пороговых значений. Менее трех запусков дают нестабильные результаты.

Бюджеты производительности

Помимо оценок, задавайте строгие ограничения на размер и количество ресурсов. Сборка завершается с ошибкой, если ограничения превышены.

// budget.json
[
  {
    "resourceSizes": [
      { "resourceType": "script", "budget": 300 },
      { "resourceType": "image", "budget": 100 }
    ],
    "resourceCounts": [
      { "resourceType": "third-party", "budget": 10 }
    ]
  }
]

// lighthouserc.json:
"collect": {
  "settings": { "budgetsPath": "./budget.json" }
}

Сервер Lighthouse CI

Разместите сервер LHCI самостоятельно, чтобы сохранять исторические данные, просматривать графики тенденций и сравнивать ветки во времени. Или используйте временное публичное хранилище для разовых результатов PR.

Проверка страниц с аутентификацией

Используйте сценарии Puppeteer, чтобы войти в систему до запуска Lighthouse.

// lighthouserc.json
"collect": {
  "puppeteerScript": "./lighthouse-login.js",
  "url": ["http://localhost:3000/dashboard"]
}

// lighthouse-login.js
module.exports = async (browser, context) => {
  const page = await browser.newPage();
  await page.goto('http://localhost:3000/login');
  await page.fill('#email', 'test@example.com');
  await page.fill('#password', 'test123');
  await page.click('button[type=submit]');
  await page.waitForNavigation();
};

Уведомления в Slack и Discord

Передавайте результаты LHCI в командный чат — ухудшение производительности заслуживает такого же внимания, как сбои тестов.

Мобильные устройства и компьютеры

По умолчанию Lighthouse использует мобильный режим (медленная сеть 4G и процессор среднего уровня). Для компьютеров задайте preset: 'desktop'. Большинству приложений в production следует проверять оба режима — в CI это будут отдельные задания.

Настройка пороговых значений

Начните с текущих оценок в качестве исходных значений. Не останавливайте PR с первого дня — сначала только фиксируйте результаты и предупреждайте. Когда команда привыкнет к рабочему процессу, постепенно повышайте требования.

За пределами Lighthouse

Lighthouse предоставляет лабораторные данные. Дополняйте их мониторингом реальных пользователей (RUM): пакет web-vitals для npm вместе с вашей аналитикой или такие сервисы, как SpeedCurve и Calibre, показывают настоящие тенденции производительности.

Быстрая проверка

Почему Lighthouse CI обычно вычисляет медиану нескольких запусков (например, пяти), а не использует результат одного запуска?

Ответь в интерактивном уроке

Повторение: автоматизированный Lighthouse

Команда lhci autorun интегрируется с CI. Настройте её в lighthouserc.json: адреса, количество запусков (5+), утверждения для категорий и показателей, а также бюджеты производительности. Для GitHub используйте treosh/lighthouse-ci-action. Разместите сервер LHCI самостоятельно, чтобы отслеживать тенденции. Для страниц с аутентификацией используйте сценарии Puppeteer. Проверяйте мобильный режим и режим для компьютеров. Начните с предупреждений и со временем ужесточайте пороговые значения. Для полной картины дополняйте проверки мониторингом RUM.

Можно начать бесплатно

Изучай HTML с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы: 41
Уроки: 163

Начать учиться бесплатно Посмотреть полный курс

Часто задаваемые вопросы

Урок «Автоматические проверки Lighthouse» бесплатный?

Да — полный текст урока «Автоматические проверки Lighthouse» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.

Чему я научусь в уроке «Автоматические проверки Lighthouse»?

Добавьте действие Lighthouse CI для GitHub, установите пороги производительности и доступности и блокируйте слияния, ухудшающие основные веб-показатели Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Frontend Academy?

Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Автоматические проверки Lighthouse»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Frontend Academy?

Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

GitHub Actions для фронтенда: проверка, тестирование и сборка
Развёртывание в Vercel, Netlify и Cloudflare Pages
Переменные окружения в CI
Автоматические проверки Lighthouse

← Назад к Frontend Academy