Оптимизация 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).
Как читать отчёт Lighthouse
Не гонитесь за цифрой 100 — это редко нужно и не всегда достижимо. Смотрите на раздел Opportunities (что ускорить) и Diagnostics (что не так) — там Lighthouse прямо перечисляет проблемы с оценкой выигрыша в секундах. Чините сверху вниз: первые 2–3 пункта обычно дают основной прирост. И помните про разницу: лабораторные данные Lighthouse (одна прогонка) полезны для отладки, а поле (PageSpeed Insights, данные реальных пользователей) — для оценки реальной картины.
Быстрые победы
Если времени мало, эти три шага дают максимум эффекта на минимуме усилий: сожмите и переведите картинки в WebP/AVIF (обычно самый большой выигрыш LCP), проставьте width/height у всех медиа (убирает почти весь CLS) и включите сжатие gzip/brotli и кэширование на сервере. Уже этого часто достаточно, чтобы из «красной» зоны перейти в «зелёную».
Быстрый чеклист
- Сожмите и переведите картинки в WebP/AVIF.
- Задайте размеры медиа, чтобы убрать сдвиги.
- Уберите неиспользуемый CSS/JS.
- Включите кэширование и сжатие на сервере.
- Прогоните Lighthouse и чините по приоритету подсказок.
LCP, CLS, INP — что трогать первым
LCP: герой-картинка/шрифт/блочный SSR — сжимайте LCP-ресурс, preload критичного, не блокируйте CSS гигантом. CLS: резервируйте размеры img/advert, не вставляйте контент сверху без места. INP: тяжёлый JS на клике — режьте main thread, debouncе, меньше гидратации.
Не гонитесь за 100 баллами на пустой странице. Снимите профиль на реальном URL, исправьте топ-3 lab/field проблемы, проверьте на mid-device. База фронта — фронтенд старт 2026.
Lab vs field
Lighthouse — лаборатория. CrUX/field — реальность пользователей. Чините то, что болит в field на mid-device. Сжатие картинок и меньше JS часто дают больше, чем микрооптимизации CSS.
Следующий шаг во фронтенде
Примените идеи из «Оптимизация Lighthouse: LCP/CLS/INP» к своему учебному проекту или к одной вакансии на этой неделе. Сделайте маленький артефакт в git: компонент/страница с адаптивном, один fetch к API, обработка loading/error. Карта обучения: что учить фронтендеру, полный план — старт 2026, проекты — React для портфолио. Обзор роли — фронтенд на уровне джуна.
Измерьте результат одной правки
Выберите одну страницу и сохраните исходный отчёт Lighthouse. Исправьте одну найденную проблему, например скачок блока при загрузке картинки. Повторите замер несколько раз в тех же условиях и сравните медианные значения. В отчёт добавьте саму правку и ограничения измерения.
По теме: фронтенд старт 2026, что учить фронтендеру, React для портфолио, фронтенд на уровне джуна, профессии.
Частые вопросы
Где запускать Lighthouse?
В DevTools Chrome (вкладка Lighthouse) или через PageSpeed Insights для данных с реальных пользователей.
Что оптимизировать первым?
Обычно картинки и шрифты дают самый быстрый прирост LCP и общего балла.
Влияет ли скорость на SEO?
Да, Core Web Vitals — фактор ранжирования и удержания. Быстрый сайт лучше и для людей, и для поиска.
Материал «Оптимизация Lighthouse: LCP/CLS/INP» имеет смысл только вместе с практикой: один артефакт в git на этой неделе важнее десяти вкладок с теорией. Если застряли на выборе роли — начните с профессий и одной вакансии-ориентира.