Объект LCPMetric: поля и типы

Объект LCPMetric используется для сбора и передачи данных о метрике Largest Contentful Paint (LCP) в браузере с помощью библиотеки Web Vitals. LCP отражает время загрузки самого крупного видимого элемента на странице, что является ключевым показателем пользовательского восприятия производительности. Структура объекта LCPMetric строго определена и позволяет безопасно и точно передавать данные для аналитики.

Основные поля LCPMetric

1. name

  • Тип: string
  • Описание: Всегда содержит значение 'LCP'. Это поле используется для идентификации типа метрики и отличия её от других показателей Web Vitals, таких как CLS или FID.
  • Пример:
name: 'LCP'

2. value

  • Тип: number
  • Описание: Время в миллисекундах, измеренное с момента начала загрузки страницы до отображения самого крупного содержимого. Используется для анализа производительности страницы и оптимизации UX. Значение может быть дробным числом для точного измерения времени.
  • Пример:
value: 2430.56

3. delta

  • Тип: number
  • Описание: Разница между текущим и предыдущим измерением LCP. Позволяет отслеживать динамику изменения метрики при последовательных обновлениях страницы или взаимодействиях пользователя.
  • Пример:
delta: 120.4

4. id

  • Тип: string
  • Описание: Уникальный идентификатор метрики, сгенерированный библиотекой. Обеспечивает возможность однозначной привязки событий LCP к конкретным загрузкам или сеансам пользователя. Обычно представляет собой UUID или подобный уникальный хеш.
  • Пример:
id: 'v1-1234567890abcdef'

5. entries

  • Тип: PerformanceEntry[]
  • Описание: Массив записей PerformanceEntry, связанных с LCP. Каждая запись предоставляет подробную информацию о ресурсе, который был определён как крупнейший элемент, включая тип элемента, размер, время рендеринга и ссылку на DOM-узел. Используется для детальной диагностики.
  • Пример:
entries: [
  {
    startTime: 2400,
    renderTime: 2425,
    loadTime: 2430,
    element: document.querySelector('img.hero')
  }
]

6. isFinal

  • Тип: boolean
  • Описание: Показывает, является ли текущее измерение окончательным LCP для страницы. Значение true означает, что больше изменений LCP не произойдёт (например, пользователь перестал взаимодействовать с DOM). false указывает на промежуточный результат, который может быть обновлён при дальнейшем рендеринге.
  • Пример:
isFinal: true

Взаимодействие полей

  • Поля value и delta тесно связаны: delta рассчитывается как разница между последним value и предыдущим.
  • entries обеспечивает подробную привязку к DOM и позволяет анализировать, какой конкретный элемент повлиял на LCP.
  • id используется для уникальной идентификации события, что важно при отправке данных на сервер для аналитики.
  • isFinal помогает отфильтровать промежуточные значения при построении графиков времени загрузки или при расчёте средних показателей.

Применение в коде

Типичный пример использования LCPMetric выглядит следующим образом:

import { getLCP } from 'web-vitals';

getLCP(metric => {
  console.log(metric.name);    // 'LCP'
  console.log(metric.value);   // Время LCP в мс
  console.log(metric.delta);   // Изменение относительно предыдущего значения
  console.log(metric.id);      // Уникальный идентификатор
  console.log(metric.entries); // Подробные записи PerformanceEntry
  console.log(metric.isFinal); // true или false
});

Это позволяет получать детализированную информацию о рендеринге крупнейшего элемента и использовать её для анализа производительности и оптимизации UX.

Ключевые моменты

  • Типизация полей строго фиксирована: нарушение типов может привести к некорректной обработке метрики.
  • entries содержит DOM-связанные объекты, которые обеспечивают глубокую диагностику и позволяют оптимизировать конкретные элементы страницы.
  • isFinal определяет момент завершения измерения, что критично для точного анализа пользовательского опыта.
  • Уникальный идентификатор id позволяет связывать события LCP с конкретными сеансами и изменениями на странице.

Объект LCPMetric является фундаментальной структурой для работы с метрикой Largest Contentful Paint в JavaScript и Web Vitals, обеспечивая точность измерений, возможность глубокого анализа и безопасную передачу данных.

Оглавление