Core Web Vitals: как улучшить LCP, INP, CLS для роста позиций

Если вы когда-либо открывали сайт, который медленно грузился, кнопки на котором не реагировали сразу или текст внезапно «прыгал» при загрузке — вы столкнулись с проблемами, которые Google и Яндекс давно считают критически важными для пользовательского опыта. Эти проблемы не просто раздражают посетителей — они напрямую влияют на позиции сайта в поисковой выдаче. Именно поэтому такие метрики, как LCP, INP и CLS, стали не просто техническими показателями, а ключевыми факторами ранжирования. В этой статье мы подробно разберём, что такое Core Web Vitals, почему они так важны, как именно улучшить каждую из трёх метрик и что делать, если ваш сайт пока не справляется с этими требованиями.

Что такое Core Web Vitals и зачем они нужны

Core Web Vitals — это набор трёх объективных, измеримых показателей, которые оценивают качество пользовательского опыта на веб-сайте. Они были введены Google в 2020 году как часть более широкой инициативы по улучшению веб-эргономики. Позже Яндекс также начал учитывать эти метрики в своих алгоритмах ранжирования, хотя и не афиширует это так открыто. Вместо того чтобы судить о качестве сайта по количеству ключевых слов или обратным ссылкам, поисковые системы теперь смотрят на то, как быстро и комфортно пользователь взаимодействует с вашей страницей.

Три метрики Core Web Vitals — это:

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

Эти метрики не являются «дополнительными бонусами» — они теперь входят в основные сигналы ранжирования. Сайты, которые показывают хорошие результаты по Core Web Vitals, получают преимущество в поисковой выдаче. Почему? Потому что поисковые системы стремятся направлять пользователей на сайты, где им будет приятно и удобно. Никто не любит ждать, когда страница «застынет», или переживать, что кнопка «Купить» внезапно переместится под курсор.

Важно понимать: Core Web Vitals — это не про то, насколько красиво выглядит ваш сайт. Это про функциональность. Даже самый красивый дизайн, если он медленно грузится или постоянно «прыгает», будет терять пользователей. И, как следствие, — позиции.

Почему Core Web Vitals стали важнее, чем раньше

Раньше поисковые системы оценивали сайты в основном по внешним факторам: количество ссылок, частота обновлений, релевантность заголовков. Сегодня всё изменилось. Пользователи стали более требовательными. Среднее время ожидания загрузки страницы сократилось до 2–3 секунд. Если сайт не загружается быстрее — половина посетителей уходит.

Google и Яндекс получают миллиарды сигналов от реальных пользователей: кто закрывает страницу, сколько времени проводит на ней, как часто возвращается. Эти данные анализируются алгоритмами, и если сайт вызывает негативные эмоции — он теряет в позициях. Core Web Vitals позволяют автоматизировать эту оценку.

Обратите внимание: Core Web Vitals — это метрики, основанные на реальном опыте пользователей (Real User Monitoring). То есть, они не просто симулируют загрузку страницы в лабораторных условиях, а анализируют данные с миллионов реальных устройств: медленных телефонов, старых ноутбуков, нестабильного интернета. Это делает их гораздо более точными и релевантными, чем старые метрики вроде «время до первого байта».

Как Core Web Vitals влияют на позиции

Технически Core Web Vitals — это часть алгоритма Page Experience, который Google объявил «сигналом ранжирования» в 2021 году. Это означает, что если два сайта имеют одинаковую релевантность по ключевому запросу, то тот, у кого лучше показатели Core Web Vitals, получит более высокое место в поисковой выдаче.

Но влияние не ограничивается только алгоритмами. Сайты с плохими показателями теряют конверсии:

• Пользователи закрывают страницу, если LCP превышает 4 секунды.
• Если INP выше 200 мс — пользователи чувствуют, что сайт «тормозит» и перестают взаимодействовать.
• CLS больше 0.1 вызывает дезориентацию: люди кликают не туда, случайно закрывают вкладки, теряют доверие к бренду.

Яндекс также подтверждает, что учитывает «техническое качество» сайта при ранжировании. Хотя явно не называет Core Web Vitals, в своих рекомендациях он говорит о «быстроте загрузки», «стабильности макета» и «реакции на действия». Это прямое указание на те же метрики.

