Core Web Vitals — что это и как оптимизировать

Core Web Vitals (CWV) — это три ключевых метрики, которые Google использует для оценки качества пользовательского опыта на сайте. Если ваш сайт медленный, неудобный или «прыгает» при загрузке, это может негативно сказаться на позициях в поисковой выдаче. Метрики Core Web Vitals включают:

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

Раньше в SEO основное внимание уделялось ссылкам, ключевым словам и контенту. Однако со временем Google осознал, что если сайт неудобен для пользователей, они просто уходят. В 2020 году поисковик впервые представил инициативу Web Vitals, заявив, что будет регулярно обновлять три ключевых показателя эффективности. И действительно, за последние пять лет эти метрики обновлялись более 50 раз.

LCP (Largest Contentful Paint)

Метрика LCP показывает, как быстро загружается самый крупный элемент на странице (обычно это заголовок, большое изображение или видео).

Какие значения считаются хорошими?

• ≤ 2.5 сек — отлично.
• 2.5 – 4 сек — средне, нужно улучшать.
• > 4 сек — плохо, нужно срочно оптимизировать.

Недавно Google обновил расчет метрики LCP, чтобы сделать ее более точной и учитывать реальные сценарии загрузки контента. Теперь браузер загружает изображения в первую очередь, перед рендерингом страницы. Для анимированных GIF и PNG фиксируется момент появления первого кадра, а не полная загрузка. Также изменился приоритет: первые пять крупных изображений (более 10 000 пикселей) теперь загружаются быстрее, а малодетализированные изображения (например, простые градиенты или фоны) исключаются из расчета, что делает метрику более точной.

Что замедляет скорость загрузки?

• Большие изображения без оптимизации.
• Медленный хостинг или сервер.
• Громоздкий JavaScript.
• Отсутствие кеширования.

Оптимизация LCP может быть сложной задачей, так как она зависит от множества факторов.

Как улучшить LCP

Используйте fetchpriority

Браузер загружает ресурсы в порядке приоритета. Чтобы ускорить загрузку ключевого LCP-элемента (например, изображения), можно задать ему fetchpriority=»high». Это увеличит его приоритет в очереди загрузки. Однако, этот метод работает, только если LCP-изображение встроено в HTML и не загружается динамически через JavaScript.

Не используйте ленивую загрузку для LCP-элементов

Ленивая загрузка полезна для производительности, но не для LCP-изображений. Если основное изображение страницы загружается только после прокрутки, это ухудшает LCP. Вместо этого используйте <link rel=»preload»> и задайте fetchpriority=»high».

Избегайте избыточных подключений к серверу

Если изображение загружается с другого домена, браузер тратит время на DNS-запросы, TCP- и TLS-рукопожатия. Это увеличивает задержку. Чтобы этого избежать:

• Загружайте критически важные ресурсы с того же домена.
• Храните сторонние ресурсы на своем сервере.
• Используйте HTTP/2 для мультиплексирования запросов.
• Сократите внешние запросы и используйте кеширование DNS.

Сокращайте цепочки запросов

Когда браузер загружает страницу, он запрашивает различные ресурсы (CSS, JavaScript, изображения, шрифты и т. д.). Иногда эти ресурсы зависят друг от друга и загружаются последовательно. Например: Браузер загружает HTML → Обнаруживает CSS-файл и загружает его → В CSS есть ссылка на шрифты → Шрифты загружаются → Только после этого загружается изображение LCP. Каждое следующее действие ждет окончания предыдущего. Это называется длинной цепочкой запросов, которая замедляет загрузку страницы и ухудшает показатель LCP. Что делать:

• Вставляйте критические стили (те, которые нужны для начальной загрузки страницы) прямо в HTML.
• Используйте <link rel=»preload»> для приоритетной загрузки важных ресурсов (шрифтов, изображений, стилей).
• Минимизируйте и объединяйте файлы CSS/JavaScript.
• Оптимизируйте сторонние скрипты (аналитику, виджеты, рекламу), загружая их асинхронно или отложенно.

