Использование современных API

Lighthouse — это инструмент для автоматизированного аудита качества веб-страниц, предоставляющий метрики производительности, доступности, SEO и лучшие практики. В современном JavaScript его возможности доступны через API, что позволяет интегрировать аудит прямо в скрипты и CI/CD-процессы.

Для начала необходимо подключить библиотеку через Node.js:

import lighthouse from 'lighthouse';
import chromeLauncher from 'chrome-launcher';

Создание экземпляра Chrome и запуск аудита осуществляется следующим образом:

async function runLighthouse(url, options = {}, config = null) {
    const chrome = await chromeLauncher.launch({chromeFlags: ['--headless']});
    options.port = chrome.port;

    const result = await lighthouse(url, options, config);
    await chrome.kill();

    return result.lhr; // Lighthouse Result
}

Ключевой момент: Lighthouse API возвращает объект lhr (Lighthouse Result), содержащий детализированную информацию о каждой проверке, метрики и рекомендации по улучшению.

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

Lighthouse позволяет задавать конфигурацию через объект config. Основные блоки:

  • audits — список конкретных проверок, которые должны быть выполнены.
  • categories — группы проверок, например performance, accessibility, seo.
  • settings — параметры запуска, включая эмуляцию сети и устройства.

Пример конфигурации:

const config = {
  extends: 'lighthouse:default',
  settings: {
    onlyCategories: ['performance', 'seo'],
    emulatedFormFactor: 'mobile',
    throttling: {
      rttMs: 150,
      throughputKbps: 1600,
      cpuSlowdownMultiplier: 4,
    },
  },
};

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

Использование современных API браузера

Lighthouse умеет работать с современными веб-API, позволяя оценивать страницы, использующие:

  • Service Workers — проверка кэширования и оффлайн-доступа.
  • Web Vitals API — измерение LCP, FID, CLS.
  • Fetch API и асинхронные ресурсы — оценка загрузки и оптимизации.
  • Intersection Observer — анализ ленивой загрузки контента.
  • WebAssembly — измерение влияния на производительность.

Для получения информации о Web Vitals достаточно использовать lhr.audits:

const {lhr} = await runLighthouse('https://example.com', {output: 'json'});
console.log('Largest Contentful Paint:', lhr.audits['largest-contentful-paint'].displayValue);
console.log('Cumulative Layout Shift:', lhr.audits['cumulative-layout-shift'].displayValue);

Программная обработка результатов

Lighthouse возвращает обширную структуру данных. Основные свойства:

  • categories — суммарные баллы по направлениям.
  • audits — детальные результаты каждой проверки.
  • timing — время выполнения аудита.
  • requestedUrl и finalUrl — URL, которые проверялись.
  • fetchTime — время получения данных.

Для интеграции в CI/CD удобно формировать отчеты в формате JSON или HTML:

import fs from 'fs';

const reportHtml = result.report; // если указан output: 'html'
fs.writeFileSync('lighthouse-report.html', reportHtml);

const reportJson = JSON.stringify(result.lhr, null, 2);
fs.writeFileSync('lighthouse-report.json', reportJson);

Расширение функционала через плагины

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

  1. Создается модуль с объектом аудита, содержащим id, title, description и метод audit().
  2. Добавляется в конфигурацию через plugins.

Пример кастомного аудита для проверки наличия мета-тега viewport:

const customAudit = {
  id: 'viewport-meta-check',
  title: 'Проверка meta viewport',
  description: 'Страница должна содержать meta viewport для корректного отображения на мобильных устройствах',
  audit: async () => {
    return {
      score: 1,
      details: {type: 'text', items: ['meta viewport присутствует']},
    };
  },
};

const config = {
  extends: 'lighthouse:default',
  audits: [customAudit],
};

Асинхронность и оптимизация

Lighthouse API полностью асинхронен. Для эффективной работы с большим количеством страниц рекомендуется использовать:

  • Параллельные запуски через Promise.all.
  • Ограничение одновременных экземпляров Chrome для экономии ресурсов.
  • Кэширование повторно используемых данных, например для ресурсов, загружаемых с CDN.
const urls = ['https://site1.com', 'https://site2.com'];
const audits = await Promise.all(urls.map(url => runLighthouse(url, {output: 'json'})));

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

Lighthouse позволяет тестировать страницы в различных условиях:

  • Форм-фактор: mobile, desktop
  • Сетевые условия: эмуляция 3G, 4G, Wi-Fi
  • CPU throttling: замедление процессора для имитации слабых устройств

Пример настройки эмуляции слабого устройства:

const options = {
  onlyCategories: ['performance'],
  throttlingMethod: 'simulate',
  emulatedFormFactor: 'mobile',
  throttling: {
    rttMs: 150,
    throughputKbps: 400,
    cpuSlowdownMultiplier: 6,
  },
};

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

Оглавление