Lighthouse — это инструмент для автоматизированного аудита веб-приложений, включающий проверку соответствия стандартам веб-доступности, производительности, прогрессивных веб-приложений и SEO. Основной задачей блока проверки соответствия является выявление нарушений правил доступности и стандартов веб-разработки, что позволяет повысить качество и универсальность сайта.
Для начала работы с Lighthouse необходимо подключить его как модуль в проект:
import lighthouse from 'lighthouse';
import chromeLauncher from 'chrome-launcher';
async function runLighthouse(url, opts = {}, config = null) {
const chrome = await chromeLauncher.launch({ chromeFlags: ['--headless'] });
opts.port = chrome.port;
const result = await lighthouse(url, opts, config);
await chrome.kill();
return result.lhr;
}Ключевые моменты:
url — адрес веб-страницы для аудита.opts — объект опций, включая настройки мобильной или
десктопной версии.config — конфигурация аудита, позволяет включать или
исключать категории и конкретные проверки.Lighthouse классифицирует проверки соответствия по категориям:
Accessibility (Доступность) Проверяет элементы интерфейса на наличие альтернативного текста, контрастности, правильного использования ARIA-атрибутов и семантической разметки.
Best Practices (Лучшие практики) Контролирует соблюдение стандартов безопасности, корректность HTTPS, отсутствие устаревших API и использование безопасных методов загрузки ресурсов.
SEO Оценка соответствия страницы рекомендациям поисковых систем: наличие мета-тегов, правильная структура заголовков, корректная индексация.
1. Контраст текста и фона Lighthouse вычисляет коэффициент контрастности и сравнивает его с пороговыми значениями WCAG. Для текста малого размера минимальное значение — 4.5:1, для крупного — 3:1.
2. Альтернативный текст изображений Каждое
изображение должно содержать атрибут alt. Если изображение
является декоративным, атрибут alt должен быть пустым
(alt="").
3. Семантическая разметка Использование тегов
,
, и правильной
структуры заголовков (h1–h6) позволяет
инструменту корректно определить смысловые блоки страницы.
4. Фокусировка и клавиатурная навигация Все интерактивные элементы должны быть доступны с клавиатуры. Lighthouse проверяет последовательность фокуса и наличие видимых индикаторов.
5. ARIA-атрибуты Проверка правильного использования
aria-label, aria-hidden, role и
других атрибутов для элементов, недоступных через стандартные
HTML-теги.
Lighthouse позволяет создавать собственные проверки, расширяя
встроенные. Для этого используется объект конфигурации с блоком
audits:
const customConfig = {
extends: 'lighthouse:default',
audits: [
'my-custom-audit'
],
};
class MyCustomAudit extends Audit {
static get meta() {
return {
id: 'my-custom-audit',
title: 'Проверка пользовательского атрибута',
description: 'Проверяет наличие custom-атрибута на важных элементах',
requiredArtifacts: ['DOM']
};
}
static audit(artifacts) {
const elements = artifacts.DOM.querySelectorAll('[data-important]');
const score = elements.length > 0 ? 1 : 0;
return { score };
}
}Особенности:
extends: 'lighthouse:default' наследует стандартные
проверки.Audit и реализует метод
audit, возвращающий объект с результатами.Lighthouse поддерживает несколько форматов:
Пример генерации отчёта в HTML:
const fs = require('fs');
const reportHtml = result.report[0]; // HTML
fs.writeFileSync('lighthouse-report.html', reportHtml);Для CI/CD Lighthouse можно запускать через Node.js и сохранять отчёты для последующего анализа:
(async () => {
const lhr = await runLighthouse('https://example.com', { output: 'json' });
fs.writeFileSync('report.json', JSON.stringify(lhr, null, 2));
})();Преимущества: