Core Web Vitals

Страница загрузилась, вы тянетесь нажать кнопку, а она уезжает вниз, потому что сверху догрузился баннер. Или нажали «В корзину», и полсекунды ничего не происходит. Именно такие вещи и измеряют Core Web Vitals.

Три показателя и их нормы

INP заменил старый показатель FID в марте 2024 года. Если вам попадаются статьи про FID, они устарели.

Где смотреть

• Google Search Console, отчёт «Основные интернет-показатели»: по всему сайту, данные реальных пользователей.
• PageSpeed Insights показывает одну страницу: сверху реальные данные, ниже лабораторный тест.
• Chrome DevTools, вкладка Performance: для разработчика, чтобы найти причину.

Как улучшить каждый показатель

LCP. Ускорить ответ сервера (кэш), убрать блокирующие CSS и JS, сжать главное изображение и загружать его с высоким приоритетом, а не лениво. На одном из проверенных нами сайтов на Аспро LCP на мобильном был 7,7 секунды при норме 2,5. Основная причина в скриптах,, которые мешают отрисовке.

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

CLS. Указывать width и height у картинок и видео, резервировать место под баннеры и виджеты, не вставлять контент над уже загруженным.

Что сказать разработчику

Постановка «ускорьте сайт» ничего не даёт. Лучше так: «LCP на мобильном на страницах каталога 5,2 секунды, цель до 2,5. Главная причина по Lighthouse: блокирующие CSS и JS и тяжёлая картинка баннера». Разработчику нужны конкретная метрика, страница, цель и найденная причина. Проверка результата: тот же тест после изменений и отчёт в Search Console через 28 дней, когда накопятся реальные данные.

Если метрики в зелёной зоне на компьютере и в красной на телефоне, начинайте с мобильного: именно по нему Google оценивает страницы.

Лабораторные и полевые данные

Lighthouse измеряет страницу один раз в искусственных условиях это лабораторные данные. Search Console и верхний блок PageSpeed Insights показывают, как было у реальных посетителей за 28 дней это полевые данные. Для оценки Google важны полевые. Лабораторные нужны, чтобы найти причину и быстро проверить исправление.

Типичные виновники на сайтах с готовыми шаблонами

На сайтах, собранных на готовых шаблонах, картина обычно похожая. LCP портят большой слайдер на первом экране с тяжёлыми изображениями и отложенная загрузка главной картинки. INP страдает от множества скриптов: мегаменю, анимаций, виджетов чатов, счётчиков. CLS появляется из-за баннеров и блоков, которые догружаются после отрисовки и сдвигают контент. Лечится это настройками шаблона и небольшими правками вёрстки, а не переписыванием сайта с нуля.

На одном из проверенных нами сайтов на Аспро CLS был практически нулевым, а вот LCP на мобильном, 7,7 секунды и TBT больше секунды: основная работа была именно со скриптами и первым экраном.

Частые ошибки

• Оценивать по одному лабораторному замеру на быстром компьютере.
• Исправлять только главную, хотя трафик идёт на категории и статьи.
• Не указывать размеры картинок и баннеров, из-за чего растёт CLS.

Вопросы про Core Web Vitals

Core Web Vitals мы проверяем в техническом аудите и исправляем при доработке сайта.

Источники

• web.dev: «Web Vitals», «Interaction to Next Paint (INP)»
• Google Search Central: «Core Web Vitals и результаты поиска Google»
• Google Search Central Blog: «Introducing INP to Core Web Vitals», 2023

См. также: Скорость сайта, PageSpeed Insights, Мобильная версия сайта.