Вывод прост: если вы хотите расти в поисковой выдаче — улучшать Core Web Vitals — не опция. Это необходимость.

Как улучшить LCP: делаем загрузку контента мгновенной

LCP — это время, за которое самый крупный визуальный элемент на странице (обычно это заголовок, баннер или изображение) становится полностью видимым для пользователя. По стандартам Google, хороший LCP — это меньше 2,5 секунд. Более 4 секунд считается «плохим».

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

Основные причины медленного LCP

• Неоптимизированные изображения и видео — самые частые виновники.
• Блокировка рендеринга JavaScript и CSS.
• Медленный сервер или плохая инфраструктура хостинга.
• Отсутствие кеширования и CDN.
• Слишком большой HTML-код с тяжелыми шрифтами и ненужными скриптами.

Пошаговая оптимизация LCP: что делать прямо сейчас

Вот практический план, который можно применить к любому сайту — от WordPress до кастомного решения.

1. Оптимизируйте изображения

Изображения составляют до 50% веса страницы. Никогда не загружайте фото в исходном размере 5 МБ — это катастрофа для LCP.

• Используйте современные форматы: WebP, AVIF. Они в 2–4 раза меньше JPEG/PNG при той же картинке.
• Сжимайте изображения без потерь: инструменты вроде Squoosh, TinyPNG или плагины для WordPress (Imagify, ShortPixel).
• Применяйте responsive images: используйте атрибут srcset, чтобы браузер загружал нужный размер под разрешение экрана.
• Загружайте изображения «лениво» (lazy loading) только тогда, когда они появляются в зоне видимости — но не для LCP-элементов! Главное изображение должно загружаться с приоритетом.

2. Ускорьте загрузку критических ресурсов

Если CSS или JS блокируют отрисовку страницы — LCP будет зависеть не от скорости изображения, а от времени загрузки этих файлов.

• Инлайните критический CSS — вставьте минимальный стиль для первого экрана прямо в <head>.
• Отложите загрузку некритичного JavaScript: используйте атрибут defer или async.
• Удалите ненужные плагины, особенно в WordPress — многие из них добавляют тяжелые библиотеки, которые не используются на конкретной странице.

3. Настройте кеширование и CDN

Если ваш сайт расположен в России, а пользователи — в Японии — разница в LCP может быть 5–8 секунд. Решение: CDN (Content Delivery Network).

• Используйте CDN для статических файлов: изображения, CSS, JS.
• Включите кеширование на сервере: HTTP-кэш, browser cache с заголовками Cache-Control.
• Для WordPress установите плагины вроде WP Rocket или LiteSpeed Cache — они автоматически настраивают кеширование, сжатие и CDN.

4. Улучшите серверную производительность

Если ваш хостинг отвечает за 1,5 секунды — никакие оптимизации не помогут. Проверьте время первого байта (TTFB). Оно должно быть меньше 600 мс.

• Перейдите на более быстрый хостинг: облака (AWS, Google Cloud), VPS или специализированный хостинг для WordPress.
• Используйте PHP 8.1+ и кеширование на уровне сервера (OPcache).
• Если используете WordPress — отключите ненужные виджеты, плагины для комментариев, уведомлений и аналитики.

5. Оптимизируйте шрифты

Внешние шрифты (Google Fonts, Adobe Fonts) часто блокируют рендеринг. Решения:

• Загружайте шрифты с атрибутом display: swap, чтобы текст отображался сразу, даже если шрифт ещё не загрузился.
• Подгружайте только нужные веса и стили (не все 12 вариантов одного шрифта).
• Скачивайте и размещайте шрифты локально — это убирает запросы к внешним серверам.

Важно: не забывайте про LCP-элемент. Если вы используете слайдер или баннер — убедитесь, что он загружается с высоким приоритетом. В HTML добавьте loading="eager" и используйте preload для главного изображения:

«`html

«`

Такие меры могут сократить LCP на 1–3 секунды.

Как улучшить INP: делаем сайт отзывчивым

Если LCP — это «первая впечатление», то INP (Interaction to Next Paint) — это «ощущение от взаимодействия». Эта метрика измеряет время между действием пользователя (клик, ввод текста) и тем, когда браузер визуально отреагирует на него. Идеальный INP — меньше 100 мс. Хороший — до 200 мс. Плохой — выше 300 мс.

