Сессионное окно и алгоритм накопления сдвигов

Сессионное окно — это ключевой концепт в измерении показателей веб-производительности, особенно в контексте метрики Cumulative Layout Shift (CLS). CLS фиксирует визуальные сдвиги элементов страницы, происходящие после её первоначальной загрузки. Для того чтобы измерение было корректным, необходимо определить временные рамки, в которых события сдвига элементов суммируются, чтобы избежать завышенных или искажённых результатов.

Принцип работы сессионного окна

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

  1. Инициализация окна: Сессия начинается с первого зарегистрированного сдвига.
  2. Расширение окна: Каждое последующее смещение включается в текущее окно, если оно произошло не позже, чем через 1 секунду после предыдущего события.
  3. Закрытие окна: Если разрыв между сдвигами превышает 1 секунду или общее время сессии превысило 5 секунд, окно фиксируется, и формируется новый.

Таким образом, алгоритм формирует независимые кластеры смещений, которые затем суммируются для расчёта CLS.

Алгоритм накопления сдвигов

Накопление сдвигов строится по принципу суммирования индивидуальных вкладов с учётом видимости элементов и их взаимодействия с viewport:

  1. Регистрация сдвига: Когда элемент страницы смещается, вычисляется его вклад:

[ = ]

  • Impact Fraction — отношение площади элемента, который сдвинулся, к площади viewport.
  • Distance Fraction — отношение длины смещения к высоте viewport (или ширине для горизонтального сдвига).
  1. Суммирование внутри окна: Все сдвиги внутри одного сессионного окна суммируются:

[ = (_i)]

  1. Учет видимости: Элемент учитывается только в том случае, если он видим пользователю, что предотвращает включение смещений, происходящих вне экрана.

  2. Финальный CLS: После завершения всех окон выбирается максимальный CLS среди окон, который и является метрикой для страницы:

[ _{final} = (_1, _2, )]

Тонкости реализации в JavaScript

Библиотека Web Vitals предоставляет API для автоматического измерения CLS и других метрик. Основной подход реализуется через PerformanceObserver, отслеживающий layout-shift:

import {getCLS} from 'web-vitals';

getCLS(metric => {
  console.log(metric.value); // Итоговое значение CLS
  console.log(metric.entries); // Массив отдельных сдвигов
});
  • metric.entries содержит объекты типа LayoutShift, каждый с временной отметкой (startTime) и смещением элементов (value).
  • Web Vitals самостоятельно формирует сессионные окна, применяя алгоритм накопления сдвигов.
  • Можно фильтровать сдвиги, не инициированные пользователем (hadRecentInput), чтобы исключить смещения, вызванные взаимодействиями.

Оптимизация и влияние на пользовательский опыт

  • Сессии с длинной последовательностью мелких сдвигов влияют сильнее, чем единичные крупные смещения. Это важно для сайтов с динамическим контентом.
  • Разделение на окна предотвращает искусственное завышение CLS из-за случайных отложенных изменений DOM.
  • Для контроля CLS рекомендуется минимизировать динамическую вставку контента без резервирования пространства, использовать фиксированные размеры изображений и компонентов, а также отслеживать сторонние виджеты.

Практические советы по измерению

  • Обновление CLS должно происходить в реальном времени, так как смещения могут возникать и после полной загрузки страницы.
  • Web Vitals собирает данные в последовательных событиях, что позволяет отслеживать рост CLS на протяжении всей пользовательской сессии.
  • Для аналитики можно сохранять отдельные сессии в локальное хранилище или отправлять на сервер, чтобы выявлять страницы с наибольшим визуальным дискомфортом.

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

Оглавление