Используйте подсказки браузеру

103 Early Hints — это HTTP-статус-код, который позволяет серверу раньше времени сообщить браузеру, какие критически важные ресурсы нужно загрузить. Обычно браузер ждет окончательного ответа сервера (200 OK), прежде чем начать загрузку ресурсов. Однако, если сервер сначала отправляет 103 Early Hints, браузер может заранее начать загружать важные ресурсы, пока сервер еще формирует основной ответ.

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

Используйте современные форматы изображений (WebP, AVIF вместо PNG/JPG) — они легче, но сохраняют качество. С осторожностью используйте прогрессивные JPEG, которые сначала отображают размытое изображение и постепенно увеличивают его четкость. Это создает иллюзию скорости, но замедляет LCP, так как браузер засчитывает LCP только после полной загрузки изображения. В критических местах лучше использовать обычные JPEG/WebP.

Используйте кеширование и CDN

URL-параметры (например, метки ?utm_source=google&utm_campaign=sale) используются для отслеживания трафика, но они могут негативно влиять на скорость загрузки страницы из-за проблем с кешированием. Представьте, что у вас есть одна и та же страница, с параметрами и без:

https://example.com/product
https://example.com/product?utm_source=google&utm_campaign=sale

С точки зрения пользователя она одна и та же, но сервер (или CDN) может рассматривать эти URL как разные страницы, даже если контент не меняется. Что делать?

• Настройте кеширование на сервере, чтобы он игнорировал параметры запроса.
• Используйте CDN. Большинство CDN позволяют игнорировать UTM-метки при кешировании, чтобы хранилась только одна версию страницы.
• Используйте серверные редиректы. Можно настроить сервер так, чтобы он перенаправлял пользователей на основной URL без параметров, сохраняя параметры для аналитики.

Используйте Speculation Rules API

Это новый механизм в браузерах, разработанный командой Chrome, который ускоряет переходы между страницами за счет предзагрузки (prefetch) или предварительного рендеринга (prerender). Браузер заранее загружает следующую страницу еще до того, как пользователь кликнет по ссылке. Делается это двумя способами через JSON-правила, встроенные в <script>:

• Prefetch – загружает ресурсы страницы (HTML, CSS, JS), но не выполняет их до перехода. Помогает ускорить загрузку, но не рендерит контент заранее.
• Prerender – полностью загружает и рендерит страницу в фоновом режиме, чтобы она отобразилась мгновенно при клике.

Пример использования:

<script type="speculationrules">
{
  "prerender": [
    { "source": "document", "urls": ["https://example.com/next-page"] }
  ]
}
</script>

Данный код prerender полностью загружает и рендерит страницу заранее. Важно: предзагрузка не подходит для страниц с динамическим контентом или авторизацией. Например, если prerender загрузит личный кабинет пользователя, он может отображаться не тому человеку, который откроет страницу.

INP (Interaction to Next Paint)

Метрика INP измеряет, насколько быстро сайт реагирует на клик, нажатие или ввод текста пользователем. Например, если он нажимает кнопку «Купить» или «Добавить в корзину».

Какие значения считаются хорошими?

• ≤ 200 мс — отлично.
• 200 – 500 мс — средне.
• > 500 мс — плохо.

В отличие от показателя FID (First Input Delay), который применялся до 2024 года и учитывал задержку только при первом взаимодействии пользователя с сайтом, новый показатель INP оценивает задержки во всех взаимодействиях на протяжении всей сессии. Также изменился подход к обработке событий: теперь INP учитывает задержки при нажатиях клавиш, а также корректно фиксирует взаимодействия с контекстным меню. Это позволяет лучше оценивать производительность проектов, где пользователи активно взаимодействуют с интерфейсом (например, онлайн-редакторы).

Что замедляет отклик?

• Долгая обработка JavaScript.
• Много анимаций на странице.
• Громоздкие плагины и сторонние скрипты.

Как улучшить INP