Почему INP так важен? Потому что современные пользователи ожидают мгновенной обратной связи. Если вы кликнули на кнопку, а через полсекунды ничего не произошло — вы думаете: «Сайт сломался».

Почему INP становится проблемой

Основные причины высокого INP:

• Длинные JavaScript-задачи — скрипты, которые блокируют основной поток браузера.
• Слишком много событий, привязанных к DOM-элементам (особенно в старых фреймворках).
• Неоптимизированные анимации и перерисовки.
• Плагины, которые выполняют тяжелые операции при каждом клике.

Как улучшить INP: практические шаги

1. Разбирайтесь с JavaScript-блокировками

Браузер работает в однопоточной модели. Если один скрипт занимает 500 мс — все остальные действия (ввод, клики) ждут.

• Используйте веб-воркеры для тяжелых вычислений (например, фильтрация товаров).
• Разбивайте большие функции на части с помощью setTimeout() или requestIdleCallback().
• Отложите выполнение скриптов, не связанных с первым экраном — например, аналитика или чат-боты.

2. Уберите лишние обработчики событий

Многие скрипты вешают обработчики на каждый элемент страницы — кнопки, ссылки, изображения. Это создаёт огромную нагрузку.

• Используйте делегирование событий: вешайте обработчик на родительский элемент, а не на каждый дочерний.
• Удалите дублирующиеся или ненужные обработчики (например, несколько плагинов для кнопок «Купить»).
• Проверяйте, какие события висят на странице — используйте Chrome DevTools → Performance → Event Listener Breakpoints.

3. Оптимизируйте анимации и перерисовки

Анимация — это критически важный элемент UX, но неправильно написанные анимации могут разрушить INP.

• Используйте CSS-анимации вместо JavaScript — они оптимизируются браузером.
• Применяйте transform и opacity: они не вызывают перерисовку макета.
• Избегайте width, height, top, left в анимациях — они триггерят перерисовку.

4. Уменьшайте влияние сторонних скриптов

Google Analytics, Yandex.Metrica, рекламные теги, виджеты чатов — всё это добавляет миллисекунды к INP. Иногда — сотни.

• Загружайте сторонние скрипты асинхронно — с async или через теги вроде data-loader="lazy".
• Отложите инициализацию чат-ботов до первого клика или скролла.
• Используйте контейнеры для рекламных скриптов (например, Google Tag Manager), чтобы они не блокировали основной поток.

5. Тестируйте INP на реальных устройствах

Важно: не проверяйте INP только на мощных компьютерах. Протестируйте его на телефоне с 2 ГБ ОЗУ и медленным интернетом. Именно так работают большинство пользователей.

Используйте Chrome DevTools → Lighthouse → отмечайте «Simulated throttling» и запускайте тест на мобильном устройстве. Если INP выше 300 мс — пора искать узкие места.

Кейс: сайт электронной коммерции улучшил INP с 600 мс до 120 мс, удалив один плагин «аналитика с таймером», который каждые 2 секунды запрашивал данные с сервера. Конверсия выросла на 18% за месяц.

Как улучшить CLS: останавливаем «прыгающий» макет

CLS (Cumulative Layout Shift) — это метрика, которая измеряет, насколько нестабильна страница при загрузке. Если текст или кнопка внезапно «прыгают» вниз, когда загружается реклама или изображение — вы получаете высокий CLS. Хороший показатель — меньше 0,1. Плохой — выше 0,25.

Почему CLS важен? Потому что он вызывает физический дискомфорт. Вы кликаете на кнопку — она уходит под курсор. Вы читаете текст — он сдвигается, и вы теряете место. Это вызывает раздражение, а затем — уход с сайта.

Основные причины высокого CLS

• Изображения без заданных размеров — браузер не знает, сколько места им нужно, и при загрузке «подталкивает» контент вниз.
• Рекламные баннеры, которые загружаются после основного контента.
• Шрифты, подгружаемые позже — текст сначала отображается стандартным шрифтом, потом «перескакивает» на кастомный.
• Динамический контент: модальные окна, уведомления, поп-апы, вставляемые без зарезервированного места.

