Есть метрика, которую легко почувствовать, но трудно увидеть в цифрах. Вы открываете сайт, вроде бы всё хорошо, но что-то не так. Страница долго думает, кнопка не сразу реагирует на нажатие, а картинка в середине текста вдруг прыгает вниз. Посетитель этого не осознаёт, но уходит быстрее. Core Web Vitals — это как раз попытка перевести это «что-то не так» на язык чисел.
Три метрики: LCP, INP и CLS. Каждая отвечает за свой тип раздражения. И, вопреки мифам, проверять их не так сложно, как кажется.
LCP: сколько ждать, пока появится главное
LCP (Largest Contentful Paint) измеряет, как быстро на экране появляется самый большой элемент — обычно это главная картинка на первом экране или крупный заголовок. Хорошим считается значение до 2,5 секунды. Всё, что дольше четырёх секунд, — уже плохо.
Чаще всего виноваты три вещи. Первая — сама картинка: кто-то загрузил баннер весом в несколько мегабайт в PNG. Вторая — шрифты: текст не показывается, пока не скачается кастомный шрифт. Третья — сервер: пока он отвечает, страница остаётся белой.
Что проверить в первую очередь: откройте Chrome DevTools, запустите запись производительности и посмотрите, какой именно элемент помечен как LCP. Часто это не тот блок, о котором вы думаете.
Если виновата картинка, переведите её в WebP, добавьте атрибуты width и height, а также fetchpriority="high" — это подсказка браузеру, что грузить нужно прямо сейчас. Если шрифт, используйте font-display: swap, чтобы текст показывался системным шрифтом, пока грузится ваш. Если сервер, тут поможет хостинг и кэш, но это уже отдельная история.
INP: что происходит после клика
INP (Interaction to Next Paint) заменил старую метрику FID в 2024 году и с тех пор стал строже. Он измеряет время от любого действия пользователя — клика, тапа, нажатия клавиши — до того момента, когда страница визуально отреагирует. Хороший результат — до 200 миллисекунд. Всё, что дольше 500 мс, — плохо.
Главный виновник — JavaScript. Тяжёлые скрипты, сторонние виджеты, чаты, слайдеры — всё это конкурирует за внимание браузера, и пока он занят одним, кнопка не реагирует на нажатие. WordPress-сайты особенно страдают от нагромождения плагинов.
Проверять INP сложнее, чем LCP, потому что нужна реальная интерактивность. PageSpeed Insights покажет лабораторное значение, но лучше смотреть на полевые данные в Search Console — они основаны на действиях реальных посетителей. Если INP хромает, начните с аудита скриптов: отключите лишние плагины, отложите загрузку тяжёлых виджетов, уменьшите количество сторонних скриптов на первом экране.
CLS: почему всё прыгает
CLS (Cumulative Layout Shift) — самая раздражающая метрика для пользователя. Она измеряет, насколько сильно элементы смещаются во время загрузки страницы. Хороший показатель — менее 0,1. Если выше 0,25, это уже проблема.
Классический пример: вы читаете текст, и вдруг сверху загружается баннер, сдвигая всё вниз. Или хотите нажать кнопку, а она в последний момент перемещается, и вы попадаете пальцем в пустоту.
Причины почти всегда одни и те же: изображения и видео без указанных размеров, рекламные блоки и iframe без зарезервированного места, а также шрифты, которые подменяют системный шрифт и меняют высоту строк.
Решение простое: у каждой картинки и встроенного элемента должны быть явные width и height или CSS aspect-ratio. Тогда браузер заранее знает, сколько места нужно оставить, и ничего не прыгает. Для шрифтов — тот же font-display: swap плюс size-adjust, чтобы запасной шрифт занимал примерно столько же места.
Как проверять всё вместе
Два бесплатных инструмента закрывают почти все потребности. PageSpeed Insights показывает лабораторные и полевые данные по конкретной странице, а Search Console — общую картину по сайту на основе реальных пользователей. Для более глубокой диагностики можно использовать GTmetrix или WebPageTest, но для старта достаточно первых двух.
Важный нюанс: не гонитесь за лабораторными оценками. Lighthouse может показать 95 баллов, а реальные пользователи на медленном мобильном интернете будут страдать. Смотрите в первую очередь на полевые данные — они отражают то, с чем действительно сталкиваются люди.
И ещё: Core Web Vitals — не единственный фактор ранжирования. Исследования показывают, что это скорее «тайбрейкер», чем основной сигнал. Но если два сайта похожи по контенту и ссылкам, лучший пользовательский опыт вполне может стать той гирей, которая перевесит чашу.
Что в итоге
LCP, INP и CLS — это не абстрактные цифры для отчёта. Это три вопроса: быстро ли появляется главное, отзывается ли страница на действия и не прыгает ли всё под рукой. Если ответы «да», сайт ощущается нормальным. Если нет, посетитель уходит — даже если он не сформулирует почему.
Начните с одного: откройте PageSpeed Insights для своей главной страницы и посмотрите, какая из трёх метрик в красной зоне. Скорее всего, там будет LCP. С него и начинайте. Остальное подтянется по мере сил.
Если не хочется разбираться в DevTools и скриптах самостоятельно, это нормально — мы обычно начинаем с быстрого аудита, показываем, что именно тормозит и почему, и говорим, какие правки дадут эффект, а какие можно отложить. Напишите или оставьте заявку — посмотрим на ваш сайт и подскажем, с чего начать, чтобы он стал быстрее без переделки всего подряд.