Core Web Vitals

Core Web Vitals — это набор метрик, разработанных компанией Google для оценки пользовательского опыта взаимодействия с веб-страницей. Эти метрики измеряют скорость загрузки, интерактивность и визуальную стабильность контента. Core Web Vitals являются частью более широкой системы сигналов ранжирования, известной как Page Experience (опыт страницы), и используются в алгоритмах поисковой выдачи Google для определения релевантности и качества сайта. Внедрение Core Web Vitals было официально анонсировано в мае 2020 года, а с июня 2021 года они стали фактором ранжирования в мобильном поиске Google.

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

До появления Core Web Vitals оценка скорости загрузки сайта основывалась на единичных метриках, таких как время полной загрузки страницы (Page Load Time) или время до первого байта (TTFB). Однако эти показатели не отражали реальный опыт пользователя, который может начать взаимодействие с сайтом до его полной загрузки. Google стремился создать метрики, ориентированные на пользователя (user-centric metrics), которые фиксируют ключевые моменты взаимодействия.

В 2018 году Google представил концепцию RAIL (Response, Animation, Idle, Load) — модель оценки производительности, основанную на восприятии пользователя. Core Web Vitals стали практической реализацией этой модели. Разработка велась совместно с сообществом разработчиков через стандарты W3C (World Wide Web Consortium) и инструменты, такие как Lighthouse и PageSpeed Insights.

Основные метрики

Core Web Vitals состоят из трёх метрик, каждая из которых измеряет определённый аспект пользовательского опыта. Для каждой метрики установлены пороговые значения: «хорошо» (Good), «требует улучшения» (Needs Improvement) и «плохо» (Poor).

Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) измеряет время, за которое загружается и становится видимым самый крупный элемент контента на странице (например, изображение, видео, блок текста). Эта метрика отражает воспринимаемую скорость загрузки — момент, когда пользователь считает, что страница загрузилась.

• Пороговые значения:
• Хорошо: ≤ 2,5 секунды.
• Требует улучшения: 2,5–4,0 секунды.
• Плохо: > 4,0 секунды.
• Факторы влияния: медленный сервер (высокий TTFB), неоптимизированные изображения, блокирующий рендеринг JavaScript и CSS, использование клиентского рендеринга без серверного.

First Input Delay (FID)

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

• Пороговые значения:
• Хорошо: ≤ 100 миллисекунд.
• Требует улучшения: 100–300 миллисекунд.
• Плохо: > 300 миллисекунд.
• Факторы влияния: длительное выполнение JavaScript (например, загрузка аналитики, сторонних скриптов), тяжёлые задачи в основном потоке браузера, отсутствие разбивки кода на части (code splitting).

Примечание: В марте 2024 года Google объявил о замене FID на новую метрику Interaction to Next Paint (INP), которая будет измерять задержку всех взаимодействий пользователя, а не только первого. INP станет частью Core Web Vitals с марта 2024 года.

Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) измеряет визуальную стабильность страницы — количество и величину неожиданных сдвигов макета во время загрузки. Такие сдвиги происходят, когда элементы (изображения, реклама, шрифты) загружаются с задержкой и смещают уже отображённый контент, что может привести к случайным кликам.

• Пороговые значения:
• Хорошо: ≤ 0,1.
• Требует улучшения: 0,1–0,25.
• Плохо: > 0,25.
• Факторы влияния: изображения и видео без явно заданных размеров (width/height), динамически вставляемая реклама, загрузка веб-шрифтов с задержкой, отсутствие резервных размеров для iframe и встроенных элементов.

Методы измерения

Core Web Vitals могут измеряться как на реальных пользовательских данных (field data), так и в лабораторных условиях (lab data).

Полевые данные (Field Data)

Основаны на данных, собираемых из браузеров реальных пользователей через API Chrome User Experience Report (CrUX). CrUX предоставляет агрегированные данные по миллионам сайтов, разбитые по странам, устройствам и типам подключения. Эти данные являются наиболее точными, так как отражают фактический опыт пользователей.

• Инструменты: Google Search Console (отчёт «Core Web Vitals»), PageSpeed Insights (раздел «Данные полевых условий»), CrUX Dashboard в Looker Studio.

Лабораторные данные (Lab Data)

Основаны на симулированной загрузке страницы в контролируемой среде (например, на эмулированном мобильном устройстве с медленным соединением). Лабораторные данные позволяют выявить конкретные проблемы производительности, но не учитывают вариативность реальных устройств и сетей.