Как улучшить CLS: практические меры

1. Указывайте размеры изображений и видео

Это самое простое и эффективное решение. Если вы не задаёте width и height, браузер не знает, какое пространство зарезервировать — и контент «прыгает».

«`html

«`

Также используйте CSS для сохранения пропорций:

«`css
img {
width: 100%;
height: auto;
}
«`

Это гарантирует, что изображение займёт нужное место даже до загрузки.

2. Зарезервируйте место для рекламы и виджетов

Если вы используете рекламные блоки — никогда не вставляйте их без предварительного резервирования места.

• Создайте пустой <div> с фиксированной высотой и фоном, соответствующим размеру баннера.
• Загружайте рекламный скрипт асинхронно, но не меняйте размеры блока после загрузки.
• Используйте атрибут sizes для рекламных блоков в Google AdSense.

3. Управляйте загрузкой шрифтов

Плавный переход между системным и кастомным шрифтом — ключевой момент для CLS.

• Добавьте font-display: swap; в @font-face.
• Загружайте шрифты с помощью <link rel="preload">.
• Используйте системные шрифты как fallback: font-family: 'CustomFont', -apple-system, BlinkMacSystemFont, sans-serif;

4. Избегайте вставки контента без резервирования места

Например, если вы добавляете модальное окно или уведомление внизу страницы — заранее выделите под него место. Иначе весь контент «упадёт» вниз.

Пример: вместо того чтобы добавлять уведомление «Вы получили скидку!» в конец DOM, зарезервируйте блок высотой 60 пикселей внизу страницы, и просто показывайте/скрывайте его.

5. Проверяйте CLS в реальном времени

Используйте Chrome DevTools → Lighthouse → «Performance» → включите «Simulated throttling». Запустите тест и посмотрите на моменты, когда происходит сдвиг. DevTools покажет, какие элементы сместились и почему.

Также можно использовать Web Vitals Chrome Extension — он показывает CLS в реальном времени при навигации по сайту.

Как проверить Core Web Vitals и где смотреть результаты

Проверять Core Web Vitals нужно регулярно — не раз в год, а минимум раз в квартал. Особенно если вы обновляете дизайн, добавляете рекламу или меняете хостинг.

Инструменты для проверки

1. Lighthouse — встроен в Chrome DevTools (F12 → Lighthouse). Бесплатно, подробно. Дает оценку по всем трём метрикам.
2. PageSpeed Insights — от Google. Показывает данные как с реальных пользователей (CrUX), так и симуляцию. Удобно для отчётов.
3. Web.dev Measure — современный интерфейс с рекомендациями. Особенно полезен для новичков.
4. GTmetrix — даёт детальный разбор загрузки, включая LCP и CLS.
5. Яндекс.Вебмастер — раздел «Производительность» показывает метрики Core Web Vitals для вашего сайта в Яндексе.

Что смотреть в отчётах

Важно: не ориентируйтесь только на лабораторные данные. В PageSpeed Insights и Web.dev есть раздел «Field Data» — это реальные показатели пользователей. Именно они влияют на ранжирование.

Как часто проверять

• После каждого крупного обновления дизайна или добавления рекламы — обязательно проверяйте.
• Если сайт на WordPress — делайте это после обновления плагинов.
• Месячный аудит — минимум. Лучше — раз в два месяца.

Core Web Vitals для WordPress: специфические решения

WordPress — самая популярная CMS в мире. Но из-за своей гибкости он часто становится «тяжелым». Многие темы и плагины добавляют десятки скриптов, неоптимизированные изображения и блокирующие CSS.

Рекомендации для WordPress-сайтов

• Используйте легковесные темы: Astra, GeneratePress, OceanWP — они не нагружают страницу лишним кодом.
• Удалите ненужные плагины: каждый активный плагин = потенциальная нагрузка. Особенно опасны: SEO-плагины с кучей функций, слайдеры, чаты.
• Установите кеширующий плагин: WP Rocket, LiteSpeed Cache или W3 Total Cache — они автоматически сжимают CSS/JS, включают кеширование и CDN.
• Оптимизируйте изображения: плагины Imagify, ShortPixel или EWWW Image Optimizer — сжимают без потери качества.
• Отключите редактор блоков для статических страниц: если вы не используете Gutenberg — переключитесь на классический редактор. Он быстрее.
• Используйте кеширование на уровне хостинга: если ваш хостер поддерживает LiteSpeed или Redis — включите их.
• Не используйте кастомные шрифты без font-display: swap.
• Отложите загрузку YouTube-видео: используйте плагины вроде Lazy Load for Videos — они подгружают видео только при клике.

