Скорость сайта давно перестала быть «просто удобством». Сегодня это часть качества страницы: насколько быстро появляется полезный контент, насколько стабильна верстка и как скоро пользователь реально может взаимодействовать с интерфейсом.
Именно это и измеряют Core Web Vitals — набор метрик, которые помогают поисковым системам и владельцам сайтов одинаково понимать: страница «быстрая и комфортная» или «тормозит и бесит».
Ниже разберём, какие метрики актуальны сейчас, как их правильно трактовать и что делать, чтобы улучшить показатели без хаоса и лишних затрат.
Что такое Core Web Vitals и почему они важны
Core Web Vitals (CWV) — это ключевые пользовательские метрики производительности, которые отражают реальный опыт посетителей. Они дополняют другие сигналы качества страницы (мобильная адаптация, безопасность, отсутствие навязчивых интерстициалов и т. д.) и становятся частью общей картины ранжирования.
Важно понимать: CWV — не «волшебная кнопка» для роста позиций. Но на конкурентных выдачах, где у сайтов схожий контент и ссылки, преимущество по скорости и стабильности может стать решающим. Плюс это напрямую влияет на поведенческие метрики: меньше отказов, выше конверсия, больше глубина просмотра.
Какие «новые» метрики скорости используются сейчас
Раньше главным показателем в CWV был LCP (Largest Contentful Paint) — скорость появления самого крупного элемента в видимой области. Сейчас фокус сместился на более точное измерение интерактивности: INP (Interaction to Next Paint) заменил FID (First Input Delay). То есть оценивается не только «первый отклик», а общая отзывчивость интерфейса во время реальных действий пользователя.
Таблица: текущие метрики CWV и целевые значения
| Метрика | Что измеряет | Хорошо | Нужно улучшить | Плохо |
|---|---|---|---|---|
| LCP | когда появляется главный контент в первом экране | до 2,5 сек | 2,5–4 сек | более 4 сек |
| INP | общая отзывчивость интерфейса на действия пользователя | до 200 мс | 200–500 мс | более 500 мс |
| CLS | визуальная стабильность (скачки верстки) | до 0,1 | 0,1–0,25 | более 0,25 |
LCP: как ускорить появление главного контента
LCP чаще всего «портят» тяжёлые изображения, слайдеры, видео-обложки, большие блоки текста, которые долго рендерятся, или медленный сервер.
Типичные причины плохого LCP
-
медленный TTFB (долго отвечает сервер);
-
неэффективные изображения (слишком большие, без современных форматов);
-
блокирующие CSS/JS, из-за которых браузер не рисует страницу;
-
отсутствие приоритета загрузки для LCP-элемента.
Что делать на практике
-
Ускорить серверную часть: кеширование, оптимизация БД, CDN.
-
Перевести изображения в WebP/AVIF, настроить адаптивные размеры.
-
Убрать «тяжёлые» скрипты из первого экрана, отложить всё второстепенное.
-
Для ключевого изображения первого экрана: корректный preload и приоритет загрузки.
INP: новая интерактивность, которую нельзя игнорировать
INP — это про то, как сайт ведёт себя при кликах, вводе текста, выборе фильтров, открытии меню. Если после действия пользователя страница «задумывается», это почти всегда связано с перегруженным JavaScript и длинными задачами в главном потоке.
Что чаще всего ухудшает INP
-
тяжёлые бандлы JS (особенно на SPA);
-
«длинные задачи» (long tasks) от 50 мс и выше;
-
сложные анимации и перерисовки;
-
избыточные обработчики событий и сторонние скрипты (чат-виджеты, трекеры, ретаргетинг).
Что помогает
-
Дробить большие задачи: перенос части логики в Web Workers, оптимизация вычислений.
-
Уменьшать JS: дерево-шейкинг, code splitting, удаление неиспользуемых библиотек.
-
Сокращать влияние сторонних скриптов: загружать позже, через tag manager с условиями, отключать лишнее.
-
Оптимизировать рендер: избегать лишних перерисовок, следить за layout thrashing.
CLS: как убрать «прыжки» элементов и сохранить доверие
CLS особенно заметен на мобильных: нажимаешь на кнопку — и она уезжает, потому что подгрузилась реклама или шрифт. Это раздражает и снижает конверсию.
Основные причины CLS
-
изображения/баннеры без заданных размеров;
-
динамические блоки, которые вставляются сверху контента;
-
поздняя загрузка шрифтов с заменой начертания;
-
виджеты, которые «выпирают» после отрисовки страницы.
Решения, которые работают
-
Всегда задавать width/height для изображений и видео (или резервировать место через CSS).
-
Не вставлять новые блоки над уже отображённым контентом.
-
Настроить правильную стратегию загрузки шрифтов (например, чтобы не было резкой подмены).
-
Для рекламы и виджетов — фиксированные контейнеры с заранее выделенным пространством.
Где смотреть показатели и как правильно измерять
У Core Web Vitals есть два вида данных:
-
Полевые (field data) — реальные данные пользователей, самый важный ориентир.
-
Лабораторные (lab data) — тесты в контролируемых условиях, полезны для отладки.
Инструменты, которые стоит использовать
-
PageSpeed Insights: быстро показывает и полевые, и лабораторные данные.
-
Search Console (отчёт по CWV): группирует проблемы по типам страниц.
-
Lighthouse / DevTools Performance: помогает найти, что именно тормозит.
-
WebPageTest: глубокий разбор загрузки и водопад запросов.
Приоритеты оптимизации: что делать сначала
Чтобы не утонуть в «оптимизировать всё», действуйте по очереди:
-
Стабильность и базовая загрузка: CLS и LCP на ключевых страницах (главная, категории, карточки).
-
Интерактивность: INP на страницах с фильтрами, формами, каталогом и личным кабинетом.
-
Сторонние скрипты: аналитика, виджеты, чаты, пиксели — часто дают быстрый прирост.
-
Техническая гигиена: кеш, CDN, оптимизация изображений, минификация, раздельная загрузка.
Быстрый чек-лист для улучшения CWV
| Задача | На что влияет | Эффект |
|---|---|---|
| Оптимизировать изображения (форматы, размеры, lazy load) | LCP | высокий |
| Убрать блокирующий CSS/JS с первого экрана | LCP, INP | высокий |
| Сократить JavaScript и long tasks | INP | высокий |
| Задать размеры медиа и резервировать места под блоки | CLS | высокий |
| Пересмотреть сторонние скрипты | INP, LCP | средний/высокий |
| CDN + кеширование | LCP | средний/высокий |
Core Web Vitals — это про реальный пользовательский опыт, а не про «попугаи» из тестов. Сейчас особенно важна интерактивность: INP делает упор на то, как сайт реагирует на действия человека, а не только на первый клик.
Если вы улучшаете LCP, стабилизируете CLS и приводите INP в норму, вы получаете сразу три результата: больше доверия пользователей, выше конверсия и дополнительные очки качества в конкурентной выдаче.
