Когда я впервые запустил Lighthouse, результат был 48 из 100. И это было больно. 😅 Как будто тренируешься месяц, а на замерах видишь, что пресс всё ещё “в тумане”. Но именно с этого начинается рост — когда видишь свои слабые места и начинаешь работать точечно.
Lighthouse — это встроенный инструмент от Google, который помогает измерить “здоровье” сайта: скорость, доступность, SEO и качество кода. Сегодня разберём, как им пользоваться и что реально улучшить на основе отчётов.
🧩 Что такое Lighthouse
Lighthouse — это автоматический “аудитор” сайтов.
Он анализирует страницу по пяти направлениям:
Performance (Производительность) — как быстро грузится сайт.
Accessibility (Доступность) — насколько сайт удобен для всех пользователей, включая людей с ограничениями.
Best Practices (Лучшие практики) — соответствие современным стандартам.
SEO — видимость сайта для поисковиков.
PWA — если сайт должен работать как прогрессивное веб-приложение.
По сути, Lighthouse — это твой “цифровой фитнес-тренер”, который показывает, где “проседают” показатели.
⚙️ Как запустить Lighthouse
Есть несколько способов:
Прямо из Chrome DevTools:
Открой сайт → нажми F12 → вкладка “Lighthouse” → выбери тип устройства (Mobile/Desktop) → “Analyze page load”.
Через онлайн-сервис: pagespeed.web.dev
Через командную строку:
npm install -g lighthouse
lighthouse https://example.com --view
CLI-версия удобна, если ты хочешь интегрировать анализ в CI/CD.
🚀 Разбор метрик Lighthouse
1. Performance
Это скорость загрузки сайта.
Ключевые метрики:
Largest Contentful Paint (LCP) — скорость появления основного контента.
First Input Delay (FID) — отклик на действия пользователя.
Cumulative Layout Shift (CLS) — “скачки” верстки.
💡 Как улучшить:
Оптимизируй изображения (WebP, сжатие).
Подключай скрипты асинхронно (async / defer).
Используй CDN для статики.
Настрой кеширование (Cache-Control).
2. Accessibility
Проверяет контраст текста, наличие alt у изображений, правильную структуру заголовков.
⚙️ Совет:
Добавь плагин axe DevTools — он покажет, где именно проблемы с доступностью.
3. Best Practices
Сюда попадает всё, что связано с безопасностью и корректной работой: HTTPS, размеры изображений, консольные ошибки.
🧠 Проверь:
Все внешние ресурсы идут по HTTPS
Нет ошибок JavaScript
Используются современные теги (picture, srcset, и т.д.)
4. SEO
Здесь Lighthouse проверяет базовые SEO-факторы:
Наличие мета-тегов
Заголовки
Читаемые URL
Индексацию страниц
⚙️ Мой лайфхак:
Если SEO-раздел даёт 90+, не останавливайся — подключи Google Search Console и сравни результаты с реальными поисковыми данными.
5. PWA
Если ты делаешь прогрессивное приложение, Lighthouse покажет, где проблемы с офлайн-режимом, кэшем и манифестом.
🔧 Как использовать результаты
После анализа Lighthouse выдаёт отчёт с цветной шкалой:
Красная зона — срочно исправлять.
Жёлтая — можно улучшить.
Зелёная — отлично.
Сохрани отчёт как PDF или JSON и пересылай команде. Я, например, добавляю скриншоты прогресса в Notion — удобно отслеживать “рост” сайта, как тренер фиксирует улучшения формы.
🏁 Финал
Lighthouse — не просто “оценка”, а инструмент роста. Главное — не зацикливаться на цифрах, а использовать отчёт как план тренировок для сайта.
Проверяй сайт регулярно — и твой “цифровой организм” будет в форме. 💪
Подписывайся, чтобы не пропустить новые статьи о том, как делать сайты быстрее, надёжнее и сильнее!
💪 Прокачиваем не только мышцы, но и цифровые проекты.