Кейс: сайт новостного портала с 100 000 страниц в месяц улучшил LCP с 5,2 до 1,8 секунды за неделю. Как? Удалил 3 тяжелых плагина, включил кеширование и заменил 12 изображений на WebP. CLS снизился с 0,38 до 0,07. Позиции по ключевым запросам выросли на 23%.

Часто задаваемые вопросы

Как проверить Core Web Vitals в Яндексе?

Яндекс не имеет отдельного инструмента, как Google PageSpeed Insights. Но в Яндекс.Вебмастер есть раздел «Производительность», где отображаются метрики Core Web Vitals для вашего сайта. Просто добавьте сайт в Вебмастер и подождите 2–4 недели — там появятся данные на основе реальных пользователей.

Стоит ли использовать CDN для улучшения Core Web Vitals?

Да, особенно если ваши пользователи находятся далеко от сервера. CDN не только ускоряет загрузку, но и снижает TTFB — критически важный фактор для LCP. Даже бесплатные CDN, такие как Cloudflare, дают значительный прирост.

Как улучшить Core Web Vitals без программирования?

Можно. Если вы используете WordPress — установите WP Rocket, Imagify и уберите ненужные плагины. Это решит 80% проблем. Также используйте сервисы вроде Cloudflare для кэширования и сжатия. Не нужно писать код — достаточно настроить плагины.

Почему Core Web Vitals ухудшились после обновления сайта?

Скорее всего, вы добавили тяжелый плагин, слайдер, рекламный код или неоптимизированные изображения. Проверьте: какие изменения были сделаны за последние 2 недели? Откатите их по одному — и вы найдёте виновника.

Как Core Web Vitals влияют на мобильный трафик?

Очень сильно. На мобильных устройствах интернет медленнее, процессор слабее, а экраны меньше. Поэтому LCP и INP критичны. Мобильные пользователи быстрее уходят с медленных сайтов — и Google это знает. Мобильная версия сайта оценивается отдельно — не пренебрегайте ею.

Можно ли улучшить Core Web Vitals за один день?

Да, если у вас простой сайт. Оптимизируйте изображения, включите кеширование и удалите 2–3 тяжелых плагина — результат будет виден сразу. Но для сложных сайтов (например, с динамическим контентом) это может занять несколько недель.

Заключение: Core Web Vitals — это не тренд, а основа

Core Web Vitals — это не просто модный термин, который пришёл из Google. Это фундаментальное изменение в том, как мы оцениваем качество веб-сайтов. Раньше важны были ключевые слова и ссылки — теперь важно, как пользователь чувствует себя на вашей странице. Быстро ли загружается? Отзывчиво ли реагирует на клики? Стабилен ли макет?

Если вы игнорируете LCP, INP и CLS — вы не просто теряете техническое преимущество. Вы теряете доверие пользователей. А без доверия — нет конверсий, нет роста, нет позиций в поиске.

Ваш сайт — это не просто набор HTML-страниц. Это опыт. И этот опыт должен быть гладким, быстрым и предсказуемым.

Не ждите, пока Google «накажет» вас за плохие метрики. Начните прямо сейчас:

• Проверьте текущие показатели через PageSpeed Insights.
• Оптимизируйте изображения — это самая простая и мощная мера.
• Уберите ненужные плагины, особенно в WordPress.
• Настройте кеширование и CDN — даже бесплатные решения помогут.
• Зарезервируйте место под рекламу и шрифты.
• Протестируйте INP на телефоне — это правда, как выглядит ваш сайт для большинства пользователей.

Core Web Vitals — это инвестиция в будущее вашего сайта. И чем раньше вы начнёте, тем быстрее увидите результат: выше позиции, больше трафика, меньше отказов. Потому что в эпоху мгновенных ожиданий — скорость не просто важна. Она становится основой успеха.