Google Lighthouse — это бесплатный автоматизированный инструмент для улучшения качества веб-страниц. Он встроен прямо в браузер Google Chrome и предоставляет полный «отчет о здоровье» страницы, оценивая её по пяти ключевым категориям.
Использование Lighthouse — самый быстрый способ выявить технические проблемы и получить конкретные рекомендации по улучшению скорости сайта, доступности и общей производительности.
Пошаговое руководство: как запустить отчет
Процесс простой и не требует технических навыков. Самый удобный способ — через инструменты разработчика Chrome (DevTools).
1. Откройте окно "Инкогнито"
Очень важно проводить тест в режиме инкогнито, чтобы расширения Chrome или кешированные файлы не влияли на результаты.
Windows: Ctrl+Shift+N
Mac: Cmd+Shift+N
2. Перейдите на свой сайт
В окне инкогнито введите URL страницы, которую хотите проверить (например, главную страницу или страницу продукта).
3. Откройте инструменты разработчика (DevTools)
Кликните правой кнопкой мыши по странице и выберите Inspect (Проверить).
Или нажмите F12 (Windows) / Cmd+Option+I (Mac).
4. Найдите вкладку "Lighthouse"
В окне DevTools (обычно справа или снизу) есть вкладки: Elements, Console и др.
Найдите вкладку Lighthouse.
Если не видите, возможно, она скрыта за значком >>.
5. Настройте отчет
Mode (Режим): оставьте Navigation.
Device (Устройство): выберите Mobile. Это ключевой параметр — Google оценивает сайты в первую очередь по мобильной версии. Проверка на Desktop полезна, но мобильный аудит критичен.
Categories (Категории): убедитесь, что все пять галочек установлены: Performance, Accessibility, Best Practices, SEO.
6. Сгенерируйте отчет
Нажмите синюю кнопку Analyze page load или Generate report.
Lighthouse начнет имитацию посещения страницы с мобильного устройства. Через 30–60 секунд вы получите подробный отчет.
На что обратить внимание в результатах
Вы увидите 5 (или 4) оценок от 0 до 100. Цель — стремиться к 100 в каждой категории, особенно в следующих:
1. Производительность (Performance)
Наиболее важный и часто сложный показатель. Показывает, как быстро страница загружается и становится интерактивной.
На что смотреть:
Largest Contentful Paint (LCP): время появления самого крупного элемента на экране.
Interaction to Next Paint (INP) / First Input Delay (FID): скорость отклика страницы на действия пользователя.
Cumulative Layout Shift (CLS): смещение элементов при загрузке страницы (визуальная стабильность).
Как улучшить:
Оптимизация изображений (например, WebP).
Уменьшение неиспользуемого JavaScript.
Включение сжатия текста и использование кеширования браузера.
2. Доступность (Accessibility)
Показывает, насколько сайт удобен для людей с ограниченными возможностями (визуальными, слуховыми, моторными).
На что смотреть:
Контраст текста и фона.
Наличие alt-текстов для изображений.
Четкие и описательные подписи к кнопкам.
3. Лучшие практики (Best Practices)
Проверка на соответствие современным стандартам веб-разработки и безопасности сайта.
На что смотреть:
Использование HTTPS.
Ошибки в консоли браузера.
Корректное отображение изображений.
4. SEO (Поисковая оптимизация)
Lighthouse проверяет базовые технические SEO-настройки.
На что смотреть:
Уникальные заголовки и мета-описания страниц.
Удобочитаемые ссылки для поисковых систем.
Наличие тега viewport для мобильных устройств.
Рекомендация:
Используйте Lighthouse регулярно (например, раз в месяц или после значительных изменений на сайте), чтобы поддерживать скорость, доступность и поисковую дружественность сайта.
Последние
