Когда мы говорим "сайт быстрый" — это не про цифры в Lighthouse, а про то, как человек ощущает взаимодействие.
Google выделил три ключевых метрики, которые напрямую влияют на удобство:
LCP — Largest Contentful Paint
INP (ранее FID) — Interaction to Next Paint
CLS — Cumulative Layout Shift
Давай разберём их: что значат, как ломаются и как чинить.
1. 🖼 LCP — "Когда я увидел главное"
Что это: за сколько секунд показывается главный кусок контента (большая картинка, заголовок, постер видео).
👉 Хорошо: ≤ 2.5с, Плохо: > 4с.
Пример плохого UX:
Открываешь страницу новостей, а вместо фото и заголовка долго смотришь на белый экран. Даже если внизу уже подгрузился футер, пользователю кажется, что страница медленная.
Что ломает LCP:
- Ленивая загрузка (loading="lazy") у главной картинки.
- Большой TTFB (медленный сервер/БД).
- Картинка грузится через JS, а не сразу в HTML.
Как починить:
- Ускорить бэкенд + CDN.
- Добавить preload для картинки
- Не ленизируйте главный баннер.
- Используйте современные форматы (AVIF/WebP).
2. ⚡ INP — "Насколько сайт слушается"
Что это: измеряет задержку между действием (клик, ввод) и моментом, когда UI реально отвечает.
👉 Хорошо: ≤ 200мс, Плохо: > 500мс.
Пример плохого UX:
Ты кликаешь на кнопку "Добавить в корзину", а сайт думает 1–2 секунды, и только потом подсвечивает товар. Даже если заказ оформляется успешно — ощущение тормоза.
Что ломает INP:
- Тяжёлый JS-бандл, грузящий CPU.
- Обработчик события делает слишком много (например, ререндер целого списка).
- Длинные задачи > 50мс на главном потоке.
Как починить:
- Разбивайте работу на части (Web Worker, requestIdleCallback).
- Даём быстрый визуальный отклик, а данные подгружаем асинхронно.
- Слушатели прокрутки/тача → всегда passive: true
- Для длинных списков — content-visibility: auto; в CSS.
3. 📏 CLS — "Ничего не прыгает"
Что это: метрика стабильности интерфейса.
👉 Хорошо: ≤ 0.1, Плохо: > 0.25.
Пример плохого UX:
Ты хотел кликнуть "Оплатить", но страница прыгнула из-за подгрузившейся рекламы, и ты ткнул в "Удалить". Боль.
Что ломает CLS:
- Картинки без размеров.
- Баннеры/видео без зарезервированного места.
- Подключение шрифтов без font-display: swap.
Как починить:
- Всегда задаём размеры/aspect-ratio у изображений
- Резервируем контейнеры под рекламу.
- Используем font-display: swap и fallback-шрифты близкие по метрикам.
- Анимации — только через transform/opacity.
#оптимизации #react #frontend #ux #performance