Внутреннее устройство Lighthouse

Lighthouse представляет собой инструмент для аудита веб-страниц, построенный на базе модульной архитектуры. Внутреннее устройство разделено на несколько ключевых уровней, каждый из которых отвечает за отдельный этап анализа:

  • Launcher (запуск аудита)
  • Gatherers (сбор данных)
  • Driver (взаимодействие с браузером)
  • Audits (проверки)
  • Report Renderer (генерация отчёта)

Такое разделение обеспечивает расширяемость и независимость компонентов.

Процесс выполнения аудита

Полный цикл работы Lighthouse можно разбить на последовательные этапы:

1. Инициализация запуска

На этом этапе формируется конфигурация:

  • список аудитов
  • настройки среды (например, эмуляция мобильного устройства)
  • параметры сети и CPU throttling

Создаётся экземпляр Chrome через протокол Chrome DevTools Protocol (CDP).

2. Навигация и подготовка страницы

Driver инициирует загрузку страницы:

  • очищается кэш
  • устанавливаются ограничения сети и процессора
  • включается сбор трассировки (trace) и логов

Фиксируются ключевые события:

  • firstContentfulPaint
  • largestContentfulPaint
  • DOMContentLoaded

3. Сбор данных (Gather Phase)

Gatherers — это модули, которые извлекают сырые данные из браузера.

Примеры собираемых данных:

  • DOM-структура
  • сетевые запросы
  • performance trace
  • accessibility tree

Каждый gatherer реализует методы:

class ExampleGatherer {
  async beforePass(context) {}
  async pass(context) {}
  async afterPass(context) {}
}

Фазы:

  • beforePass — подготовка (например, внедрение скриптов)
  • pass — активный сбор данных
  • afterPass — финализация

4. Обработка данных (Artifacts)

Результаты gatherers сохраняются в структуре Artifacts. Это централизованное хранилище всех сырых данных.

Пример:

{
  "URL": "...",
  "Trace": {...},
  "NetworkRecords": [...],
  "Accessibility": {...}
}

Artifacts передаются в систему аудитов.

Driver: взаимодействие с браузером

Driver — абстракция над Chrome DevTools Protocol.

Функции Driver:

  • выполнение JavaScript в контексте страницы
  • управление навигацией
  • подписка на события браузера
  • перехват сетевых запросов

Пример вызова:

await driver.evaluateAsync('document.title');

Driver скрывает сложность CDP и предоставляет единый API.

Система аудитов (Audits)

Аудиты анализируют Artifacts и возвращают результаты.

Структура аудита:

class ExampleAudit {
  static get meta() {
    return {
      id: 'example-audit',
      title: 'Пример аудита',
      failureTitle: 'Ошибка',
      description: 'Описание проверки',
      requiredArtifacts: ['URL']
    };
  }

  static audit(artifacts, context) {
    return {
      score: 1,
      numericValue: 100,
      displayValue: 'OK'
    };
  }
}

Основные элементы результата:

  • score — оценка от 0 до 1
  • numericValue — числовое значение
  • displayValue — форматированное представление

Категории аудитов

Аудиты объединяются в категории:

  • Performance
  • Accessibility
  • Best Practices
  • SEO
  • PWA

Категория агрегирует результаты:

{
  "score": 0.92,
  "auditRefs": [...]
}

Система оценивания

Lighthouse использует логарифмическую шкалу для оценки производительности.

Метрики:

  • First Contentful Paint (FCP)
  • Largest Contentful Paint (LCP)
  • Total Blocking Time (TBT)
  • Speed Index
  • Cumulative Layout Shift (CLS)

Каждая метрика нормализуется через кривую распределения.

Trace и DevTools Log

Trace

Trace — это временная диаграмма событий браузера:

  • рендеринг
  • выполнение JS
  • сетевые операции

Используется для:

  • анализа производительности
  • расчёта метрик

DevTools Log

Содержит:

  • HTTP-запросы
  • заголовки
  • статусы

Пример записи:

{
  "url": "...",
  "statusCode": 200,
  "transferSize": 15000
}

Lighthouse Runner

Runner координирует выполнение:

  1. Запускает gatherers
  2. Формирует artifacts
  3. Запускает аудиты
  4. Собирает результаты

Упрощённая схема:

async function runLighthouse() {
  const artifacts = await gather();
  const results = await audit(artifacts);
  return results;
}

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

Конфигурация определяет поведение Lighthouse.

Пример:

module.exports = {
  extends: 'lighthouse:default',
  settings: {
    onlyCategories: ['performance']
  },
  audits: [
    'first-contentful-paint',
    'largest-contentful-paint'
  ]
};

Плагины и расширяемость

Lighthouse поддерживает плагины:

module.exports = {
  audits: ['plugin-example/audit'],
  category: {
    title: 'Custom',
    auditRefs: [{ id: 'plugin-example/audit', weight: 1 }]
  }
};

Возможности:

  • добавление собственных аудитов
  • кастомные gatherers
  • изменение отчётов

Генерация отчёта

Финальный отчёт формируется в формате:

  • HTML
  • JSON

Структура:

{
  "categories": {...},
  "audits": {...},
  "finalUrl": "...",
  "timing": {...}
}

HTML-рендеринг включает:

  • визуализацию метрик
  • подсказки
  • диагностику

Эмуляция окружения

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

CPU Throttling

Замедление выполнения Jav * aScript:

  • x4 slowdown

Network Throttling

Эмуляция сети:

  • 3G / 4G профили

Пример:

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

Поток данных внутри Lighthouse

Общая схема:

Chrome → Driver → Gatherers → Artifacts → Audits → Report

Каждый этап:

  • изолирован
  • повторно используем
  • независим от UI

Особенности проектирования

1. Декларативность Аудиты описывают зависимости через requiredArtifacts.

2. Чистые функции Аудиты не имеют побочных эффектов.

3. Разделение ответственности Сбор данных и анализ разделены.

4. Повторяемость Одинаковые условия → одинаковый результат.

Работа с Lighthouse программно

Пример запуска через Node.js:

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

(async () => {
  const chrome = await chromeLauncher.launch();
  const result = await lighthouse('https://example.com', {
    port: chrome.port
  });

  console.log(result.lhr.categories.performance.score);

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

Внутренние зависимости

Основные компоненты:

  • chrome-launcher — запуск браузера
  • lighthouse-logger — логирование
  • devtools-protocol — коммуникация с Chrome

Ограничения архитектуры

  • Зависимость от Chrome
  • Ограниченная поддержка SPA без дополнительных настроек
  • Невозможность полного воспроизведения пользовательского поведения

Механизмы оптимизации

  • кэширование результатов
  • параллельные аудиты
  • ленивое выполнение gatherers

Роль Lighthouse в экосистеме

Lighthouse интегрируется:

  • в CI/CD
  • в браузер (Chrome DevTools)
  • в сторонние сервисы (например, PageSpeed Insights)

Обеспечивает стандартизированный подход к анализу качества веб-приложений.

Оглавление