Что такое layout shift record

Layout Shift Record (LSR) — это объект, который фиксирует смещение элементов на веб-странице во время её загрузки или интерактивного использования. Он является частью метрик Web Vitals, в частности Cumulative Layout Shift (CLS), которая измеряет стабильность визуального контента. Основная цель LSR — количественно оценить непредвиденные смещения и предоставить точные данные для оптимизации пользовательского опыта.

Структура Layout Shift Record

Каждый LSR содержит несколько ключевых полей:

  1. value — числовое значение смещения, которое отражает размер визуального сдвига относительно текущего viewport. Чем выше значение, тем более заметным был сдвиг для пользователя.

  2. sources — массив объектов, описывающих элементы, участвующие в смещении. Каждый объект содержит:

    • node — ссылка на DOM-элемент, который сместился.
    • previousRect и currentRect — объекты с координатами и размерами элемента до и после смещения (x, y, width, height).
    • previousContainerRect и currentContainerRect — координаты контейнера, если смещение произошло внутри родительского блока.

  3. hadRecentInput — булево значение, которое показывает, было ли смещение вызвано взаимодействием пользователя (например, клик или скролл). Смещения без взаимодействия считаются более критичными для CLS.

  4. startTime — временная метка начала смещения, в миллисекундах от начала навигации страницы.

Принцип работы

LSR создается каждый раз, когда происходит значительное смещение визуального контента, которое может быть замечено пользователем. Для браузеров это фиксируется через API Layout Instability, предоставляемое Web Vitals.

Процесс выглядит следующим образом:

  1. При рендере страницы браузер отслеживает изменение bounding box элементов.
  2. Если элемент сместился без предварительного взаимодействия пользователя, создается LSR.
  3. Значение смещения рассчитывается на основе отношения площади смещения к видимой области. Формула CLS учитывает максимальное перекрытие и объединяет все смещения, которые происходят в одном фрейме.
  4. Все LSR добавляются в массив, который затем используется для вычисления Cumulative Layout Shift.

Пример использования в JavaScript

import { getCLS } from 'web-vitals';

getCLS((metric) => {
  console.log('Cumulative Layout Shift:', metric.value);
  console.log('Layout Shift Records:', metric.entries);
  
  metric.entries.forEach((entry) => {
    console.log('Element:', entry.sources.map(source => source.node));
    console.log('Shift value:', entry.value);
    console.log('Start time:', entry.startTime);
    console.log('User input affected?', entry.hadRecentInput);
  });
});

В этом примере:

  • metric.value — это суммарное значение CLS.
  • metric.entries — массив LSR, содержащих информацию о каждом смещении.

Ключевые аспекты оптимизации

  1. Избегать смещений без контента: динамическая загрузка изображений и рекламы может вызвать значительные LSR.
  2. Указывать размеры элементов: фиксированные ширина и высота блоков уменьшают неожиданное смещение.
  3. Анимировать изменения осторожно: CSS-анимации, изменяющие layout, должны использовать transform или opacity, чтобы не создавать LSR.
  4. Отслеживать влияние пользовательского ввода: смещения после клика или скролла менее критичны, но важно анализировать их для комплексной оптимизации.

Интеграция с аналитикой

LSR можно отправлять в систему аналитики для дальнейшего анализа пользовательского опыта. Полезно фиксировать:

  • value — величину смещения, чтобы выявить проблемные страницы.
  • startTime — момент появления смещения, чтобы связывать его с определенными событиями на странице.
  • sources — элементы, вызывающие смещение, для приоритетной оптимизации.

Важные нюансы

  • LSR учитывает только смещения, происходящие без пользовательского взаимодействия. Смещения после взаимодействия не добавляются в CLS, но могут быть полезны для UX-анализа.
  • Каждый LSR фиксируется на уровне кадра; несколько смещений в одном кадре суммируются как один LSR.
  • Высокое значение CLS обычно связано с рекламными баннерами, поздней загрузкой изображений или динамическим контентом без заранее заданных размеров.

Layout Shift Record — это детализированный инструмент анализа нестабильности визуального контента, позволяющий разработчикам точно измерять и устранять непредсказуемые смещения на веб-странице.

Оглавление