• Инструменты: Lighthouse (встроен в Chrome DevTools), PageSpeed Insights (раздел «Лабораторные данные»), WebPageTest.

Влияние на SEO и ранжирование

С июня 2021 года Core Web Vitals стали фактором ранжирования в мобильном поиске Google. Они входят в состав сигнала Page Experience, который также включает:

• Безопасность (HTTPS).
• Отсутствие навязчивых межстраничных объявлений (interstitials).
• Адаптивность под мобильные устройства (mobile-friendliness).
• Безопасный просмотр (Safe Browsing — отсутствие вредоносного контента).

Важно отметить, что Core Web Vitals не являются единственным фактором ранжирования. Google неоднократно подчёркивал, что релевантность контента остаётся приоритетом. Однако для сайтов с сопоставимым качеством контента лучшие показатели Core Web Vitals могут дать преимущество в выдаче.

Согласно данным Google, сайты, соответствующие пороговым значениям всех трёх метрик, имеют на 24% меньший показатель отказов (bounce rate) по сравнению с сайтами, не проходящими тест.

Оптимизация

Оптимизация Core Web Vitals требует комплексного подхода, затрагивающего серверную часть, клиентский код и конфигурацию хостинга.

Оптимизация LCP

• Ускорение сервера: использование CDN (Content Delivery Network), оптимизация TTFB, включение HTTP/2 или HTTP/3.
• Оптимизация изображений: сжатие (WebP, AVIF), ленивая загрузка (lazy loading), явное указание размеров.
• Минимизация критического CSS: выделение стилей, необходимых для отображения первого экрана (above-the-fold), в inline-блоке.
• Предзагрузка ключевых ресурсов: использование <link rel="preload"> для шрифтов, изображений-героев и критических скриптов.

Оптимизация FID/INP

• Разбивка длительных задач: разделение JavaScript-кода на части с помощью requestAnimationFrame или setTimeout.
• Дефер (отложенная загрузка) неиспользуемого JavaScript: использование атрибута defer или async для скриптов, не влияющих на первый рендер.
• Удаление блокирующего рендеринг JavaScript: перенос скриптов в конец <body> или использование type="module".
• Использование Web Workers: вынос тяжёлых вычислений в фоновые потоки.

Оптимизация CLS

• Явное указание размеров для всех медиаэлементов: атрибуты width и height для <img>, <video>, <iframe>.
• Резервирование места для рекламы и динамического контента: использование CSS-контейнеров с фиксированными размерами или aspect-ratio.
• Использование системных шрифтов или предзагрузка веб-шрифтов: настройка font-display: swap или font-display: optional в CSS.
• Избегание вставки контента над уже отображённым: все динамические элементы должны добавляться ниже видимой области или с явным резервированием места.

Критика и ограничения

Несмотря на широкое внедрение, Core Web Vitals подвергаются критике со стороны веб-разработчиков и владельцев сайтов.

• Ориентация на мобильные устройства: метрики изначально разрабатывались для мобильного поиска, и их применение к десктопным версиям сайтов может быть не всегда корректным.
• Зависимость от сторонних ресурсов: рекламные сети, аналитические скрипты и виджеты социальных сетей часто ухудшают показатели, но владельцы сайтов не всегда могут их оптимизировать.
• Сложность интерпретации: пороговые значения являются усреднёнными и не учитывают специфику отдельных типов сайтов (например, одностраничные приложения или сайты с тяжёлой графикой).
• Неполнота оценки: Core Web Vitals не измеряют такие аспекты, как доступность (accessibility), удобство навигации или качество контента.

Перспективы развития

Google продолжает развивать систему Core Web Vitals. В 2023 году был анонсирован переход от FID к INP, а также рассматривается введение новых метрик, таких как Smoothness (плавность анимации) и Responsiveness (общая отзывчивость интерфейса). Ожидается, что в будущем Core Web Vitals будут интегрированы с другими сигналами, такими как Web Vitals for Video и Web Vitals for Forms.

Источники

• Google Developers. «Web Vitals».
• Google Search Central. «Page Experience».
• W3C. «Largest Contentful Paint API».
• W3C. «Event Timing API».
• W3C. «Layout Instability API».
• Chrome UX Report (CrUX) Documentation.
• Lighthouse Performance Scoring Guide.