Консоль браузера

Для работы с Lighthouse в среде JavaScript существует несколько вариантов: использование командной строки Node.js, интеграция через npm-пакет или запуск через DevTools браузера Chrome. Для программного использования в проекте на Node.js необходимо установить пакет:

npm install -g lighthouse

или локально в проект:

npm install --save-dev lighthouse

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

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

chrome-launcher используется для автоматического запуска экземпляра Chrome, что упрощает анализ страниц.

Запуск анализа с программного кода

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

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;
}

В options можно задавать такие параметры, как output (формат отчета: html, json) и onlyCategories (например, performance, accessibility).

Пример вызова:

runLighthouse('https://example.com', {
    output: 'json',
    onlyCategories: ['performance', 'seo']
}).then(result => {
    console.log(result.lhr.categories.performance.score);
});

Структура отчета Lighthouse

Результат работы библиотеки доступен через объект Lighthouse Result (lhr), который содержит несколько ключевых блоков:

  1. categories – категории аудита:

    • performance – показатели производительности;
    • accessibility – оценка доступности;
    • best-practices – соблюдение лучших практик;
    • seo – оптимизация для поисковых систем;
    • pwa – оценка Progressive Web App.

    Каждая категория содержит:

    • score – общий балл от 0 до 1;
    • auditRefs – ссылки на конкретные аудиты.

  2. audits – подробные проверки:

    • id – уникальный идентификатор аудита;
    • title – название проверки;
    • description – описание;
    • score – результат проверки;
    • displayValue – визуальное значение, например время загрузки.

  3. configSettings – конфигурация, с которой запускался Lighthouse (эмуляция устройства, язык и т.д.).

  4. fetchTime – время создания отчета.

Использование конфигурации

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

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

Запуск с конфигурацией:

runLighthouse('https://example.com', {output: 'json'}, config)
    .then(result => {
        console.log(result.lhr.categories.seo.score);
    });

Работа с результатами

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

const fs = require('fs');

runLighthouse('https://example.com', {output: 'html'})
    .then(result => {
        fs.writeFileSync('report.html', result.report);
    });

Отчеты можно генерировать в форматах:

  • json – структурированные данные для дальнейшей обработки;
  • html – визуальный отчет с графиками и списками проблем;
  • csv – таблицы для массового анализа.

Основные практики анализа

  • Измерение производительности: оценка First Contentful Paint, Largest Contentful Paint, Time to Interactive. Важно запускать несколько раз и усреднять результаты.
  • Доступность: проверка семантической разметки, контрастности текста, наличия alt-атрибутов.
  • SEO: анализ заголовков, метатегов, структуры URL и robots.txt.
  • Best Practices: использование безопасных технологий, отсутствие ошибок JavaScript, корректная работа HTTPS.
  • PWA: проверка наличия манифеста, service worker и оффлайн-режима.

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

Lighthouse можно запускать в автоматических пайплайнах для контроля качества веб-приложений:

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 20
      - run: npm install
      - run: npm install -g lighthouse chrome-launcher
      - run: node run-lighthouse.js

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

Настройка эмуляции устройств

Lighthouse поддерживает эмуляцию различных форм-факторов:

const options = {
    emulatedFormFactor: 'mobile', // 'desktop' или 'mobile'
    screenEmulation: {
        width: 360,
        height: 640,
        deviceScaleFactor: 2,
        disabled: false
    }
};

Эмуляция полезна для проверки адаптивности интерфейса и мобильной производительности.

Кастомные аудиторы

Для расширенных проверок можно писать свои аудиты. Минимальный шаблон:

const Audit = require('lighthouse').Audit;

class CustomAudit extends Audit {
    static get meta() {
        return {
            id: 'custom-audit',
            title: 'Проверка кастомного условия',
            failureTitle: 'Условие не выполнено',
            description: 'Проверка конкретного аспекта страницы',
            requiredArtifacts: ['URL']
        };
    }

    static audit(artifacts) {
        const passed = artifacts.URL.includes('example');
        return {
            score: passed ? 1 : 0
        };
    }
}

Кастомные аудиторы добавляются через конфигурацию и позволяют создавать уникальные проверки для специфических требований проекта.

Оглавление