Первый запуск и базовый анализ

Lighthouse распространяется как часть экосистемы Node.js и может использоваться несколькими способами: через CLI, как модуль в коде или встроенно в инструменты браузера. Для учебных и автоматизированных сценариев наибольший интерес представляет именно использование через Node.js.

Установка через npm:

npm install -g lighthouse

Глобальная установка позволяет вызывать утилиту из командной строки. Для интеграции в проект предпочтительна локальная установка:

npm install lighthouse

Дополнительно требуется установленный браузер Chrome или Chromium, так как Lighthouse использует его для проведения аудита. В большинстве случаев достаточно актуальной версии Google Chrome.

Проверка установки:

lighthouse --version

Первый запуск через CLI

Базовый анализ запускается одной командой:

lighthouse https://example.com

После выполнения происходит:

  • запуск headless Chrome
  • загрузка указанной страницы
  • выполнение набора аудитов
  • генерация отчёта

По умолчанию результат сохраняется в HTML-файл в текущей директории. Также в консоль выводится краткая сводка с ключевыми метриками.

Основные категории оценки:

  • Performance (Производительность)
  • Accessibility (Доступность)
  • Best Practices (Лучшие практики)
  • SEO
  • Progressive Web App (PWA)

Настройка параметров запуска

CLI поддерживает множество флагов, позволяющих управлять поведением анализа.

Выбор формата отчёта

lighthouse https://example.com --output html --output json

Можно одновременно получить несколько форматов.

Указание имени файла

lighthouse https://example.com --output-path ./report.html

Запуск без открытия браузера

lighthouse https://example.com --chrome-flags="--headless"

Выбор категории аудита

lighthouse https://example.com --only-categories=performance,seo

Это ускоряет анализ и позволяет сосредоточиться на конкретных аспектах.

Базовый анализ в Node.js

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

Минимальный пример:

const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');

(async () => {
  const chrome = await chromeLauncher.launch({ chromeFlags: ['--headless'] });

  const options = {
    port: chrome.port,
    output: 'json',
    logLevel: 'info'
  };

  const runnerResult = await lighthouse('https://example.com', options);

  console.log('Performance score:', runnerResult.lhr.categories.performance.score);

  await chrome.kill();
})();

Ключевые элементы:

  • chrome-launcher — запускает экземпляр браузера
  • lighthouse() — выполняет аудит
  • runnerResult.lhr — содержит полный отчёт (Lighthouse Result)

Структура результата анализа

Объект lhr (Lighthouse Result) содержит всю информацию об аудите.

Основные разделы:

Общие данные

runnerResult.lhr.requestedUrl
runnerResult.lhr.finalUrl
runnerResult.lhr.fetchTime

Категории

runnerResult.lhr.categories.performance.score
runnerResult.lhr.categories.seo.score

Оценки находятся в диапазоне от 0 до 1, где:

  • 0–0.49 — низкий уровень
  • 0.5–0.89 — средний
  • 0.9–1 — высокий

Аудиты

runnerResult.lhr.audits['first-contentful-paint']
runnerResult.lhr.audits['largest-contentful-paint']
runnerResult.lhr.audits['speed-index']

Каждый аудит включает:

  • score — оценка
  • displayValue — удобочитаемое значение
  • description — описание
  • details — дополнительные данные

Ключевые метрики производительности

First Contentful Paint (FCP)

Время до появления первого контента.

runnerResult.lhr.audits['first-contentful-paint'].displayValue

Largest Contentful Paint (LCP)

Время загрузки самого крупного элемента.

Speed Index

Показывает скорость визуального наполнения страницы.

Time to Interactive (TTI)

Время, когда страница становится полностью интерактивной.

Total Blocking Time (TBT)

Суммарное время блокировки основного потока.

Конфигурация анализа

Lighthouse поддерживает настройку через конфигурационные файлы.

Пример базовой конфигурации:

module.exports = {
  extends: 'lighthouse:default',
  settings: {
    onlyCategories: ['performance'],
    throttlingMethod: 'devtools'
  }
};

Использование:

lighthouse https://example.com --config-path=./config.js

Эмуляция условий

Lighthouse имитирует реальные условия:

Замедление сети

  • Slow 4G
  • Fast 3G

Ограничение CPU

Имитирует слабые устройства.

Настройка:

settings: {
  throttling: {
    rttMs: 150,
    throughputKbps: 1600,
    cpuSlowdownMultiplier: 4
  }
}

Это позволяет получить более реалистичные результаты.

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

Анализ можно выполнять не только по URL, но и по состоянию страницы после взаимодействия.

Для этого используется Puppeteer:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.goto('https://example.com');
  await page.click('#login');

  // Передаём текущий URL в Lighthouse
})();

Это важно для:

  • страниц с авторизацией
  • SPA-приложений
  • динамического контента

Фильтрация и обработка результатов

Результаты анализа часто требуют дополнительной обработки.

Пример извлечения метрик:

const audits = runnerResult.lhr.audits;

const metrics = {
  fcp: audits['first-contentful-paint'].numericValue,
  lcp: audits['largest-contentful-paint'].numericValue,
  tbt: audits['total-blocking-time'].numericValue
};

console.log(metrics);

Генерация собственных отчётов

JSON-результат можно преобразовать в любой формат:

  • HTML-дэшборды
  • графики
  • CI-отчёты

Пример сохранения:

const fs = require('fs');

fs.writeFileSync('report.json', runnerResult.report);

Использование в CI/CD

Lighthouse активно применяется для автоматической проверки качества:

lighthouse https://example.com --output json --quiet

Затем анализируется score:

if (performanceScore < 0.8) {
  process.exit(1);
}

Это позволяет:

  • блокировать деплой при ухудшении метрик
  • отслеживать деградацию производительности
  • поддерживать стабильное качество продукта

Типичные проблемы при первом запуске

Ошибка запуска Chrome

Решение:

--chrome-flags="--no-sandbox"

Особенно актуально в Docker и CI.

Долгое выполнение

Причины:

  • медленная сеть
  • тяжёлая страница
  • включённые все категории

Решение — ограничить категории или отключить throttling.

Нестабильные результаты

Lighthouse использует симуляции, поэтому значения могут колебаться.

Рекомендуется:

  • запускать анализ несколько раз
  • усреднять результаты

Практика интерпретации отчёта

Отчёт Lighthouse — это не просто оценки, а инструмент диагностики.

Ключевые аспекты анализа:

  • сравнение метрик между сборками
  • выявление узких мест (рендеринг, JS, сеть)
  • приоритизация задач оптимизации

Особое внимание уделяется:

  • LCP — пользовательский опыт загрузки
  • TBT — отзывчивость интерфейса
  • CLS — стабильность макета

Каждый аудит содержит рекомендации, которые можно напрямую использовать для оптимизации кода и инфраструктуры.

Оглавление