В 2021 году Google официально включил скорость и удобство работы сайта в факторы ранжирования. С тех пор три технических показателя — LCP, INP и CLS — напрямую влияют на позиции страниц в поисковой выдаче. Сайты с хорошими значениями Core Web Vitals получают преимущество перед конкурентами при прочих равных условиях.
Но дело не только в SEO. Медленно загружающиеся страницы, запаздывающие кнопки и прыгающий контент раздражают пользователей и увеличивают показатель отказов. По данным Google, 53% мобильных пользователей покидают страницу, если она загружается дольше 3 секунд. Core Web Vitals — это инструмент, который переводит пользовательский опыт в измеримые цифры.
В этой статье мы разберём, что такое Core Web Vitals, что означает каждый из трёх показателей, как их проверить, какие значения считаются хорошими и что конкретно сделать, чтобы улучшить каждый из них.
Что такое Core Web Vitals
Core Web Vitals — это набор метрик, разработанных Google для оценки реального пользовательского опыта на сайте. Они входят в более широкую концепцию Page Experience (сигналы качества страницы) и измеряют три ключевых аспекта взаимодействия пользователя с сайтом:
- Скорость загрузки основного контента — как быстро пользователь видит главный элемент страницы.
- Отзывчивость интерфейса — насколько быстро страница реагирует на действия пользователя.
- Визуальная стабильность — не прыгают ли элементы страницы во время загрузки.
Важно понимать: Core Web Vitals измеряются на основе реальных данных пользователей (field data), собранных через Chrome User Experience Report (CrUX). Это не лабораторные тесты — это то, что реально испытывают посетители вашего сайта.
Три основных показателя Core Web Vitals
LCP — Largest Contentful Paint (скорость загрузки)
LCP измеряет время от начала загрузки страницы до момента, когда в области просмотра отображается самый крупный элемент контента — как правило, это главное изображение, баннер или крупный блок текста.
Именно LCP пользователь воспринимает как «страница загрузилась». Если крупное изображение в шапке появляется через 5 секунд, пользователь будет считать сайт медленным, даже если текст загрузился быстро.
- Хорошо: до 2,5 секунды
- Требует улучшения: 2,5 — 4,0 секунды
- Плохо: более 4,0 секунды
INP — Interaction to Next Paint (отзывчивость)
INP (Interaction to Next Paint) — метрика, которая пришла на смену FID в марте 2024 года. Она измеряет задержку между любым взаимодействием пользователя с страницей (клик, нажатие клавиши, тап) и визуальным ответом интерфейса.
Если пользователь нажал на кнопку «Добавить в корзину», а страница «зависла» на полсекунды перед тем, как что-то произошло — это плохой INP. Медленный отклик интерфейса разрушает доверие к сайту.
- Хорошо: до 200 миллисекунд
- Требует улучшения: 200 — 500 миллисекунд
- Плохо: более 500 миллисекунд
CLS — Cumulative Layout Shift (визуальная стабильность)
CLS измеряет, насколько сильно элементы страницы смещаются во время загрузки. Классический пример плохого CLS: пользователь тянется нажать кнопку, но в этот момент загружается реклама и кнопка уезжает вниз — в итоге пользователь кликает не туда.
CLS выражается не в секундах, а в безразмерном числе — это оценка совокупного смещения всех элементов на странице за время её жизни.
- Хорошо: до 0,1
- Требует улучшения: 0,1 — 0,25
- Плохо: более 0,25
Пороговые значения Core Web Vitals: сводная таблица
| Метрика | Что измеряет | Хорошо | Требует улучшения | Плохо |
|---|---|---|---|---|
| LCP | Скорость загрузки главного контента | до 2,5 с | 2,5 — 4,0 с | более 4,0 с |
| INP | Отзывчивость интерфейса | до 200 мс | 200 — 500 мс | более 500 мс |
| CLS | Визуальная стабильность | до 0,1 | 0,1 — 0,25 | более 0,25 |
Как Core Web Vitals влияют на ранжирование в Google
С мая 2021 года Core Web Vitals официально входят в алгоритм ранжирования Google как часть сигнала Page Experience. Это означает, что при прочих равных условиях страница с хорошими показателями Core Web Vitals будет занимать более высокую позицию, чем страница с плохими показателями.
Однако важно понимать контекст: Core Web Vitals — не замена качественному контенту. Google прямо указывает, что страница с релевантным и полезным контентом, но плохими техническими показателями, всё равно может ранжироваться выше, чем технически идеальная страница с бедным контентом. Core Web Vitals работают как тай-брейкер — инструмент разрешения ничьей между конкурирующими страницами.
Тем не менее в конкурентных нишах, где качество контента у топовых страниц примерно одинаковое, Core Web Vitals становятся решающим фактором. Кроме того, плохие технические показатели косвенно влияют на ранжирование через поведенческие факторы: высокий показатель отказов, короткое время на сайте и низкий CTR повторных посещений.
Как проверить Core Web Vitals сайта
Существует несколько инструментов для проверки Core Web Vitals — как на основе реальных данных пользователей, так и в лабораторных условиях.
| Инструмент | Тип данных | Что показывает |
|---|---|---|
| Google Search Console | Реальные (field data) | Отчёт Core Web Vitals по всем страницам сайта с разбивкой на «хорошие», «требующие улучшения» и «плохие» URL |
| PageSpeed Insights | Реальные + лабораторные | Показатели конкретной страницы, рекомендации по улучшению с оценкой потенциального эффекта |
| Chrome DevTools (Lighthouse) | Лабораторные | Детальный аудит производительности, доступности и SEO прямо в браузере |
| web.dev/measure | Лабораторные | Быстрая проверка любой страницы с подробными рекомендациями от Google |
| Chrome User Experience Report (CrUX) | Реальные (field data) | Агрегированные данные реальных пользователей Chrome для любого домена |
Главный приоритет — данные из Google Search Console. Именно они отражают то, что реально видит Google при ранжировании вашего сайта. Лабораторные инструменты полезны для диагностики и поиска проблем, но не всегда совпадают с реальными показателями.
Как улучшить LCP
LCP чаще всего страдает из-за тяжёлых изображений, медленного сервера и блокирующих ресурсов. Вот конкретные способы улучшения.
- Оптимизируйте изображения. Используйте современные форматы WebP или AVIF вместо JPEG и PNG. Они весят на 25–50% меньше при том же визуальном качестве. Сжимайте изображения без потери качества через Squoosh или TinyPNG.
- Используйте атрибут loading=»eager» для главного изображения. LCP-элемент (как правило, баннер или главное фото) должен загружаться в приоритете. Никогда не ставьте на него lazy loading.
- Добавьте тег <link rel=»preload»> для LCP-изображения. Это указывает браузеру загрузить ключевое изображение как можно раньше, ещё до обработки CSS и JavaScript.
- Улучшите время ответа сервера (TTFB). Если сервер долго отвечает — всё остальное не имеет значения. Используйте CDN, настройте кэширование, перейдите на более быстрый хостинг.
- Устраните блокирующие ресурсы. CSS и JavaScript, загружаемые в <head> без атрибутов async или defer, блокируют рендеринг страницы. Перенесите некритичные скрипты в конец документа.
- Настройте кэширование статических ресурсов. Изображения, CSS и JS-файлы должны кэшироваться браузером на длительный срок. Настройте заголовки Cache-Control на сервере.
Как улучшить INP
Плохой INP почти всегда связан с тяжёлым JavaScript, который блокирует главный поток браузера и не даёт ему вовремя обработать действие пользователя.
- Разбивайте длинные задачи JavaScript. Задачи длиннее 50 мс блокируют главный поток. Используйте setTimeout или requestIdleCallback, чтобы разбить тяжёлые операции на более мелкие части.
- Удалите неиспользуемый JavaScript. Проверьте в Chrome DevTools раздел Coverage — он покажет, какой процент JS-кода реально используется. Удалите лишние библиотеки и плагины.
- Откладывайте загрузку сторонних скриптов. Скрипты аналитики, чатов, рекламных систем и виджетов часто являются главной причиной плохого INP. Загружайте их с атрибутом defer или после взаимодействия пользователя.
- Минимизируйте работу в обработчиках событий. Обработчики кликов и нажатий должны быть лёгкими. Тяжёлые операции (запросы к серверу, сложные вычисления) выносите в Web Workers.
- Используйте виртуализацию для длинных списков. Рендеринг сотен или тысяч DOM-элементов одновременно перегружает браузер. Библиотеки виртуализации (например, react-window) рендерят только видимые элементы.
Как улучшить CLS
CLS ухудшается, когда браузер не знает заранее размер элементов и вынужден перестраивать макет страницы по мере загрузки ресурсов.
- Всегда задавайте размеры для изображений и видео. Добавьте атрибуты width и height к каждому тегу <img> и <video>. Это позволяет браузеру заранее зарезервировать место под медиафайл ещё до его загрузки.
- Резервируйте место под рекламные блоки. Реклама, загружающаяся после контента, — одна из главных причин CLS. Задавайте фиксированные размеры для рекламных контейнеров через CSS.
- Избегайте вставки контента над существующими элементами. Никогда не добавляйте динамически новые блоки выше уже отображённого контента, если это не вызвано действием пользователя.
- Предзагружайте веб-шрифты. Шрифты, загружающиеся после рендеринга текста, вызывают FOUT (Flash of Unstyled Text) и смещение макета. Используйте font-display: swap и preload для критичных шрифтов.
- Будьте осторожны с анимациями. Анимации, изменяющие свойства top, left, width, height, вызывают layout shift. Используйте transform и opacity — они не влияют на CLS.
Частые ошибки, которые ухудшают Core Web Vitals
| Ошибка | Какую метрику ухудшает | Как исправить |
|---|---|---|
| Lazy loading на LCP-изображении | LCP | Убрать loading=»lazy» с главного изображения страницы, добавить rel=»preload» |
| Изображения без атрибутов width и height | CLS | Добавить явные размеры к каждому тегу <img> |
| Тяжёлые сторонние скрипты без defer | LCP, INP | Добавить атрибут defer или async, откладывать загрузку до взаимодействия |
| Медленный хостинг без CDN | LCP | Подключить CDN (Cloudflare, BunnyCDN), настроить кэширование на сервере |
| Шрифты без preload и font-display | CLS, LCP | Добавить <link rel=»preload»> для шрифтов, использовать font-display: swap |
| Рекламные блоки без резервирования места | CLS | Задать фиксированную высоту контейнера для рекламы через CSS |
| Неоптимизированные изображения в PNG/JPEG | LCP | Конвертировать в WebP или AVIF, сжать через TinyPNG или Squoosh |
| Динамическая вставка контента над страницей | CLS | Вставлять новые элементы только ниже видимого контента или по действию пользователя |
Заключение
Core Web Vitals — это не абстрактные технические метрики, а измеримое отражение того, как пользователи воспринимают ваш сайт. LCP показывает, насколько быстро загружается главный контент. INP — насколько отзывчив интерфейс. CLS — насколько стабильно ведёт себя страница во время загрузки.
Улучшение Core Web Vitals даёт двойной эффект: с одной стороны, это прямой сигнал ранжирования в Google, с другой — реальное улучшение пользовательского опыта, которое снижает показатель отказов и увеличивает конверсию. По данным различных исследований, улучшение LCP на 0,1 секунды повышает конверсию в среднем на 8%.
Начните с аудита сайта в Google Search Console — раздел Core Web Vitals покажет, какие страницы требуют внимания в первую очередь. Затем используйте PageSpeed Insights для диагностики конкретных проблем и следуйте рекомендациям из этой статьи. Даже несколько точечных улучшений — оптимизация изображений, откладывание сторонних скриптов, добавление размеров к картинкам — могут кардинально изменить показатели сайта.