JavaScript выполнение

Для использования Lighthouse в проектах на JavaScript применяется пакет lighthouse, который устанавливается через npm:

npm install -g lighthouse

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

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

chrome-launcher необходим для запуска экземпляра Chrome, в котором Lighthouse будет проводить аудит.

Запуск аудита через JavaScript

Для выполнения аудита создаётся отдельная функция, которая запускает Chrome и передаёт URL для анализа:

async function runLighthouse(url, options = {}, config = null) {
    const chrome = await chromeLauncher.launch({chromeFlags: ['--headless']});
    options.port = chrome.port;
    const results = await lighthouse(url, options, config);
    await chrome.kill();
    return results.lhr; // Lighthouse Result
}
  • options позволяет настроить режим работы: устройства, скорости сети, дополнительные флаги.
  • config — конфигурация аудита, в которой можно выбирать категории, аудиты и их параметры.

Основные параметры options

  • output: формат отчета (html, json, csv).
  • onlyCategories: массив категорий для анализа (performance, accessibility, best-practices, seo, pwa).
  • emulatedFormFactor: эмуляция устройства (mobile или desktop).

Пример:

const options = {
    output: 'json',
    onlyCategories: ['performance', 'seo'],
    emulatedFormFactor: 'mobile'
};

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

Результат выполнения Lighthouse содержит объект lhr, в котором хранится подробная информация по всем аудитам:

const lhr = await runLighthouse('https://example.com', options);
console.log(`Performance score: ${lhr.categories.performance.score * 100}`);
console.log(`SEO score: ${lhr.categories.seo.score * 100}`);

Ключевые разделы объекта lhr:

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

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

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

const config = {
    extends: 'lighthouse:default',
    settings: {
        onlyAudits: ['first-contentful-paint', 'largest-contentful-paint'],
        throttlingMethod: 'simulate'
    }
};
  • extends позволяет наследовать стандартные настройки Lighthouse.
  • settings.onlyAudits ограничивает набор аудитов для ускорения анализа.
  • throttlingMethod управляет эмуляцией скорости сети и процессора.

Пример комплексного использования

(async () => {
    const url = 'https://example.com';
    const options = {
        output: 'html',
        onlyCategories: ['performance', 'accessibility'],
        emulatedFormFactor: 'desktop'
    };
    const config = {
        extends: 'lighthouse:default',
        settings: {
            onlyAudits: ['first-contentful-paint', 'accessibility/color-contrast']
        }
    };
    const report = await runLighthouse(url, options, config);
    require('fs').writeFileSync('report.html', report.report);
})();

В этом примере:

  • Chrome запускается в headless-режиме.
  • Аудит проводится только по категориям performance и accessibility.
  • Ограничен набор аудитов до ключевых метрик для быстрого анализа.
  • Отчет сохраняется в формате HTML.

Оптимизация использования в проектах

  1. Пакетная проверка нескольких URL — запуск функции в цикле с массивом сайтов.
  2. Автоматизация — интеграция в CI/CD для контроля метрик на каждом деплое.
  3. Кеширование результатов — хранение предыдущих аудитов для сравнения изменений.
  4. Фильтрация аудитов — исключение несущественных проверок через конфигурацию onlyAudits.

Взаимодействие с результатами

Lighthouse предоставляет не только оценки, но и подробные рекомендации. Доступ к ним осуществляется через lhr.audits:

for (const key in lhr.audits) {
    const audit = lhr.audits[key];
    if (audit.score !== 1) {
        console.log(`${audit.title}: ${audit.displayValue}`);
    }
}
  • score — числовая оценка (0–1).
  • displayValue — человекочитаемое описание результата.
  • details — дополнительные данные, включая таблицы, скриншоты и трассировки.

Продвинутая настройка

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

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

Оглавление