Frontend Academy · Урок

Аудиты и оценка Lighthouse

Запускайте Lighthouse в DevTools или CI, изучайте оценку производительности и диагностику и в первую очередь устраняйте проблемы с наибольшим потенциалом экономии.

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

Что такое Lighthouse

Lighthouse — это созданный Google инструмент аудита с открытым исходным кодом. Он имитирует загрузку страницы и выставляет оценки по категориям «Производительность», «Доступность», «Лучшие практики», «SEO» и «PWA». Инструмент встроен в Chrome DevTools и запускается из CLI или CI.

Запуск Lighthouse в DevTools

Откройте DevTools, перейдите на вкладку Lighthouse, выберите категории и устройство (мобильное или настольное), затем нажмите «Анализ загрузки страницы». Имитационная проверка занимает около 30 секунд.

Разбор оценки производительности

Оценка производительности (0–100) представляет собой взвешенное среднее следующих показателей: LCP (25%), общее время блокировки (30%), CLS (25%), FCP (10%), индекс скорости (10%). Планка установлена высоко: результат 90 и выше считается «хорошим».

Первая отрисовка содержимого (FCP)

FCP показывает момент, когда отрисован первый фрагмент содержимого (текст или изображение). Этот показатель отличается от LCP: FCP учитывает любой фрагмент, а LCP — самый крупный элемент. Хороший результат: менее 1,8 с.

Общее время блокировки (TBT)

TBT измеряет, как долго главный поток заблокирован задачами JavaScript продолжительностью более 50 мс. Высокое значение TBT означает, что страница кажется неотзывчивой, даже если выглядит готовой.

Чтение раздела «Возможности»

Lighthouse перечисляет «Возможности» с указанием предполагаемой экономии (например, «Устранение ресурсов, блокирующих отрисовку: 1,2 с»). Сортируйте их по экономии и сначала исправляйте самые значимые проблемы.

Распространённые возможности для улучшения

Частые исправления: откладывайте некритичные скрипты или загружайте их асинхронно, встраивайте критический CSS, предварительно загружайте важные запросы, используйте CDN, включайте сжатие текста (Brotli/gzip), отдавайте изображения в современных форматах.

Lighthouse CLI

Запускайте Lighthouse из командной строки для автоматизированных проверок.

npm install -g lighthouse

lighthouse https://example.com \
  --output html \
  --output-path ./report.html \
  --chrome-flags="--headless"

Lighthouse CI в GitHub Actions

Запускайте проверки для каждого запроса на слияние и завершайте сборку с ошибкой, если оценки опускаются ниже заданных порогов.

# .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
      - run: npm ci && npm run build
      - uses: treosh/lighthouse-ci-action@v11
        with:
          configPath: ./lighthouserc.json

Конфигурация Lighthouse: проверка оценок

Определяйте проверки в lighthouserc.json, чтобы запросы на слияние завершались с ошибкой при ухудшении оценок.

{
  "ci": {
    "assert": {
      "assertions": {
        "categories:performance": ["error", { "minScore": 0.9 }],
        "categories:accessibility": ["error", { "minScore": 0.95 }],
        "largest-contentful-paint": ["error", { "maxNumericValue": 2500 }]
      }
    }
  }
}

Ограничение скорости и имитация устройства

По умолчанию Lighthouse имитирует медленную сеть 4G и мобильный CPU среднего уровня. Это сделано намеренно: пользователи в рабочей среде на реальных устройствах работают медленнее, чем ваша машина разработки.

Разброс оценок: почему они колеблются

Оценки Lighthouse меняются между запусками из-за непостоянного времени выполнения JavaScript. Выполните проверки 3–5 раз и возьмите медианное значение. Используйте numberOfRuns в Lighthouse CI для автоматического вычисления медианы.

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

Какой показатель Lighthouse измеряет, как долго главный поток заблокирован длительными задачами JavaScript?

Итоги: Lighthouse

Lighthouse проверяет производительность, доступность, лучшие практики, SEO и PWA. Оценка производительности — это взвешенное среднее LCP, TBT, CLS, FCP и индекса скорости. В разделе «Возможности» исправления упорядочены по предполагаемой экономии. Запускайте Lighthouse через DevTools, CLI или в CI с помощью treosh/lighthouse-ci-action. Из-за разброса оценок берите медианное значение нескольких запусков.

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

Урок «Аудиты и оценка Lighthouse» бесплатный?

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

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

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

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

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

Сколько времени занимает урок «Аудиты и оценка Lighthouse»?

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

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

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

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

Основные веб-показатели: LCP, FID и CLS
Аудиты и оценка Lighthouse
Оптимизация изображений: ленивая загрузка и формат WebP
Разделение кода и ленивые маршруты

← Назад к Frontend Academy