Содержание статьи (13)
- Три метрики на пальцах
- Как считает Google: полевые данные и лабораторные
- Влияют ли Core Web Vitals на позиции в Google
- Как проверить свой сайт за 15 минут
- Что чаще всего ломает метрики на украинских сайтах
- Как улучшить LCP
- Как улучшить INP
- Как улучшить CLS
- Что реально на разных платформах
- Сколько стоит оптимизация в Украине
- Типичные ошибки
- Чеклист: Core Web Vitals в 10 пунктах
- Вывод
Core Web Vitals — это три метрики Google, по которым видно, насколько удобно реальным людям пользоваться сайтом: как быстро появляется главный контент (LCP, норма — до 2,5 с), как быстро страница откликается на нажатия (INP, до 200 мс) и не «прыгает» ли вёрстка при загрузке (CLS, до 0,1). Google считает их по данным настоящих посетителей Chrome за последние 28 дней: страница проходит проверку, если в норму укладываются минимум 75% визитов. Чаще всего показатели портят тяжёлые картинки первого экрана, шрифты и сторонние скрипты — чаты, пиксели, виджеты.
Ниже — объяснение без жаргона, таблицы с порогами, типичные проблемы украинских сайтов, план исправлений и чеклист, по которому можно проверить свой сайт или работу подрядчика.
Три метрики на пальцах
Представьте магазин. LCP — сколько покупатель ждёт у двери, пока включат свет в зале. INP — как быстро продавец отвечает, когда к нему обращаются. CLS — не переставляют ли полку ровно в тот момент, когда человек тянется за товаром.
| Метрика | Что измеряет | Хорошо | Нужно улучшить | Плохо |
|---|---|---|---|---|
| LCP (Largest Contentful Paint) | Время до появления самого крупного элемента первого экрана: баннера, фото, заголовка | ≤ 2,5 с | 2,5–4 с | > 4 с |
| INP (Interaction to Next Paint) | Задержка между действием (тап, клик, ввод) и видимой реакцией страницы | ≤ 200 мс | 200–500 мс | > 500 мс |
| CLS (Cumulative Layout Shift) | Сумма неожиданных сдвигов элементов во время просмотра | ≤ 0,1 | 0,1–0,25 | > 0,25 |
LCP: когда страница «появилась»
LCP фиксирует момент, когда отрисован самый крупный видимый блок первого экрана. На лендинге это обычно фоновое фото или баннер, в блоге — заголовок или обложка, в магазине — фото товара. Человеку неважно, что меню и подвал загрузились раньше: пока нет главного, страница для него пустая.
INP: откликается ли сайт
С марта 2024 года INP заменил прежнюю метрику FID. Разница принципиальная: FID учитывал только первое взаимодействие и только задержку до начала обработки, а INP смотрит на все клики и тапы за визит и берёт один из худших. Поэтому сайт, который быстро открывается, но «подвисает» при раскрытии меню, фильтра или калькулятора, теперь проваливает проверку.
CLS: стоит ли вёрстка на месте
Знакомая ситуация: вы целитесь в кнопку «Позвонить», сверху догружается баннер — и палец попадает в рекламу. CLS считает именно такие сдвиги. Пара заметных «прыжков» за визит — и показатель уже красный, даже если сайт открывается быстро.
Как считает Google: полевые данные и лабораторные
Здесь путается большинство владельцев сайтов. В PageSpeed Insights два разных блока:
- Данные реальных пользователей — отчёт Chrome UX Report (CrUX). Именно его учитывает Google: настоящие устройства, настоящий мобильный интернет, окно в 28 дней, оценка по 75-му перцентилю отдельно для смартфонов и компьютеров.
- Диагностика (Lighthouse) — лабораторный тест с баллом от 0 до 100. Это имитация одной загрузки на условном смартфоне среднего уровня с медленной связью.
Отсюда парадоксы. У сайта может быть 95 баллов Lighthouse и проваленные Core Web Vitals, потому что реальные посетители сидят на старых Android и жмут на тяжёлый фильтр. И наоборот: балл 60, а полевые данные зелёные, потому что аудитория — офисные сотрудники с мощными ноутбуками.
В текущих версиях Lighthouse итоговый балл складывается из пяти метрик: Total Blocking Time — 30%, LCP — 25%, CLS — 25%, First Contentful Paint и Speed Index — по 10%. INP в лаборатории не измерить — там нет живых кликов, поэтому его ближайшая лабораторная замена — TBT.
Если полевых данных нет. Небольшим сайтам часто не хватает трафика из Chrome, и PageSpeed Insights пишет «Недостаточно данных». Тогда ориентируйтесь на лабораторный тест и живые метрики в Chrome DevTools, а когда трафик вырастет — на отчёт в Search Console.
Влияют ли Core Web Vitals на позиции в Google
Влияют, но не так, как обещают продавцы «оптимизации за один день». Core Web Vitals входят в сигналы удобства страницы (page experience), которые используют системы ранжирования. Но Google прямо говорит: отличное удобство не перевесит релевантный и полезный контент. Медленный, но лучший ответ на запрос всё равно окажется выше быстрой пустой страницы.
Где скорость действительно решает:
- Равная конкуренция. Когда несколько сайтов одинаково хорошо отвечают на запрос — например, десяток автосервисов в одном районе, — мелкие сигналы вроде скорости могут перевесить.
- Конверсия. Здесь эффект прямой и измеримый. Исследование Deloitte «Milliseconds Make Millions» по заказу Google (2020) показало: ускорение мобильного сайта на 0,1 с коррелировало с ростом конверсии в рознице на 8,4%.
- Реклама. Опыт пользователя на посадочной странице влияет на показатель качества в Google Ads, а значит — на цену клика.
- Мобильный трафик. В Украине большинство посетителей коммерческих сайтов приходят со смартфонов, часто через мобильный интернет. Именно этот сценарий и проверяет Google.
Как проверить свой сайт за 15 минут
- Откройте PageSpeed Insights и проверьте главную плюс одну ключевую страницу — услуги, категории или товара. Сначала смотрите на верхний блок с полевыми данными для мобильных устройств.
- В Google Search Console откройте отчёт «Core Web Vitals». Он объединяет похожие URL — скажем, все карточки товаров — и показывает, какая метрика тянет вниз целую группу.
- В Chrome DevTools → Performance включите замедление процессора (4× или 6×) и сети (Slow 4G), перезагрузите страницу и пощёлкайте меню, фильтры, форму. Живые метрики покажут LCP, INP и CLS именно для ваших действий.
- Откройте сайт на реальном недорогом смартфоне через мобильный интернет. Если белый экран висит дольше двух секунд — клиенты видят то же самое.
Разумный минимум для владельца: раз в месяц заглядывать в отчёт Search Console, а после любой правки на сайте (новый виджет, баннер, обновление темы) прогонять PageSpeed Insights.
Что чаще всего ломает метрики на украинских сайтах
| Проблема | Какую метрику портит | Как исправить |
|---|---|---|
| Слайдер на первом экране из 3–6 фото по 1–3 МБ | LCP | Одно статичное изображение в WebP или AVIF до 150–200 КБ, остальные слайды — позже |
| Ленивая загрузка включена и для баннера первого экрана | LCP | Баннер грузить сразу и с высоким приоритетом, lazy — только ниже первого экрана |
| Дешёвый хостинг, ответ сервера 1–2 с | LCP | Кеширование страниц, CDN, сервер ближе к аудитории; цель — TTFB до 0,8 с |
| Чат, виджет обратного звонка, пиксели Meta и TikTok, 10–20 тегов в GTM | INP, LCP | Отложенная загрузка после первого взаимодействия, ревизия и чистка тегов |
| 4–6 начертаний шрифта с кириллицей | LCP, CLS | 2–3 начертания, локальное размещение, только нужные символы |
| Cookie-баннер или поп-ап, сдвигающий контент | CLS | Баннер поверх контента, а не над ним; поп-апы — не раньше чем через 10–15 с |
| Картинки и видео без заданных размеров | CLS | Ширина и высота или aspect-ratio, зарезервированное место под баннеры |
| Встроенное видео YouTube на первом экране | LCP, INP | «Фасад»: картинка-превью, плеер грузится после клика |
| Визуальный конструктор с десятками плагинов | Все три | Отказ от лишнего, лёгкая тема или переезд на более быструю платформу |
Как улучшить LCP
LCP удобно разложить на четыре составляющие — так сразу видно, где теряется время.
- Ответ сервера (TTFB). Цель — до 0,8 с. Помогают кеширование, CDN, нормальный хостинг вместо тарифа за 50 грн в месяц и меньше обращений к базе при каждом открытии страницы.
- Задержка перед загрузкой главного ресурса. Браузер должен узнать о фото первого экрана как можно раньше. Поэтому изображение должно стоять прямо в HTML (а не подставляться скриптом или CSS-фоном), с атрибутом fetchpriority="high" и без lazy-loading.
- Время загрузки ресурса. Формат AVIF или WebP, размер под экран (не отдавайте смартфону картинку шириной 2 560 пикселей), сжатие. Большинству баннеров хватает 100–200 КБ.
- Задержка отрисовки. Блокирующие CSS и JavaScript в head, шрифты, которые ещё не загрузились, анимации появления, которые прячут заголовок на 1–2 секунды. Критические стили стоит встроить, остальное — отложить.
Ориентир, которым пользуются инженеры: примерно 40% времени LCP — на ответ сервера, ещё около 40% — на загрузку самого изображения, а обе задержки вместе — не больше 20%.
Как улучшить INP
INP ухудшают «длинные задачи» — куски JavaScript, которые занимают основной поток браузера дольше 50 мс. Пока они выполняются, страница не реагирует на касания.
- Сторонние скрипты — главный подозреваемый. Проведите инвентаризацию: что реально используется? Нередко на сайте одновременно живут два счётчика, старый пиксель и чат, в котором никто не отвечает.
- Откладывайте некритичное. Чат, виджеты соцсетей, карты и видео можно подгружать после первого взаимодействия или когда блок попадает в зону видимости.
- Дробите тяжёлые обработчики. Фильтр каталога, калькулятор, поиск: сначала мгновенно показать реакцию (подсветить кнопку, вывести индикатор), а тяжёлые вычисления выполнить следующим шагом.
- Уменьшайте DOM. Разумный ориентир — до 1 400 элементов на странице: именно с этой границы Lighthouse традиционно считает DOM избыточным. Мегаменю на 300 пунктов, скрытые дубли мобильной и десктопной версий, десятки спрятанных поп-апов замедляют каждое взаимодействие.
- Осторожнее с анимациями. Анимируйте transform и opacity, а не размеры и позиции элементов.
Как улучшить CLS
- Задавайте размеры всем изображениям, видео, iframe и рекламным блокам или резервируйте под них место через aspect-ratio.
- Ничего не вставляйте над уже показанным контентом. Баннеры акций, плашки вроде «Работаем во время тревоги», cookie-уведомления должны либо занимать заранее отведённое место, либо появляться поверх страницы.
- Подберите запасной системный шрифт, близкий по метрикам к фирменному, и используйте size-adjust — тогда текст не «перепрыгивает» после загрузки шрифта.
- Показывайте скелетоны вместо пустоты: если блок отзывов или товаров догружается, пусть на его месте стоит заглушка того же размера.
Что реально на разных платформах
| Платформа | Что можно сделать самостоятельно | Типичные ограничения |
|---|---|---|
| Конструкторы (Tilda, Wix и т. п.) | Сжать картинки, убрать лишние блоки и виджеты, сократить число шрифтов | Код платформы не изменить; часть скриптов грузится всегда |
| WordPress | Лёгкая тема, кеширование, оптимизация изображений, ревизия плагинов | Тяжёлые визуальные конструкторы и 30+ плагинов часто не дают выйти в зелёную зону без переделки |
| SaaS-платформы для магазинов | Оптимизация фото, аккуратность с приложениями и виджетами | Шаблон и скорость сервера контролирует платформа |
| Индивидуальная разработка | Полный контроль: серверный рендеринг, оптимизация изображений, разбиение кода | Результат зависит от дисциплины разработчика, поэтому фиксируйте показатель в договоре |
Если сайт собран на конструкторе или перегруженном WordPress и показатели красные на всех шаблонах, иногда дешевле переделать сайт, чем месяцами латать старый. Шире об этом — в статье про скорость сайта.
Сколько стоит оптимизация в Украине
Ориентировочные рыночные цены на 2026 год:
| Работа | Диапазон | Когда уместно |
|---|---|---|
| Аудит скорости со списком задач | 2 000–6 000 грн | До любых правок, чтобы понять, что именно ломает метрики |
| «Быстрые победы» на WordPress: картинки, кеш, шрифты, отложенные скрипты | 5 000–15 000 грн | Сайт в целом нормальный, но перегружен |
| Глубокая оптимизация фронтенда и сервера | 15 000–50 000 грн | Магазин или каталог с большим трафиком |
| Редизайн или переезд на другую платформу | 60–100% стоимости нового сайта | Когда проблема в самой платформе или теме |
Технический SEO-аудит с проверкой Core Web Vitals у нас стоит 4 900 ₴. Для новых сайтов мы фиксируем в договоре PageSpeed 90+ на мобильных — или дорабатываем бесплатно. Редизайн считаем как 70% стоимости нового пакета, с переносом контента и 301-редиректами.
Типичные ошибки
- Гнаться за 100 баллами Lighthouse. Балл — это диагностика, а не цель. Решают полевые данные реальных посетителей.
- Проверять только главную. Поисковый трафик в основном приходит на страницы услуг, категорий и статей — тестируйте шаблоны, а не одну страницу.
- Тестировать на офисном Wi-Fi и новом iPhone. Ваши клиенты — на мобильном интернете и смартфонах за 5–8 тысяч гривен.
- Ждать изменений в Search Console на следующий день. Данные собираются за 28 дней, поэтому результат правок проявляется постепенно, в течение месяца.
- Ставить несколько плагинов кеширования сразу. Они конфликтуют, и сайт может стать медленнее или вовсе сломаться.
- Удалять аналитику ради зелёного балла. Без неё не посчитать заявки. Правильный путь — отложенная загрузка и чистка ненужных тегов.
- Оптимизировать один раз. Новый виджет, баннер акции или плагин за день могут свести работу на нет. Скорость — это процесс, а не разовый проект.
Чеклист: Core Web Vitals в 10 пунктах
- Полевые данные в PageSpeed Insights зелёные на мобильных по всем трём метрикам
- В Search Console нет групп URL со статусом «Плохо»
- Изображение первого экрана — WebP или AVIF, до 200 КБ, без lazy-loading, с высоким приоритетом
- Ответ сервера (TTFB) — до 0,8 с
- Не больше 2–3 начертаний шрифтов, размещённых локально
- Чаты, пиксели и виджеты грузятся отложенно; в GTM — только нужные теги
- У всех изображений, видео и iframe заданы размеры
- Cookie-баннер и поп-апы не сдвигают контент
- Меню, фильтры и формы откликаются мгновенно даже при 4× замедлении процессора
- После каждой заметной правки сайта — повторная проверка
Вывод
Core Web Vitals — не магия и не «секретный фактор SEO», а три вполне конкретных вопроса: быстро ли человек видит главное, откликается ли сайт на его действия и не прыгает ли страница. Обычно их решает десяток рутинных действий с картинками, шрифтами и сторонними скриптами, и эффект заметен не столько в позициях, сколько в заявках.
Начните с онлайн-аудита сайта — он покажет, какие метрики красные и почему. Если платформа уже не вытягивает, посмотрите, как мы делаем редизайн с гарантией PageSpeed 90+ на мобильных, а чтобы показатели не проседали после запуска, есть поддержка сайта с регулярным мониторингом. Как мобильная версия влияет на продажи, мы разобрали отдельно — в статье про мобильную версию сайта.
Редакция Tvorum
Пишем о том, с чем работаем каждый день: сайты, SEO, реклама и конверсия. Простым языком, с цифрами и примерами — чтобы вы могли применить это в своём бизнесе.
