Использование библиотек

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

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

npm install lighthouse --save-dev

Импорт в проект осуществляется стандартным способом:

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

Использование Chrome Launcher позволяет автоматически запускать экземпляр браузера Chrome для анализа страниц без необходимости ручного открытия браузера.

Основные параметры запуска

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

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

    const runnerResult = await lighthouse(url, options, config);
    
    await chrome.kill();
    return runnerResult.lhr;
}

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

  • chromeFlags: ['--headless'] — позволяет запускать Chrome в фоновом режиме.
  • options.port — связывает Lighthouse с запущенным экземпляром Chrome.
  • runnerResult.lhr — возвращает объект Lighthouse Result с полной информацией об аудите.

Структура результата

Объект lhr содержит несколько основных секций:

  1. categories — группы аудита: производительность, SEO, доступность, PWA, лучшие практики.
  2. audits — подробный список проверок с оценкой, информацией о проблеме и рекомендациями.
  3. fetchTime — время выполнения анализа.
  4. finalUrl — конечный URL, на котором был выполнен аудит.
  5. configSettings — параметры конфигурации аудита.

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

const performanceScore = lhr.categories.performance.score * 100;
console.log(`Производительность: ${performanceScore}`);

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

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

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

Объяснение ключевых настроек:

  • extends — наследование базовой конфигурации.
  • onlyCategories — выбор конкретных категорий для аудита.
  • emulatedFormFactor — эмуляция типа устройства: mobile или desktop.

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

Генерация отчётов

Lighthouse поддерживает несколько форматов отчётов: HTML, JSON и CSV. Формирование отчёта выполняется с помощью встроенного генератора:

const fs = require('fs');
const reportHtml = runnerResult.report[0];
fs.writeFileSync('lighthouse-report.html', reportHtml);

Для программного анализа чаще используется JSON:

const reportJson = runnerResult.report[1];
fs.writeFileSync('lighthouse-report.json', reportJson);

Особенности:

  • HTML-отчёт удобен для визуального анализа.
  • JSON позволяет интегрировать результаты в CI/CD и системы мониторинга.

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

Использование Lighthouse в автоматизированных сборках помогает отслеживать регрессии производительности и доступности. Пример с использованием npm скрипта:

{
  "scripts": {
    "audit": "node lighthouse-runner.js"
  }
}

Можно настроить автоматическую проверку и завершение сборки при низком балле по ключевым категориям:

if (performanceScore < 90) {
    throw new Error('Производительность ниже допустимого порога');
}

Это позволяет поддерживать высокий стандарт качества страниц на всех этапах разработки.

Работа с расширенными возможностями

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

class CustomAudit extends lighthouse.Audit {
    static get meta() {
        return {
            id: 'custom-audit',
            title: 'Проверка кастомного условия',
            description: 'Проверяет наличие определённого элемента на странице',
            requiredArtifacts: ['DOM']
        };
    }

    static audit(artifacts) {
        const elementExists = !!artifacts.DOM.querySelector('#important-element');
        return {
            score: elementExists ? 1 : 0
        };
    }
}

Подключение пользовательских аудитов осуществляется через конфигурацию:

const config = {
    passes: [{ passName: 'defaultPass' }],
    audits: [CustomAudit]
};

Советы по оптимизации

  • Запуск Lighthouse на локальной машине лучше всего выполнять с отключёнными расширениями браузера.
  • Для массового тестирования страниц можно использовать параллельный запуск Chrome с разными портами.
  • Использование кэширования ресурсов помогает точнее измерять реальную производительность страницы.

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

Оглавление