Puppeteer интеграция

Lighthouse — это инструмент для аудита производительности, доступности, SEO и других показателей веб-приложений. Puppeteer предоставляет API для управления Chromium и Chrome, что позволяет запускать Lighthouse в контексте автоматизированного браузера. Совместное использование этих инструментов открывает возможности для глубокого анализа страниц, особенно динамически генерируемых контентом.

Интеграция начинается с установки необходимых пакетов через npm:

npm install puppeteer lighthouse

После этого можно подключить их в коде:

const puppeteer = require('puppeteer');
const lighthouse = require('lighthouse');
const {URL} = require('url');

Запуск Lighthouse через Puppeteer

Для того чтобы Lighthouse анализировал страницу, сначала нужно запустить экземпляр браузера с Puppeteer и передать его в Lighthouse через port. Пример базового скрипта:

(async () => {
  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();
  await page.goto('https://example.com');

  const browserWSEndpoint = browser.wsEndpoint();
  const url = 'https://example.com';
  const { lhr } = await lighthouse(url, {
    port: new URL(browserWSEndpoint).port,
    output: 'json',
    logLevel: 'info',
  });

  console.log(`Performance score: ${lhr.categories.performance.score * 100}`);
  await browser.close();
})();

Здесь ключевой момент — использование wsEndpoint() для получения WebSocket-порта, по которому Lighthouse подключается к запущенному браузеру. Это позволяет анализировать страницы, управляемые Puppeteer, включая SPA и страницы с динамическим контентом.

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

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

const customConfig = {
  extends: 'lighthouse:default',
  settings: {
    onlyCategories: ['performance', 'accessibility'],
    throttlingMethod: 'devtools',
    emulatedFormFactor: 'desktop',
  }
};

const { lhr } = await lighthouse(url, {
  port: new URL(browserWSEndpoint).port,
  output: 'json',
  logLevel: 'info',
}, customConfig);

Использование emulatedFormFactor позволяет тестировать страницы в условиях различных устройств, а throttlingMethod: 'devtools' учитывает реальные условия сетевого соединения и производительности.

Аудит динамического контента

Puppeteer позволяет управлять состоянием страницы перед запуском Lighthouse. Например, если необходимо дождаться полной загрузки SPA, можно использовать ожидание определённого селектора или события:

await page.goto('https://example.com');
await page.waitForSelector('#main-content', { visible: true });

После этого Lighthouse получает полностью отрендеренную страницу, что повышает точность показателей производительности и доступности.

Сбор и обработка результатов

Результаты Lighthouse возвращаются в объекте lhr (Lighthouse Result). Основные разделы:

  • categories — суммарные оценки по направлениям (performance, accessibility, SEO, best-practices, PWA).
  • audits — детализированные метрики, включая First Contentful Paint, Time to Interactive, Largest Contentful Paint.
  • configSettings — конфигурация, с которой был выполнен аудит.

Для сохранения отчета в файл:

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

Можно также генерировать HTML-отчёт:

const reportHtml = await lighthouse(url, { port: new URL(browserWSEndpoint).port, output: 'html' });
fs.writeFileSync('report.html', reportHtml);

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

  • Использовать один экземпляр браузера для нескольких проверок, чтобы сократить время запуска.
  • Синхронизировать загрузку страницы через Puppeteer, особенно для сайтов с асинхронным контентом.
  • Кастомизировать конфигурацию Lighthouse под конкретные цели тестирования: отключать ненужные категории, использовать только критические метрики.
  • Сохранять результаты в JSON для последующего анализа и интеграции с CI/CD.

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

Оглавление