В контексте библиотеки Web Vitals поле
id является ключевым элементом для идентификации
конкретного метрика или события, связанного с производительностью
страницы. Оно обеспечивает точное отслеживание измерений и позволяет
агрегировать данные без риска дублирования или путаницы между сессиями
пользователей.
idПоле id представляет собой уникальную строку,
формируемую при регистрации события метрики. В большинстве реализаций
используется комбинация временной метки и случайного идентификатора, что
гарантирует уникальность на уровне одной сессии и между различными
пользователями.
Пример формата поля id:
"id": "v1-1678901234567-3f9a8b2c"
Компоненты:
Сессия пользователя определяется как последовательность действий на странице или сайте, объединяемая одним идентификатором сессии. В Web Vitals этот идентификатор используется для группировки метрик, связанных с конкретным визитом, и предотвращения смешивания данных разных пользователей.
Ключевые аспекты:
Генерация уникального идентификатора Для каждой
сессии создается новый sessionId. Он может быть основан на
UUID версии 4, случайной строке или комбинации timestamp и случайного
числа.
Пример генерации в Jav * aScript:
function generateSessionId() {
return 'session-' + Date.now() + '-' + Math.floor(Math.random() * 1e8);
}
const sessionId = generateSessionId();Связывание метрик с сессией Каждое измерение Web
Vitals (CLS, LCP, FID, TTFB) получает поле id и
прикрепляется к sessionId. Это обеспечивает возможность
анализа производительности по отдельным сессиям и выявление проблемных
страниц или сценариев.
import {getLCP} from 'web-vitals';
getLCP((metric) => {
const enrichedMetric = {
...metric,
sessionId: sessionId
};
console.log(enrichedMetric);
});Хранение и передача данных Метрики с привязанным
sessionId можно отправлять на сервер аналитики для
агрегирования, фильтрации и построения отчётов. Важно, чтобы
id метрик оставался уникальным внутри одной сессии и не
пересекался между пользователями.
Обновление id при перезагрузке
страницы В случае полной перезагрузки страницы создается новая
сессия и, соответственно, новый id для метрик. Это
предотвращает накопление старых данных в рамках новой сессии.
sessionId в памяти или в
sessionStorage, если нужно отслеживать несколько метрик на
протяжении одной сессии:let sessionId = sessionStorage.getItem('sessionId');
if (!sessionId) {
sessionId = generateSessionId();
sessionStorage.setItem('sessionId', sessionId);
}
id не только
для аналитики, но и для корректной работы A/B тестов и систем
мониторинга производительности.id и метрик Web
VitalsКаждая метрика Web Vitals (CLS, LCP, FID, TTFB, INP) сопровождается
id, который позволяет:
Пример структуры метрики с id и
sessionId:
{
name: "LCP",
value: 2500,
id: "v1-1678901234567-3f9a8b2c",
sessionId: "session-1678901200000-45238917",
entries: [
{startTime: 1000, duration: 500}
]
}
Такой подход обеспечивает точность аналитики и позволяет связывать производительность страницы с конкретными пользователями и сценариями их взаимодействия.