Оптимизация Lighthouse: LCP/CLS/INP
Оптимизация сайта по Lighthouse: как улучшить показатели LCP, CLS и INP, ускорить загрузку и поднять оценку. Практические приёмы для фронтендера с понятными примерами.
Коротко. Lighthouse оценивает скорость и удобство по метрикам Core Web Vitals: LCP (как быстро появился основной контент), CLS (насколько «прыгает» вёрстка), INP (как быстро реагирует на действия). Оптимизация картинок, шрифтов и JS даёт наибольший прирост.
Core Web Vitals
| Метрика | Про что | Хорошо |
|---|---|---|
| LCP | Скорость появления главного контента | < 2.5 с |
| CLS | Стабильность вёрстки (сдвиги) | < 0.1 |
| INP | Отзывчивость на действия | < 200 мс |
LCP: ускоряем загрузку
- ✅ Оптимизируйте картинки: современные форматы (WebP/AVIF), правильный размер.
- ✅ Ленивая загрузка не-первого экрана:
loading="lazy". - ✅ Предзагрузка ключевых ресурсов (preload) для шрифтов и hero-картинки.
- ✅ Меньше блокирующего JS/CSS в начале загрузки.
CLS: убираем сдвиги
- ✅ Задавайте размеры картинок и видео (width/height), чтобы место резервировалось.
- ✅ Резервируйте место под рекламу/баннеры заранее.
- ✅ Аккуратно со шрифтами: избегайте резкой подмены, ломающей раскладку.
INP: отзывчивость
- ✅ Не блокируйте главный поток тяжёлыми вычислениями.
- ✅ Разбивайте длинные задачи, дебаунсите частые обработчики.
- ✅ Убирайте лишний JavaScript — грузите код по мере надобности (code splitting).
Быстрый чеклист
- Сожмите и переведите картинки в WebP/AVIF.
- Задайте размеры медиа, чтобы убрать сдвиги.
- Уберите неиспользуемый CSS/JS.
- Включите кэширование и сжатие на сервере.
- Прогоните Lighthouse и чините по приоритету подсказок.
Частые вопросы
Где запускать Lighthouse?
В DevTools Chrome (вкладка Lighthouse) или через PageSpeed Insights для данных с реальных пользователей.
Что оптимизировать первым?
Обычно картинки и шрифты дают самый быстрый прирост LCP и общего балла.
Влияет ли скорость на SEO?
Да, Core Web Vitals — фактор ранжирования и удержания. Быстрый сайт лучше и для людей, и для поиска.