Проверка HTML в Lighthouse

Lighthouse — это встроенный в Chrome DevTools (вкладка Audits) инструмент автоматического аудита, который оценивает страницу по пяти направлениям: производительность, доступность, лучшие практики, SEO и PWA. Он загружает проверяемую страницу в браузере, выполняет измерения и выдаёт практические рекомендации.

В Chrome DevTools перейдите в Lighthouse, выберите категории, укажите режим для компьютера или мобильного устройства и нажмите «Проанализировать загрузку страницы». Инструмент перезагрузит страницу в чистом окружении и менее чем за минуту создаст отчёт.

Производительность измеряет основные веб-показатели и другие метрики скорости. Доступность проверяет правила, соответствующие WCAG. Лучшие практики охватывают безопасность и современные веб-стандарты. SEO проверяет разметку, доступную для сканирования. PWA проверяет возможность установки и работу без подключения к сети.

Аудит доступности выявляет: отсутствующий альтернативный текст, отсутствующие метки полей формы, низкую контрастность цветов, отсутствующий атрибут языка, дублирующиеся идентификаторы, отсутствующие ориентиры и элементы, доступные для фокусировки, но не поддерживающие клавиатуру. Для каждой проблемы доступна ссылка на подробные инструкции по исправлению.

Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), Total Blocking Time (TBT) и индекс скорости. Каждая метрика получает оценку и определённый вес при расчёте общей оценки производительности. Lighthouse показывает, какие элементы DOM сильнее всего влияют на каждую метрику.

Проверяет использование HTTPS, ошибки в консоли, соотношение сторон изображений, устаревшие API и смешанное содержимое. Аудит лучших практик выявляет широкий спектр устаревших или небезопасных решений, которые следует модернизировать.

Выявляет отсутствие метаописания, отсутствие или дублирование <title>, проблемы с robots.txt, ссылки без описательного текста, отсутствие метатега области просмотра и проблемы с hreflang. Сочетайте SEO-аудит Lighthouse с полноценным инструментом SEO-аудита (Ahrefs, Screaming Frog) для анализа содержимого.

Проверяет все требования для установки: HTTPS, корректный манифест с минимальным набором полей, зарегистрированный сервисный обработчик, тег области просмотра и значки. Исправьте все ошибки аудита PWA до запуска приложения с возможностью установки.

Интерфейс командной строки Lighthouse и инструмент Lighthouse CI встраивают аудиты в CI/CD. Для каждого PR Lighthouse запускается на развёрнутом предварительном просмотре; действие завершается с ошибкой, если оценки опускаются ниже пороговых значений. Это предотвращает незаметные регрессии доступности, производительности или SEO.

Отчёты Lighthouse можно сохранять в формате JSON и сравнивать программно: отслеживать оценку LCP во времени для обнаружения регрессий, сравнивать два PR и определять, какой из них изменил конкретную метрику, а также выдавать предупреждения при пересечении пороговых значений. Данные структурированы для использования в инструментах.

Lighthouse выполняет синтетическое тестирование: оно проходит в контролируемом окружении, а не у реальных пользователей. Сочетайте его с инструментами мониторинга реальных пользователей (RUM), которые отслеживают фактический пользовательский опыт. Синтетические тесты выявляют регрессии на раннем этапе, а RUM подтверждает, что пользователи действительно ощущают улучшения.

Некоторые аудиты отмечают решения, которые неизбежны в определённых контекстах. Документируйте намеренные исключения, добавляйте их в список игнорирования Lighthouse CI и периодически пересматривайте их по мере развития платформы. Не используйте безоговорочное «игнорировать всё»: это лишает автоматический аудит смысла.

Рассматривайте оценки Lighthouse как цель для непрерывного улучшения, а не как разовую задачу. Создайте культуру проверки оценки для каждого PR, немедленного устранения регрессий и постепенного улучшения исходного уровня. При таком подходе большинство команд видит стабильный рост оценок в течение нескольких месяцев.

Почему синтетические аудиты Lighthouse следует сочетать с мониторингом реальных пользователей (RUM)?

Lighthouse проверяет страницу по направлениям производительности, доступности, лучших практик, SEO и PWA. Запускайте его из Chrome DevTools для разовых проверок, а Lighthouse CI — для непрерывной интеграции. Устраняйте регрессии в каждом PR, развивайте культуру улучшений на основе измерений и сочетайте синтетические аудиты с мониторингом реальных пользователей, чтобы убедиться, что лабораторные улучшения приносят пользу реальным пользователям.