Сократите структуру документа (DOM)

DOM (Document Object Model) — это структура HTML-страницы. Если в ней слишком много элементов, браузеру становится сложнее её обрабатывать, что замедляет рендеринг и снижает отзывчивость.

• Используйте контейнер DocumentFragment. Вместо того, чтобы добавлять новые элементы по одному в DOM, используйте фрагменты документа. Это временный контейнер, который позволяет вставлять сразу несколько элементов, тем самым снижая количество перерисовок страницы.
• Упростите CSS-селекторы. Длинные и сложные селекторы замедляют рендеринг, так как браузер вынужден проверять соответствие каждого элемента. Упрощение селекторов ускоряет обработку стилей и отрисовки.
• Применяйте content-visibility: auto. Это свойство позволяет браузеру пропускать рендеринг элементов, которые находятся за пределами экрана, что снижает нагрузку на основной поток, улучшая отзывчивость страницы.

Удалите неиспользуемые плагины и скрипты

Чем больше у вас плагинов, тем больше запросов и скриптов загружается на ваш сайт. Регулярная проверка и удаление ненужных плагинов помогают ускорить работу страницы и уменьшить нагрузку на сервер. Кроме того, не забывайте о минимизации JavaScript и разделении его на модули, что также положительно скажется на производительности.

Оптимизируйте количество рекламных блоков

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

CLS (Cumulative Layout Shift)

Одна из самых раздражающих проблем на сайте — неожиданный сдвиг элементов (CLS), который приводит к случайным кликам и ухудшает взаимодействие с контентом. Например, если вы читаете статью, но вдруг текст съезжает из-за подгруженной рекламы.

Какие значения считаются хорошими?

• ≤ 0.1 — отлично.
• 0.1 – 0.25 — средне.
• > 0.25 — плохо.

Google улучшил расчет CLS, сделав его более точным — теперь браузеры игнорируют сдвиги макета во время перетаскивания и изменения размера элементов мышью, что особенно важно для интерактивных сайтов. Это снижает вероятность ложных срабатываний и помогает избежать неоправданного увеличения CLS. Кроме того, Chrome теперь отдает приоритет загрузке изображений перед рендерингом страницы, чтобы избежать скачков контента из-за поздней подгрузки графики. Эти изменения позволяют уменьшить резкие сдвиги макета и улучшить пользовательский опыт, особенно на сайтах с динамическим контентом.

Что вызывает высокий CLS?

• Изображения без заданных размеров.
• Поздняя загрузка шрифтов.
• Динамически подгружаемая реклама.

Как улучшить CLS

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

Чтобы минимизировать резкие изменения макета при загрузке осинового шрифта, можно скорректировать параметры резервного шрифта (fallback-font) с помощью font-face. Используйте следующие свойства:

• size-adjust — меняет размер запасного шрифта так, чтобы его высота x-height соответствовала основному шрифту, это уменьшает визуальные отличия при их смене.
• ascent-override — задаёт верхнюю границу символов для запасного шрифта, позволяя выровнять его высоту с основным и избежать смещений.
• descent-override — регулирует нижнюю границу символов запасного шрифта, что позволяет ещё больше уменьшить сдвиги макета.

Используйте меньше файлов шрифтов

Возможно, вы не замечали, что при загрузке шрифта вы загружаете файл для каждого стиля. Например, при использовании обычного шрифта для основного текста, жирного для заголовков, полужирного для ссылок и курсивного для цитат, вы загружаете 4 разных файла шрифтов, что составляет 4 разных HTTP-запроса. В Chrome DevTools есть инструмент CSS Overview, который перечисляет все веса шрифтов на вашей странице. Посмотрите ради интереса и при возможности замените их на более легкие. Также не обязательно загружать отдельно жирный, полужирный, курсив — используйте встроенные свойства CSS, чтобы управлять размером и толщиной. Используйте встроенные шрифты там, где это не является решающим фактором, они не так уж плохи, зато отображаются мгновенно.

