Kapsule Orbit Web Vitals

The Web Vitals tab reports Core Web Vitals collected from your project's real visitors rather than from a synthetic test, so what you see is what people are actually experiencing on their own…

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

Где найти Web Vitals

Откройте Orbit, выберите проект и перейдите в раздел Web Vitals в группе Observability на вкладке проекта. На странице указано название Web Vitals и объясняется её основной показатель: p75 это оценка, используемая для Page Experience.

Пока вы не добавили сборщик данных на сайт, на странице нечего показывать. Начните с карточки настройки внизу.

Добавление сборщика

Карточка настройки предоставляет одностроковый тег script, который нужно добавить в <head> вашего сайта:

<script defer src="https://kapsulehost.com/api/v/<your-project-slug>/script.js"></script>

Точная строка с уже подставленным идентификатором вашего проекта находится на странице. Скопируйте её оттуда, а не набирайте вручную.

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

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

На странице Settings в карточке Web Analytics предусмотрена вторая копия того же сборщика, которая загружается с домена панели и размещается перед закрывающим тегом </body>. Оба варианта работают и питают одни и те же данные. Используйте один из них, а не оба, иначе каждый просмотр страницы будет учтён дважды.

Пять метрик

Метрика	Что она измеряет
LCP	Largest Contentful Paint: время до того, как основное содержимое станет видимым
INP	Interaction to Next Paint: насколько быстро страница реагирует на ввод
CLS	Cumulative Layout Shift: насколько смещается макет во время загрузки
FCP	First Contentful Paint: время до того, как что-либо будет отрисовано
TTFB	Time to First Byte: время, которое требовалось серверу, чтобы начать отвечать

Первые три это собственно Core Web Vitals. FCP и TTFB являются диагностическими: они показывают, является ли плохой LCP результатом медленного сервера или медленной страницы.

Понимание p75

Каждый показатель на этой странице это p75, не среднее значение, на основе выборок в выбранном периоде. Три четверти ваших посетителей получили опыт как минимум такой же хороший; четверть получила хуже.

Этот выбор важен. Среднее значение определяется множеством быстрых посещений на хороших соединениях и скрывает хвост распределения. p75 этого не делает: если ваш p75 LCP составляет четыре секунды, один из четырёх посетителей ждёт дольше.

Каждая карточка метрики содержит оценку Good (хорошо), Needs improvement (требуется улучшение) или Poor (плохо), а также количество выборок, на основе которых она была вычислена. Для LCP на странице указаны границы непосредственно: хорошо это 2500 мс или меньше, плохо это более 4000 мс.

Относитесь с подозрением к любой карточке с небольшим количеством выборок. p75 на основе дюжины выборок это шум. Расширьте период с помощью селектора вверху страницы или подождите больше трафика, прежде чем действовать.

График тренда

График тренда показывает ежедневный p75 для LCP и CLS в выбранном периоде с отмеченными хорошими и плохими пороговыми значениями. Подзаголовок говорит вам, что искать: плоские линии это здорово.

Скачкообразное изменение в конкретный день это полезный сигнал, так как оно почти всегда совпадает с развёртыванием. Сопоставьте дату с вкладкой Deployments или отметьте событие на временной шкале проекта, чтобы оно было аннотировано в следующий раз: см. Orbit Timeline Annotations.

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

Топ стран

Top countries показывает объём выборок по странам, полученный из заголовков edge. Это предназначено для контекста, а не для аналитики: p75, который выглядит плохо в целом, часто оказывается хорошим для вашего основного рынка и доминируется меньшей, более удалённой аудиторией.

Если большая часть вашего трафика находится далеко от вашего источника, это аргумент в пользу более агрессивного кеширования на edge, а не дальнейшей оптимизации кода.

Страницы, требующие внимания

Таблица Pages needing attention ранжирует пути по тому, насколько далеко их p75 находится выше хорошего порога для каждой метрики, с количеством выборок для каждой строки.

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

Распространённые причины, в порядке их стоимости проверки:

Главное изображение, которое не имеет размеров или не предварительно загружено. Это наиболее частая проблема LCP.
Сторонний скрипт, блокирующий главный поток. Виджеты чата, менеджеры тегов и аналитические стеки это обычные подозреваемые, и они больше всего вредят INP.
Изображения и встраивания без размеров. Они вызывают смещение макета при загрузке, что является именно тем, что измеряет CLS.
Медленный ответ источника. Если TTFB плохой, ничего из вышеперечисленного вам не поможет; исправление это кеширование или более быстрый ответ, а не фронтенд работа.

Нет выборок в этом периоде

Если на странице указано, что выборок нет, верно одно из трёх:

Сборщик не был добавлен или не загружается на посещаемых страницах.
Он был добавлен недавно и никто ещё не посещал.
Выбранный период короче промежутка с момента вашего последнего трафика.

Сначала расширьте период, так как это бесплатно, затем проверьте наличие скрипта в выданном HTML живого сайта, а не только в вашем исходнике.

Как долго хранятся данные

Отдельные выборки автоматически удаляются через 30 дней с помощью ночного задания. Селектор периода позволяет вам просматривать сохранённую историю; архива за её пределами нет.

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

Vitals на публичной странице статуса

Если вы публикуете страницу статуса для проекта, она может показывать ту же сводку Core Web Vitals своим посетителям рядом с временем безотказной работы и недавними развёртываниями. См. Orbit Status Page.

Куда дальше

Orbit Project Analytics для числовых данных со стороны сборки и сокращённой сводки vitals.
Orbit Timeline Annotations для отметки развёртываний и инцидентов позади скачкообразного изменения.
Website Speed для общего совета по производительности.