Core Web Vitals - это 3 метрики, которыми Google оценивает удобство загрузки страницы: LCP (главный блок виден до 2,5 секунды), INP (реакция на клик до 200 мс) и CLS (сдвиг вёрстки не больше 0,1). Для бизнеса за ними стоит простая вещь: сколько людей с мобильного дождутся первого экрана и не уйдут к конкуренту.
Ниже разберём, что означает каждая метрика без жаргона, где её проверить и 8 способов улучшить, отсортированных от дешёвых к дорогим.
I. Что такое Core Web Vitals
Это набор показателей, который Google собирает с реальных пользователей браузера Chrome и учитывает как один из сигналов ранжирования. Сигнал не решающий: полезный текст на медленной странице обычно побеждает пустой на быстрой. Но при прочих равных скорость отделяет соседние позиции, а главное - влияет на поведение людей, которое учитывают и Google, и Яндекс.
У Яндекса нет публичного аналога с порогами, но поведенческие сигналы для него важны: если человек закрыл страницу через 3 секунды белого экрана и вернулся в выдачу, это плохой сигнал для любой поисковой системы.
II. 3 метрики и их пороги
| Метрика | Что измеряет | Хорошо | Требует улучшения | Плохо |
|---|---|---|---|---|
| LCP | Когда отрисован самый крупный блок первого экрана (фото, заголовок, видео-обложка) | до 2,5 с | 2,5-4 с | больше 4 с |
| INP | Задержка между действием (клик, ввод) и видимой реакцией страницы | до 200 мс | 200-500 мс | больше 500 мс |
| CLS | Насколько «прыгает» вёрстка при загрузке | до 0,1 | 0,1-0,25 | больше 0,25 |
Оценка считается по 75-му процентилю: страница «хорошая», если у 75% визитов показатели в зелёной зоне. Поэтому сайт, который летает на офисном ноутбуке, может провалиться на недорогом смартфоне в метро.
Простыми словами: LCP - «когда я увидел, что сайт загрузился», INP - «насколько сайт тормозит, когда я нажимаю кнопку», CLS - «не промахнулся ли я по кнопке, потому что всё уехало вниз».
III. Зачем это бизнесу
- Реклама. Вы платите за клик, а человек уходит до загрузки. Медленный первый экран сжигает часть бюджета незаметно для отчётов.
- Формы заявок. Высокий INP - это кнопка «Отправить», которая не реагирует секунду. Человек жмёт второй раз или бросает форму.
- Доверие. Прыгающая вёрстка на премиальном сайте разрушает впечатление быстрее, чем опечатка.
- Поиск. Скорость - один из сигналов, и он же влияет на поведенческие метрики, которые учитывают обе поисковые системы.
Отдельно про мобильный трафик. У сайтов услуг и магазинов доля посетителей со смартфонов обычно превышает половину, а на рекламе в соцсетях доходит до 80-90%. Эти люди открывают сайт в дороге, через нестабильный 4G, на телефоне среднего класса. Именно на них медленный первый экран бьёт сильнее всего, и именно их данные попадают в оценку Core Web Vitals.
Для владельца это превращается в понятный вопрос: сколько из оплаченных кликов вообще увидели предложение. Сравните в Метрике число кликов из рекламного кабинета и число визитов: если визитов заметно меньше, часть людей закрыла вкладку до загрузки счётчика, и скорость - первая гипотеза.
IV. Как проверить свой сайт
- PageSpeed Insights. Вставьте адрес и смотрите блок с данными реальных пользователей. Если данных нет, у сайта мало трафика из Chrome - ориентируйтесь на лабораторный тест.
- Google Search Console, отчёт «Основные интернет-показатели». Показывает группы страниц с проблемами, а не одну главную.
- Проверка с мобильного через 4G. Откройте сайт вне Wi-Fi и засеките, через сколько секунд виден текст и можно нажать кнопку.
- Яндекс Метрика, отчёт по времени загрузки и вебвизор. Видно, сколько посетителей уходит в первые секунды.
Не гонитесь за 100 баллами в PageSpeed. Лабораторный балл - это синтетика; для поиска и людей важнее, что реальные показатели в зелёной зоне. Разница между 92 и 100 баллами почти никогда не окупает работы.
V. 8 способов улучшить
- Сжать и перевести картинки в WebP или AVIF. Обычно это самый быстрый выигрыш по LCP: вес фото падает на 30-70% без видимой потери качества.
- Указать размеры у изображений и видео. Атрибуты width и height или aspect-ratio резервируют место и убирают сдвиги, то есть улучшают CLS.
- Не лениво грузить первый экран. Главное фото hero загружается сразу с высоким приоритетом, lazy-loading - только для того, что ниже.
- Видео - через обложку. Тяжёлый ролик на первом экране подменяется лёгким постером, а само видео подгружается после отрисовки.
- Убрать лишние сторонние скрипты. Чаты, виджеты, три счётчика аналитики и пиксели часто дают основную часть задержки INP.
- Шрифты: 1-2 начертания и font-display: swap. Текст показывается сразу системным шрифтом, а не ждёт загрузки.
- Отдавать готовый HTML. Пререндер или серверный рендеринг вместо сборки страницы в браузере сокращает время до первого контента.
- Кэш и CDN. Статика отдаётся с ближайшего сервера и кэшируется браузером на месяцы.
Первые 4 пункта обычно укладываются в несколько часов работы разработчика. Пункты 5-6 требуют решения владельца: какой виджет действительно приносит заявки, а какой висит «на всякий случай». Пункты 7-8 - уже изменение архитектуры.
VI. Ограничения и когда пересобирать
На конструкторах сайтов часть проблем не решается в принципе: платформа сама подгружает свои скрипты, шрифты и библиотеки анимации, и владелец не может их отключить. Если после сжатия картинок LCP на мобильном остаётся выше 4 секунд, дальнейшая оптимизация обычно стоит дороже переноса.
Ещё одно ограничение: быстрый сайт не выводит в топ сам по себе. Скорость снимает штраф и потерю посетителей, но позиции дают полезные страницы под запросы. Поэтому ускорение имеет смысл делать вместе с наполнением, а не вместо него. Гарантировать рост позиций или трафика после ускорения никто не может.
Пример баланса скорости и «живого» дизайна - проект для магазина кроссовок Monkey Market: премиальная витрина с каталогом, трендами, видео и заказом в Telegram. Анимации и видео там не блокируют первый экран, а заказ уходит в Telegram без тяжёлой корзины. Похожий подход в проекте для event-агентства НАВСЕГДА: видео и эффекты работают поверх уже отрисованного текста услуг и кейсов.
Перед решением о пересборке полезно посчитать, во что обходится текущее состояние. Возьмите месячный рекламный бюджет, долю отказов с мобильных за первые 5 секунд из Метрики и прикиньте, какая часть бюджета уходит на людей, не увидевших первый экран. Часто эта сумма за 3-6 месяцев сопоставима со стоимостью нового сайта, и решение становится финансовым, а не вкусовым.
VII. Итог
Держите в голове три числа: 2,5 секунды, 200 мс и 0,1. Проверьте сайт в PageSpeed Insights и с мобильного, начните с картинок, размеров блоков и лишних скриптов. Если упираетесь в ограничения платформы, дешевле пересобрать.
В студии разработка сайтов и SEO - это самописные быстрые сайты на React от 80 000 ₽ за 1-2 недели от материалов, перенос с конструктора от 80 000 ₽ и наполнение статьями от 500 ₽ за статью. Заявки с сайта уходят в Telegram или CRM, а если нужен дополнительный поток обращений, есть генерация целевых клиентов.
Наши работы
Сайты, которые студия уже запустила
Четыре проекта N3MIROFF, которые можно открыть прямо сейчас и посмотреть, как они работают.
Агротех с ИИ
SkyFarm ↗
Редизайн сайта систем выращивания: первый экран с контейнерной фермой, схема работы из трёх шагов, карусель продуктов и экран приложения.
Сайт салона
ayvazzovsky.com ↗
Салон сложного окрашивания в Москве: онлайн-запись, видео работ, портфолио и команда. Переехал с Тильды на свой хостинг.
Онлайн-академия
ayvazzovsky.academy ↗
Видеоуроки колористики: каталог, посадочные страницы уроков, личный кабинет и промокоды.
Event-агентство
navsegda-event.ru ↗
НАВСЕГДА: корпоративы и конференции - услуги, кейсы, этапы работы и расчёт мероприятия.
Витрина магазина
Monkey Market ↗
Премиальная витрина магазина кроссовок с заказом в Telegram.
Услуги студии по теме: разработка сайтов под ключ и SEO-продвижение статьями.
Сайт грузится дольше 3 секунд?
Проверим Core Web Vitals, скажем, что можно ускорить, а что проще пересобрать на быстром стеке.
Частые вопросы
Какие значения Core Web Vitals считаются хорошими?
LCP до 2,5 секунды, INP до 200 миллисекунд и CLS не больше 0,1 у 75% визитов реальных пользователей.
Учитывает ли Яндекс Core Web Vitals?
Публичных порогов у Яндекса нет, но скорость влияет на поведение посетителей: быстрый уход в выдачу - плохой сигнал для любой поисковой системы.
Что ускорить в первую очередь?
Картинки: перевод в WebP и сжатие обычно снижают вес на 30-70% и сразу улучшают LCP. Затем размеры блоков и лишние сторонние скрипты.
Нужно ли добиваться 100 баллов в PageSpeed?
Нет. Важнее зелёная зона по реальным данным пользователей. Разница между 90 и 100 баллами почти не влияет на заявки и позиции.
Когда дешевле пересобрать сайт, чем ускорять?
Если сайт на конструкторе и после оптимизации картинок LCP на мобильном остаётся выше 4 секунд. В студии перенос с конструктора стоит от 80 000 ₽.
Разберём скорость вашего сайта
Оставьте адрес - посмотрим LCP, INP и CLS на мобильном и предложим план без лишних работ.
Получить целевые заявки → Telegram