Вспомогательные утилиты

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

npm install -g lighthouse
npm install lighthouse

После установки можно подключать библиотеку в проект:

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

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

async function launchChromeAndRunLighthouse(url, opts = {}, config = null) {
    const chrome = await chromeLauncher.launch({chromeFlags: ['--headless']});
    opts.port = chrome.port;
    const results = await lighthouse(url, opts, config);
    await chrome.kill();
    return results.lhr;
}

Основные утилиты Lighthouse

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

1. Chrome Launcher

chrome-launcher позволяет запускать Chrome в headless-режиме и управлять портами. Используется для интеграции с Node.js:

  • chromeFlags — массив флагов для запуска браузера.
  • port — порт для подключения инструментов разработчика.
  • Метод kill() завершает процесс Chrome после завершения анализа.

2. Lighthouse Config

Конфигурации позволяют гибко управлять аудитами и категориями анализа:

const config = {
    extends: 'lighthouse:default',
    settings: {
        onlyCategories: ['performance', 'accessibility'],
        emulatedFormFactor: 'mobile'
    }
};
  • extends — базовая конфигурация, чаще всего используется 'lighthouse:default'.
  • settings.onlyCategories — выбор конкретных категорий аудита.
  • emulatedFormFactor — эмуляция устройства: 'mobile' или 'desktop'.

3. Lighthouse Flags

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

const opts = {
    output: 'json',
    logLevel: 'info',
    disableStorageReset: true
};
  • output — формат отчета (json, html или csv).
  • logLevel — уровень логирования (silent, info, verbose).
  • disableStorageReset — отключение очистки кэша и локального хранилища перед запуском.

Преобразование отчетов

После анализа Lighthouse возвращает объект lhr (Lighthouse Result), который можно использовать для:

  • Генерации HTML-отчета:
const fs = require('fs');
const reportHtml = results.report;
fs.writeFileSync('report.html', reportHtml);
  • Работа с JSON-структурой для автоматических проверок:
console.log(results.categories.performance.score);

4. Сравнение результатов

Для отслеживания изменений производительности удобно хранить lhr и сравнивать ключевые метрики, такие как:

  • performance.score
  • accessibility.score
  • seo.score
  • Время загрузки (first-contentful-paint, largest-contentful-paint)

5. Дополнительные утилиты

  • Audit Filters — возможность фильтровать аудиты, чтобы запускать только необходимые проверки.
  • Custom Gatherers — создание собственных сборщиков данных для специфических метрик.
  • LHCI (Lighthouse CI) — интеграция в CI/CD для автоматического анализа изменений.

Практические сценарии

  • Автоматизация проверки производительности:
async function testPerformance(url) {
    const opts = {output: 'json', onlyCategories: ['performance']};
    const results = await launchChromeAndRunLighthouse(url, opts);
    return results.categories.performance.score;
}
  • Сравнение версий сайта:
const oldScore = await testPerformance('https://example.com/old');
const newScore = await testPerformance('https://example.com/new');
console.log(`Изменение производительности: ${newScore - oldScore}`);
  • Генерация отчета в HTML и JSON одновременно:
const opts = {output: ['html', 'json']};
const results = await launchChromeAndRunLighthouse('https://example.com', opts);
fs.writeFileSync('report.html', results.report[0]);
fs.writeFileSync('report.json', results.report[1]);

Ключевые моменты использования утилит

  • Использовать chrome-launcher для надежного запуска и завершения Chrome.
  • Настраивать конфигурацию через settings и onlyCategories для ускорения анализа.
  • Применять Lighthouse как инструмент автоматического мониторинга производительности и доступности.
  • Сохранять и анализировать результаты через JSON для построения графиков и метрик со временем.

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

Оглавление