Загружайте шрифты к себе на сервер

Импортировать шрифт гораздо проще, но это также увеличивает время загрузки. Ведь для этого браузер должен установить новое соединение — найти DNS, создать TCP-соединение, согласовать TLS и только потом отобразить шрифт. Плюс сторонний ресурс может быть в этот момент недоступен или тормозить. Использование ресурсов с собственного сервера позволяет значительно сократить время прорисовки страницы.

Резервируйте место для загрузки изображений

Ленивая загрузка (lazy loading) увеличивает скорость загрузки страницы, но может вызывать сдвиг контента, если не предусмотреть фиксированные размеры изображений. Посетители часто быстро пролистывают страницу, и если изображение загружается с задержкой, окружающий текст и элементы могут неожиданно сместиться. Как этого избежать?

• Указывайте width и height для изображений и видео.
• Используйте CSS-свойство aspect-ratio, чтобы задать пропорции изображения заранее.
• Заранее резервируйте место под рекламные блоки.

Не используйте ленивую загрузку для CSS в верхней части страницы

Некоторые темы разделяют CSS на отдельные файлы для разных секций, загружая их по мере необходимости. В результате браузер воспринимает такие файлы как блокирующие рендеринг, вызывая неожиданные мерцания контента или частично стилизованные элементы. Чтобы этого избежать, встраивайте критически важные стили прямо в HTML.

Ограничьте использование CSS-анимаций

Анимации и CSS-переходы могут негативно повлиять на CLS, особенно если они вызывают смещение макета без явного действия пользователя. Например:

• Баннеры уведомлений (например, cookie-баннеры), появляющиеся сверху или снизу, часто сдвигают другие элементы.
• Анимации изменения размеров элементов (ширины, высоты, полей, границ) заставляют браузер пересчитывать компоновку.
• Анимации элементов с position: absolute – даже если другие элементы не двигаются, сам пересчет позиции влияет на CLS.

Чтобы избежать влияния на макет, используйте GPU-оптимизированные свойства, такие как transform, scale и opacity. Это не только улучшит метрику, но и сделает сайт более плавным и отзывчивым.

Как проверить показатели Core Web Vitals

Чтобы оценить производительность и скорость загрузки сайта можно использовать несколько инструментов.

1. Google PageSpeed Insights

Перейдите на PageSpeed Insights, введите URL страницы и нажмите «Анализировать». В разделе «Основные интернет-показатели» (Core Web Vitals) будут представлены данные о LCP, CLS и INP. Сервис учитывает реальные данные пользователей (если они доступны) и даёт рекомендации по исправлению проблем.

2. Google Search Console

В Search Console откройте раздел «Основные интернет-показатели», проверьте отчёт по мобильным и десктопным страницам. Здесь можно увидеть, какие URL требуют оптимизации. В отличие от PageSpeed Insights позволяет отслеживать динамику изменений.

3. Lighthouse (Chrome DevTools)

Откройте сайт в браузере Google Chrome, нажмите F12, справа откроется меню разработчика. В верхней части элементов перейдите во вкладку «Lighthouse» и запустите анализ. Можно выбрать проверку для мобильных или десктопных устройств. Сервис работает локально, без необходимости отправки URL, а также даёт детальные рекомендации по улучшению производительности.

4. WebPageTest

Перейдите на WebPageTest, введите URL, выберите регион и устройство, запустите тест. В разделе «Core Web Vitals» можно увидеть основные показатели страницы, а также запустить глубокий анализ производительности сайта.

5. GTmetrix

Мощный онлайн-инструмент для анализа производительности, включая данные Web Vitals, Lighthouse, показатели реальных пользователей (CrUX) и прочее. Для получения отчета нужно зарегистрироваться

Подведем итоги

Core Web Vitals — один из ключевых факторов SEO. Если ваш сайт тормозит, дергается или плохо реагирует, пользователи уйдут, а его позиции в Google снизятся. Так что улучшайте показатели не только ради поисковиков, но и ради удобства пользователей!