← Cloudflare Web Analytics / web-analytics / data-metrics

Core Web Vitals

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

Измеряются три основных показателя Core Web Vitals: Largest Contentful Paint, Interaction to Next Paint и Cumulative Layout Shift. Каждому из этих показателей автоматически присваивается оценка Good, Needs Improvement или Poor на основе пороговых значений, установленных Google.

Core Web Vitals наглядно показывает, какие элементы страницы влияют на восприятие сайта пользователем. Чтобы перейти к Core Web Vitals, выполните следующие действия:

1. На панели управления Cloudflare перейдите к разделу Web Analytics страницу.

   Перейдите в Веб-аналитика ↗

2. Выберите свой сайт, а затем Core Web Vitals.

Core Web Vitals делится на три основных раздела, каждый из которых содержит информацию об одном из факторов, влияющих на восприятие сайта пользователем:

• Largest Contentful Paint (LCP) ↗: измеряет воспринимаемую пользователем скорость загрузки, то есть время, за которое загружается основной контент страницы.
• Interaction to Next Paint (INP) ↗: измеряет отзывчивость интерфейса, то есть скорость реакции сайта на действия пользователя, такие как нажатия, тапы или нажатия клавиш.
• Cumulative Layout Shift (CLS) ↗: измеряет визуальную стабильность, то есть насколько сильно смещаются элементы макета страницы во время и после ее загрузки.

Каждая из этих метрик отражает влияние на пользовательский опыт, которое Web Analytics измеряет и оценивает.

Cloudflare Web Analytics позволяет интерактивно изучать метрики Core Web Vitals, фильтруя данные по URL-адресу, браузеру, операционной системе, стране, элементу и другим параметрам.

Под каждым графиком в разделе «Debug View» перечислены пять элементов, которые сильнее всего негативно влияют на метрику. Чтобы узнать о них больше, выберите элемент в таблице данных.

Каждая из таблиц (LCP, INP и CLS) также сразу показывает производительность этих элементов на уровне 75-го процентиля (P75). Если выбрать строку таблицы, можно развернуть элемент и получить доступ к дополнительной информации, включая метрики P50, P90 и P99.

Эти показатели отражают, насколько быстро элемент загружается по сравнению с другими элементами на странице. Например, если элемент загружается за 3,900 мс и находится в 75-м процентиле, это значит, что он загружается медленнее, чем 75% элементов на странице.

Web Analytics использует лёгкий JavaScript beacon для сбора данных, которые использует Vitals Explorer. Он не использует какое-либо клиентское состояние, например cookie или localStorage, для сбора метрик использования. Vitals Explorer также не идентифицирует пользователей по их IP-адресу, строке User Agent или любым другим данным.

CSS-селектор, представляющий узел DOM. С помощью этой строки можно использовать document.querySelector(<element_name>) в консоли разработчика браузера, чтобы узнать, какой DOM-узел негативно влияет на ваши показатели/значения.

Путь URL на момент фиксации показателей Core Web Vitals.

Значение метрики ↗ для каждого показателя Core Web Vitals. Это значение указывается в миллисекундах для LCP и INP и в виде оценки для CLS.

URL источника (например, изображения, текста, веб-шрифтов).

Размер исходного объекта в байтах.

Layout information представляет собой значение JSON, которое включает ширину, высоту, позицию по оси x, позицию по оси y, а также значения left, right, top и bottom. Эти значения описывают сдвиги макета, происходящие на странице.

Фиксирует информацию о расположении элемента DOM с наибольшей площадью после смещения на странице. Это значение JSON отображается как Текущий в Debug View раздел. Чтобы открыть его, прокрутите до Cumulative Layout Shifts (CLS) graphic > Debug View. Выберите любой элемент этой таблицы, чтобы перейти в раздел Layout Shifts раздел, где Текущий отображается.

Фиксирует информацию о расположении элемента DOM с наибольшей площадью до смещения на странице. Это значение JSON отображается как Назад в Debug View раздел. Чтобы открыть его, прокрутите до Cumulative Layout Shifts (CLS) graphic > Debug View. Выберите любой элемент этой таблицы, чтобы перейти в раздел Layout Shifts раздел, где Назад отображается.