Свойство entries и массив LayoutShift

Библиотека Web Vitals предоставляет API для измерения ключевых показателей производительности веб-страницы, включая такие метрики, как Largest Contentful Paint (LCP), First Input Delay (FID) и Cumulative Layout Shift (CLS). Одним из важнейших компонентов при работе с CLS является использование свойства entries, которое возвращает массив объектов LayoutShift. Этот массив позволяет детально анализировать все смещения контента на странице.

Общее представление о entries

Свойство entries доступно в объекте, который передаётся в колбэки Web Vitals. Оно представляет собой массив объектов, каждый из которых описывает отдельное смещение макета страницы. Структура объекта LayoutShift строго регламентирована:

{
  value: number,          // Значение смещения (shift score)
  sources: LayoutShiftAttribution[], // Массив элементов, которые вызвали смещение
  hadRecentInput: boolean, // Флаг, показывающий, было ли смещение вызвано пользователем
  lastInputTime: number    // Время последнего взаимодействия пользователя
}

Ключевые моменты свойства entries:

  • Порядок объектов соответствует последовательности смещений на странице.
  • Каждое смещение фиксируется только в том случае, если оно реально повлияло на видимое содержание.
  • Объекты LayoutShift позволяют понять, какие элементы страницы вызывают наибольший CLS.

Детальный разбор объекта LayoutShift

Свойство value

value — числовой показатель смещения, рассчитываемый как произведение доли видимой области элемента, который сдвинулся, на долю экрана, затронутую этим смещением. Например, если элемент занимает половину экрана и сдвигается на половину своей высоты, value будет примерно 0.25. Именно эти значения суммируются для вычисления итогового CLS.

Свойство sources

sources — массив объектов LayoutShiftAttribution, каждый из которых описывает один конкретный элемент или фрагмент DOM, который вызвал смещение:

{
  node: Node,            // DOM-узел, который сдвинулся
  previousRect: DOMRectReadOnly, // Положение элемента до смещения
  currentRect: DOMRectReadOnly   // Положение элемента после смещения
}

Использование sources позволяет точно идентифицировать проблемные элементы и оптимизировать их поведение.

Свойство hadRecentInput

Если hadRecentInput равно true, это значит, что смещение произошло вследствие пользовательского взаимодействия (например, при прокрутке или клике), и такие смещения не учитываются в CLS по стандарту Google. Это позволяет отделять смещения, вызванные пользователем, от неожиданных смещений контента.

Свойство lastInputTime

lastInputTime фиксирует момент последнего пользовательского ввода перед смещением. Это значение используется для фильтрации смещений и расчёта FID в совокупности с CLS.

Пример работы с массивом entries

import {getCLS} from 'web-vitals';

getCLS((metric) => {
  console.log('Общий CLS:', metric.value);

  metric.entries.forEach((entry, index) => {
    console.log(`Смещение #${index + 1}:`, entry.value);
    entry.sources.forEach((source, sIndex) => {
      console.log(`Элемент #${sIndex + 1} вызвал смещение:`, source.node);
      console.log('Старое положение:', source.previousRect);
      console.log('Новое положение:', source.currentRect);
    });
  });
});

В этом примере видно, что:

  • Общий CLS доступен через metric.value.
  • Массив entries предоставляет детальную информацию о каждом смещении.
  • Через sources можно отследить конкретные DOM-узлы, вызвавшие изменение макета.

Практические рекомендации

  • Анализировать все объекты entries, а не только итоговое значение CLS. Это позволяет выявлять отдельные проблемные элементы.
  • Фильтровать смещения, вызванные пользователем (hadRecentInput: true), чтобы фокусироваться на неожиданном контентном сдвиге.
  • Использовать данные previousRect и currentRect для визуального анализа и оптимизации стилей элементов (например, заранее задавать размеры блоков изображений или баннеров).

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

Оглавление