Core Web Vitals — набор из трёх показателей, которыми браузер оценивает, насколько сайт удобен в момент загрузки и использования. Формально это про технику, фактически — про то, сколько людей закроют вкладку, не дождавшись.
LCP — когда появляется главное
Largest Contentful Paint показывает, за сколько секунд отрисовался самый крупный элемент первого экрана. Цель — уложиться в 2,5 секунды на мобильной сети. Основные причины провала: тяжёлые изображения без современных форматов, шрифты, блокирующие отрисовку, и рендеринг, полностью зависящий от JavaScript.
- Отдавайте изображения в AVIF или WebP с адаптивными размерами
- Подгружайте шрифты через next/font с font-display: swap
- Рендерьте первый экран на сервере, не откладывая его до загрузки скриптов
- Ставьте priority только на действительно главное изображение страницы
INP — насколько интерфейс отзывчив
Interaction to Next Paint измеряет задержку между действием пользователя и видимой реакцией. Главный виновник высоких значений — длинные задачи в основном потоке: тяжёлые вычисления, избыточные перерисовки, синхронная работа с большими списками.
// Вместо анимации свойств, вызывающих перерасчёт раскладки,
// анимируем только transform и opacity — они идут на GPU.
<motion.div
initial={{ opacity: 0, y: 24 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: '-15%' }}
transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
/>CLS — почему «прыгает» вёрстка
Cumulative Layout Shift накапливает смещения содержимого во время загрузки. Лечится скучно и надёжно: задавайте размеры изображений и видео, резервируйте место под баннеры и уведомления, не вставляйте блоки над уже прочитанным содержимым.