Core Web Vitals (CWV) – это основные вебпоказатели сайта, по которым Google оценивает удобство страниц сайта. CWV - фактор ранжирования, поэтому этим показателям следует уделить внимание, а для этого нужно хорошо понимать, что оценивают эти показатели и что на практике приводит к плохим результатам.
Хочу подчеркнуть, что обзор показателей будет актуален на 2026 год. Когда Core Web Vitals появился в 2020 году, его метрики были несколько иными. И по всей вероятности, они будут еще меняться вдальнейшем.
LCP (Largest Contentful Paint)
LCP – скорость загрузки наибольшего контента в области просмотра (первом экране).
Хотя LCP оценивает и текстовый контент, такой контент вряд ли будет медленным. Когда на сайте есть проблема с LCP, она обычно касается изображений или видео.
Google считает, что LCP менее 2,5 секунд – это хороший результат. От 2,5 до 4 секунд – приемлемый. И все, что больше 4 секунд – является плохим результатом.
Как достичь зеленой зоны LCP?
Оптимизация изображений.
Часто на сайтах загружают слишком тяжелые изображения. Они либо обладают огромным разрешением (больше, чем способен показать экран), либо просто плохо сжаты и занимают много памяти без надобности.
Подготовка изображений – это первый шаг к зеленой зоне LCP, да и к быстрой загрузке сайта в целом.
Подготовка отдельных изображений для мобильных устройств.
Большая редкость – увидеть на сайте отдельные изображения баннеров или фоновых изображений для мобильных устройств. На смартфон через мобильный интернет загружаются файлы для десктопной версии, которые зачастую не оптимальны даже для нее.
Для всех мест на сайте, где используются большие изображения, следует предусмотреть использование отдельных файлов для мобильных устройств.
Предварительная загрузка изображений.
Когда браузер воспроизводит страницу сайта, он делает это постепенно, читая код сверху вниз, попутно загружая дополнительные файлы. Когда он доходит до самого большого изображения в области просмотра, страница может быть частично воспроизведена, но на загрузку изображения может уйти некоторое время, особенно на мобильных устройствах. В это время пользователь будет видеть просто дырку, что и приведет к плохому LCP.
Можно настроить предварительную загрузку такого изображения, чтобы когда браузер дойдет до его воспроизведения, оно уже было загружено.
Уменьшение времени ответа сервера (TTFB).
Когда вы в браузере открываете страницу сайта, браузер отправляет на сервер запрос на эту страницу. Сервер обрабатывает запрос, выполняет программный код этой страницы, собирает информацию из базы данных, формирует HTML-документ и отправляет его обратно браузеру. Время, за которое происходят эти процессы, называют временем ответа сервера (TTFB – Time To First Byte). Пока браузер не получит этот документ, он не может ничего загружать и воспроизводить страницу, потому что еще не знает, что ему делать. Итак, если у вас большой TTFB, то даже на сайте с идеально оптимизированными изображениями вы можете получить плохой LCP.
Причин большого TTFB может быть много, например: недостаточно серверных ресурсов, медленный программный код, неоптимизированная база данных, атака ботов на сервер. Со всеми этими причинами можно и нужно работать.
INP (Interaction to Next Paint)
INP - взаимодействие со следующей отрисовкой. Метрика оценивает общую скорость отклика страницы на действия пользователя, отслеживая задержку всех кликов, тапов и действий с клавиатурой в течение всего времени использования сайта. В зачет идет худший результат.
Хорошим показателем INP считается время до 200 миллисекунд. От 200 до 500 миллисекунд – это средний результат. И все, что больше половины секунды – это плохой результат.
Как снизить INP на сайте?
Основной причиной плохого показателя INP является проблема JavaScript. Скрипты могут быть большими, сложными, их может быть очень много. Если на сайте интерактивность реализована такими скриптами, с момента действия пользователя до момента воспроизведения может проходить значительное время.
Также причиной плохого INP может быть большой TTFB, если действие на странице обращается к серверной логике через Ajax.
Ну и наконец, причиной может быть экстремально плохой CSS, но это невероятная редкость.
Для того чтобы держать INP в зеленой зоне, все такие проблемы лучше решать в корне. Хотя есть и другой путь. INP требует быстрой реакции сайта на действия пользователя. Итак, если функции сайта требуется времени на выполнение, вы просто можете в это время показать индикатор загрузки, это устроит метрику INP, но вряд ли это сильно устроит пользователей.
CLS (Cumulative Layout Shift)
CLS - это совокупное смещение макета. Подразумевается изменение положения элементов интерфейса сайта, во время его загрузки. Сдвиг измеряется в относительных единицах, учитывающих то, какой процент на экране занимает сместившийся элемент и то, насколько он сместился.
Хороший CLS – до 0,1. Средний – 0,1-0,25. Плохой результат – более 0,25 единиц.
Какие причины плохого CLS?
Изображения не содержат атрибуты ширины и высоты.
Когда браузер читает html-документ, он сразу воспроизводит его. Но файлы он загружает позже. Поэтому, если у тэга изображения не указаны параметры размера, браузер не знает, сколько места нужно зарезервировать для изображения. И когда изображение появляется, идущий контент ниже сдвигается. Если уж быть точным, то браузеру для решения этой проблемы нужны не размеры, а соотношение сторон, но из размеров он вычисляет это соотношение.
Если указать параметры размеров в изображениях, то это решит большинство проблем сдвига.
Размер блока регулируется контентом, которого нет при воспроизведении страницы.
В основном это бывает когда какой-то контент выводится с помощью JavaScript, который загружается и выполняется чуть позже. Таким контентом могут быть посторонние рекламные баннеры или контент вашего сайта, например - отзывы.
В большинстве таких случаев можно задать размер блока и тогда, когда контент загрузить, он займет свое место без смещения.
Подключение шрифтов.
Иногда использование сторонних шрифтов на сайте приводит к тому, что шрифт может загрузиться с задержкой. Если текст начал воспроизводиться с одним шрифтом, а затем сменился другим, то вероятно он хоть немного изменится в размерах, что приведет к смещению.
Как проверить метрики Core Web Vitals?
Вы можете просмотреть показатели Core Web Vitals в соответствующем разделе вашего Search Console. Имейте в виду, что данные могут не отображаться для сайтов с низкой посещаемостью. Метрики начинают показываться при достижении определенного количества посещений (количество не указывается) за последние 28 дней.
Также вы можете посмотреть значение основных метрик в PageSpeed Insights. Но будьте внимательны. Сам PageSpeed не производит измерения, он производит имитацию загрузки и анализирует то, что имитировал. Его данные могут быть очень далеки от реальных. Но если у сайта есть необходимое количество посещений за 28 дней, то в PageSpeed Insights начнет отображаться блок реальных данных Core Web Vitals.