Оптимизация Core Web Vitals 2.0: инструкция для успеха в SEO

Core Web Vitals 2.0 — это не про скорость. Это про ощущение. Щёлкнул — сработало. Прокрутил — не дёрнулось. Зашёл на сайт — и всё на своих местах. Ни подёргиваний, ни задержек. Только ты и интерфейс. Как будто сидишь в спорткаре: всё откликается мгновенно, пальцы запоминают траекторию.

Когда я впервые сравнила поведение двух версий лендинга — до оптимизации и после — ощущение было, как будто открываешь дверь в новый офис после ремонта. Одно и то же пространство, но воздух другой. Пространство дышит.

Это и есть дух Core Web Vitals 2.0.

Что такое core web vitals 2.0?

Если раньше Google измерял, как быстро сайт реагирует на первый клик (метрика FID), то теперь всё строже — встречайте INP (Interaction to Next Paint). Он отслеживает не только первую реакцию, а всю сессию целиком. Все щелчки, свайпы, поля ввода — всё идёт под микроскоп.

А вместе с ним три старых знакомых метрики:

LCP (Largest Contentful Paint) — насколько быстро грузится главный элемент на экране;
CLS (Cumulative Layout Shift) — прыгает ли что-то по странице;
и тот самый INP — как быстро реагирует всё подряд.

Google прямо говорит: хороший сайт — это не только быстрый сайт. Это сайт, с которым удобно. Без сюрпризов. С первого тапа — до последнего скролла вниз. И это уже не рекомендация — это фактор ранжирования.

Зачем оптимизировать INP, CLS и LCP?

INP: когда каждый клик — как пинг до сервера

Я заметила: у сайтов с хорошим INP пользователи проводят больше времени. Кликают чаще. Не уходят. А значит, увеличивается конверсия. Это не пустая цифра — это реальные деньги, если у вас интернет-магазин или сервис. Хороший INP — это когда весь сайт как фильм, снятый без склеек. Плавный, живой, без провалов.

У Google чёткий ориентир: до 200 мс — отлично. Всё, что больше — заставляет пользователя ждать. А значит — терять интерес.

FID ушёл в прошлое

Раньше хватало замерить реакцию на первый клик (это был FID). Но в 2024 году только первый клик — это не показатель. Сейчас важен весь сценарий взаимодействия. Разговариваем не о вспышке, а о целой истории. INP справляется с этим куда лучше.

CLS: когда прокрутка — как качка на корабле

Летишь по странице, и вдруг: хоп! Баннер влез посредине текста; кнопка — убежала на пиксель. Вы кликнули — а попали не туда. Неприятно, правда? Вот за это и отвечает CLS. Его значение должно быть ниже 0,1. В идеале — чтобы ничего не прыгало вообще.

Как снизить CLS? Фиксируйте размеры изображений прямо в верстке. Никогда не вставляйте рекламу без зарезервированного блока. И не бойтесь пустого места — оно лучше беспорядка.

LCP: первое впечатление — за полторы секунды

LCP — это насколько быстро на экране появляется главный кусок контента. Чаще всего — картинка или заголовок. Если он появляется медленно, пользователь уже делает вывод: «Сайт тормозит». И уходит.

Причины завышенного LCP — тяжёлые изображения, серверные задержки, лишние скрипты в . Вывод: самый важный контент должен грузиться первым — и быстро.

Как улучшить показатели?

Lazy-load: грузится по шагам — не всё сразу

Lazy-load — моя любимая фишка. Вместо того чтобы грузить весь сайт сразу, показываем сначала только то, что видно на экране. Пользователь скроллит — подтягивается остальное.

Реализуется это просто: loading="lazy" в HTML — и работает. Если хочется гибкости — подключаем JS-библиотеки. Особенно круто работает на карточках товаров, лентах новостей, галереях. Заметно снижает LCP.

AVIF: магия изображений без потерь

Перевела картинки в формат AVIF — сайт стал летать. AVIF — это как WebP на стероидах. Он весит в 2 раза меньше JPEG и при этом не теряет качество. Google его обожает.

Поддержка в браузерах уже почти полная. Но на всякий случай — ставим fallback: если AVIF недоступен, отдаём WebP или JPEG.

В генерации помогут Squoosh, Cloudinary, ImageMagick. Главное — встроить это в build-процесс, чтобы никаких ручных танцев.

Critical CSS: самое важное — сразу

Что пользователь видит сразу без скролла? Заголовок, кнопку, подзаголовок. Так вот: все стили для этой части страницы нужно вставлять прямо в HTML, а не тянуть с сервера. Это и называется Critical CSS.

Я использую PurgeCSS и Critical (by Addy Osmani). Они автоматически вычленяют нужные стили и вставляют в HTML ещё до загрузки страницы. В результате: сайт рисуется быстрее, человек не ждёт.

Практические шаги — что делать прямо сейчас

Зайдите на PageSpeed Insights и проверьте сайт.
Посмотрите, что тормозит: LCP, CLS, INP?
Подключите lazy-load на изображения и видео.
Скормите изображения в AVIF.
Внедрите Critical CSS — даже вручную, если нет CI.
Следите, как метрики улучшаются через Lighthouse, Web Vitals Extension.
Не пускайте это на самотёк: подключите SEO-специалистов, делайте recheck раз в месяц.

Кстати, многие российские команды уже добились +30% к скорости загрузки, просто внедрив lazy-load и AVIF на сайте. Всё по шагам — без революций.

Итого — зачем и кому оно нужно?

Вы замечали, как ждём загрузку медленного сайта с тем же раздражением, как воду в чайнике в 7 утра? Нет времени на «потом».

Оптимизация Core Web Vitals — это не только про цифры и отчёты. Это про то, будет ли ваш сайт конкурентным завтра. Если вы бизнес, это решает, закроет ли клиент корзину — или бросит и уйдёт.

Выбор — за вами. Но я бы начала уже сегодня.

Хотите быть в курсе последних новостей о бизнесе? Подпишитесь на наш Telegram-канал: сюда
Календарь мероприятий: здесь