Lighthouse — это инструмент автоматизированного аудита веб-приложений, разработанный командой Google. Его основная задача — анализ качества веб-страниц по ряду критически важных метрик: производительность, доступность, SEO, лучшие практики и прогрессивные веб-приложения (PWA).
Инструмент выполняет серию проверок (audits), формируя детализированный отчёт, который позволяет выявить узкие места в работе сайта и получить рекомендации по их устранению.
В основе Lighthouse лежит модель последовательного выполнения аудитов в контролируемой среде. Процесс можно разделить на несколько этапов:
Инициализация окружения
Сбор данных (Gathering)
Анализ (Auditing)
Формирование отчёта
Оценивает скорость загрузки и интерактивности страницы. Включает ключевые метрики:
Каждая метрика рассчитывается на основе реальных сценариев загрузки страницы.
Проверяет соответствие стандартам доступности (WCAG):
Аудиты направлены на обеспечение удобства для пользователей с ограниченными возможностями.
Оценивает техническое качество реализации:
Анализирует базовую оптимизацию страницы для поисковых систем:
Проверяет соответствие требованиям PWA:
Каждая категория получает оценку от 0 до 100. Итоговый балл рассчитывается на основе весов отдельных метрик.
Пример распределения весов в категории Performance:
Оценка формируется с использованием статистических моделей и данных реальных пользователей (например, Chrome UX Report).
Встроен в Chrome DevTools:
Установка:
npm install -g lighthouseЗапуск:
lighthouse https://example.com --viewДополнительные параметры:
lighthouse https://example.com \
--only-categories=performance \
--emulated-form-factor=mobile \
--throttling-method=devtoolsLighthouse можно использовать как библиотеку:
import lighthouse from 'lighthouse';
import chromeLauncher from 'chrome-launcher';
const chrome = await chromeLauncher.launch({ chromeFlags: ['--headless'] });
const result = await lighthouse('https://example.com', {
port: chrome.port,
});
console.log(result.lhr.categories.performance.score);
await chrome.kill();Lighthouse поддерживает гибкую настройку через конфигурационные файлы:
export default {
extends: 'lighthouse:default',
settings: {
onlyCategories: ['performance'],
},
audits: [],
};Возможности кастомизации:
Lighthouse позволяет создавать кастомные проверки:
class MyAudit {
static get meta() {
return {
id: 'my-audit',
title: 'Проверка кастомного условия',
scoreDisplayMode: 'binary',
};
}
static audit(artifacts) {
const passed = true;
return {
score: passed ? 1 : 0,
};
}
}Аудит интегрируется в конфигурацию и выполняется вместе с остальными.
Несмотря на широкие возможности, Lighthouse имеет ряд ограничений:
Lighthouse используется в различных сценариях:
Интеграция с CI:
lighthouse-ci autorunПозволяет автоматически проверять метрики при каждом деплое.
Lighthouse тесно связан с концепцией Core Web Vitals:
Эти метрики используются Google для ранжирования сайтов, что делает Lighthouse важным инструментом SEO-оптимизации.
Lighthouse генерирует несколько типов отчётов:
Пример сохранения:
lighthouse https://example.com --output=json --output-path=report.jsonИнструмент умеет моделировать реальные пользовательские условия:
Это позволяет выявлять проблемы, которые не видны при тестировании на мощных компьютерах.
Lighthouse работает поверх Chrome DevTools Protocol (CDP):
Это обеспечивает глубокий доступ к внутренним механизмам браузера.
Экосистема Lighthouse включает:
Lighthouse стал стандартом де-факто для оценки качества фронтенд-приложений. Он объединяет:
Использование Lighthouse позволяет системно подходить к улучшению веб-приложений, основываясь на измеримых показателях и воспроизводимых тестах.