Lighthouse

Определение: Lighthouse — это инструмент аудита качества веб-страницы (встроен в Chrome DevTools и доступен в виде CLI), который проверяет производительность, доступность, SEO и “best practices”, а затем выдаёт отчёт с рекомендациями.

Зачем это нужно

• Быстро оценить качество страницы по ключевым направлениям: Performance, Accessibility, Best Practices, SEO.
• Найти технические проблемы, которые ухудшают скорость и UX: тяжёлые ресурсы, лишний JS, блокирующие стили.
• Проверить базовую SEO-гигиену: метатеги, индексируемость, корректность разметки страниц.
• Увидеть проблемы доступности: контраст, подписи, атрибуты, навигация с клавиатуры.
• Сформировать понятный список задач для команды разработки и контента.
• Сравнивать результаты “до/после” при оптимизации и релизах.

Пример

Пример кода:

npm i -g lighthouse
lighthouse https://example.com --view --preset=desktop
lighthouse https://example.com --only-categories=performance,seo --output=html --output-path=./report.html

Скриншот

Подпись к скриншоту: отчёт Lighthouse в Chrome DevTools: общий скоринг по категориям (Performance, Accessibility, Best Practices, SEO) и блок Opportunities/Diagnostics с рекомендациями.

Частые ошибки

• Сравнивать отчёты, запущенные в разных условиях (разный интернет/устройство/режим), и делать неверные выводы.
• Оптимизировать только “цифры” в отчёте, не проверяя реальный сценарий пользователя на сайте.
• Тестировать одну страницу и переносить выводы на весь сайт без проверки типовых шаблонов (главная, категория, карточка, статья).
• Игнорировать Accessibility и Best Practices, фокусируясь только на Performance.
• Не фиксировать изменения: улучшили один показатель, но ухудшили другой (например, после подключения тяжёлого скрипта).

Связанные термины

• PageSpeed Insights
• Core Web Vitals
• LCP
• CLS
• INP
• Performance budget
• Chrome DevTools

Наши услуги

• SEO-продвижение сайтов — технический аудит и улучшение качества страниц, чтобы сайт лучше ранжировался и быстрее работал.
• Доработка сайтов — исправляем замечания Lighthouse: оптимизация JS/CSS, изображений, рендеринга и шаблонов.
• Техническая поддержка сайта — регулярные проверки, контроль деградаций и стабильность после обновлений.