Chrome DevTools

Lighthouse — это инструмент для аудита веб-страниц, встроенный в Chrome DevTools, а также доступный как самостоятельный модуль для Node.js. Для запуска через DevTools достаточно открыть панель Audits или Lighthouse и выбрать параметры анализа. В Node.js библиотека устанавливается командой:

npm install -g lighthouse

Импорт модуля в проект:

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

Запуск аудита через Node.js

Для автоматизации проверок удобно использовать chrome-launcher в связке с Lighthouse. Пример базового запуска:

(async () => {
  const chrome = await chromeLauncher.launch({chromeFlags: ['--headless']});
  const options = {logLevel: 'info', output: 'html', port: chrome.port};
  const runnerResult = await lighthouse('https://example.com', options);

  console.log('Lighthouse score:', runnerResult.lhr.score);
  await chrome.kill();
})();

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

  • chromeFlags: ['--headless'] позволяет запускать Chrome без интерфейса.
  • runnerResult.lhr содержит полный объект отчета.
  • output: 'html' создаёт HTML-отчет, json — JSON-файл для дальнейшей обработки.

Структура отчета

Объект отчета (lhr) включает следующие основные разделы:

  • categories — метрики по категориям: performance, accessibility, best-practices, seo, pwa.
  • audits — детализированные проверки с результатами и рекомендациями.
  • configSettings — настройки аудита: throttling, device emulation, locale.
  • finalUrl — URL страницы после всех редиректов.

Пример получения оценки производительности:

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

Настройка конфигурации

Lighthouse позволяет гибко конфигурировать проверки через объект config. Например, можно отключить ненужные категории:

const config = {
  extends: 'lighthouse:default',
  settings: {
    onlyCategories: ['performance', 'accessibility'],
    throttlingMethod: 'simulate'
  }
};

const runnerResult = await lighthouse('https://example.com', {port: chrome.port}, config);

Обратите внимание:

  • onlyCategories сокращает время анализа.
  • throttlingMethod: 'simulate' имитирует сетевые условия без фактического ограничения скорости.

Работа с аудиторскими метриками

Каждый аудиторский тест содержит поля:

  • score — оценка в диапазоне 0–1.
  • numericValue — числовое значение метрики (например, время загрузки).
  • displayValue — человекочитаемый формат.
  • details — расширенная информация, включая элементы DOM и скриншоты.

Пример фильтрации всех проверок производительности, где score < 0.9:

const perfAudits = Object.values(runnerResult.lhr.audits)
  .filter(audit => audit.score !== null && audit.score < 0.9);

perfAudits.forEach(audit => {
  console.log(`${audit.id}: ${audit.displayValue}`);
});

Интеграция с CI/CD

Lighthouse часто используется для автоматизированного контроля качества:

  • Запуск тестов перед деплоем.
  • Сравнение текущих показателей с предыдущими версиями.
  • Генерация отчетов в формате HTML/JSON для аналитики.

Пример проверки минимальной производительности:

if (runnerResult.lhr.categories.performance.score < 0.9) {
  throw new Error('Performance score below threshold!');
}

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

Lighthouse напрямую работает через Chrome DevTools Protocol. Это позволяет:

  • Управлять браузером программно.
  • Делать замеры времени загрузки, FPS, TTI.
  • Снимать скриншоты и проводить эмуляцию мобильных устройств.

Пример запуска с кастомным портом:

const options = {port: 9222, output: 'json'};
const runnerResult = await lighthouse('https://example.com', options);

Эмуляция устройств и сетевых условий

Настройка emulatedFormFactor и throttling позволяет тестировать страницы как на мобильных, так и на десктопных устройствах:

const config = {
  settings: {
    emulatedFormFactor: 'mobile',
    throttling: {
      rttMs: 150,
      throughputKbps: 1638,
      requestLatencyMs: 562.5,
      cpuSlowdownMultiplier: 4
    }
  }
};
  • emulatedFormFactor — 'mobile' или 'desktop'.
  • throttling — точная настройка сетевых и CPU условий.

Расширение функционала

  • Плагины: позволяют добавлять собственные аудиты.
  • Custom audits: проверка специфичных требований проекта.
  • Программная генерация отчетов: конвертация в PDF, интеграция с дашбордами.

Пример создания кастомного аудита:

class MyAudit extends lighthouse.Audit {
  static get meta() {
    return {id: 'my-audit', title: 'Проверка кастомного условия', failureTitle: 'Не выполнено', scoreDisplayMode: 'binary'};
  }

  static audit() {
    const value = true; // логика проверки
    return {score: value ? 1 : 0};
  }
}

Практические рекомендации

  • Отчеты лучше сохранять как JSON для последующей обработки.
  • Для CI/CD использовать headless-режим.
  • Следить за актуальностью версии Lighthouse, так как обновления меняют метрики и расчеты.
  • Использовать фильтры по категориям для ускорения анализа больших проектов.

Эти подходы делают Lighthouse мощным инструментом для глубокого анализа производительности, доступности, SEO и прогрессивных веб-приложений прямо из JavaScript-кода и DevTools.

Оглавление