Понятие visibility state и его влияние на сбор метрик

В браузерной среде объект document предоставляет свойство visibilityState, которое отражает текущий статус видимости страницы. Оно принимает одно из следующих значений:

  • visible — страница полностью видима пользователю.
  • hidden — страница скрыта, пользователь переключился на другую вкладку, свернул окно или браузер перешёл в фоновый режим.
  • prerender — страница находится в режиме предварительного рендеринга (редко встречается).
  • unloaded — страница выгружена (используется крайне ограниченно).

Это свойство критически важно для корректного измерения Web Vitals, потому что метрики, связанные с пользовательским опытом, зависят от того, видима страница или нет.

Влияние visibilityState на метрики Web Vitals

Largest Contentful Paint (LCP)

LCP измеряет время, за которое основной контент страницы становится видимым. Если пользователь не видит страницу в момент рендеринга, браузер может откладывать отрисовку или приостанавливать некоторые вычисления, что приведёт к искажению LCP.

Особенности учёта LCP:

  • Если страница скрыта (hidden), начисление LCP приостанавливается, и значение обновляется только после возврата в visible.
  • Событие visibilitychange используется для корректной фиксации времени LCP, чтобы метрика отражала именно видимую пользователю загрузку.

First Input Delay (FID)

FID измеряет задержку отклика страницы на первое взаимодействие пользователя. Если страница скрыта, пользователь не может взаимодействовать с ней, и FID:

  • Не фиксируется до момента, когда страница станет видимой.
  • Для страниц, загружающихся в фоне, может быть необходимо учитывать deferred input events, чтобы не терять данные при позднем переключении на вкладку.

Cumulative Layout Shift (CLS)

CLS отражает суммарное смещение видимого контента. Проблемы могут возникнуть при:

  • Фоновой загрузке: смещения происходят, но пользователь их не видит, что может вызвать искажение метрики, если измерение проводится без учёта видимости.
  • Чтобы корректно измерять CLS, рекомендуется игнорировать смещения в hidden состоянии, фиксируя их только когда visibilityState === 'visible'.

Использование события visibilitychange

Браузеры предоставляют событие visibilitychange, которое срабатывает при изменении состояния visibilityState. Его можно использовать для:

  • Остановки или возобновления сбора метрик в зависимости от видимости страницы.
  • Коррекции метрик, таких как LCP и CLS, чтобы фиксировать только видимые пользователю события.

Пример обработки:

document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'visible') {
    // возобновление сбора метрик
  } else {
    // приостановка метрик, требующих видимости
  }
});

Влияние на реализацию Web Vitals в Javascript

Библиотека Web Vitals учитывает visibilityState при сборе данных:

  • LCP — учитывается только для видимых элементов.
  • CLS — игнорирует смещения, произошедшие в фоне.
  • FID — собирается при первой видимой интеракции.

Пример корректного измерения LCP с учётом видимости:

import { getLCP } from 'web-vitals';

let lcpValue;

getLCP((metric) => {
  if (document.visibilityState === 'visible') {
    lcpValue = metric.value;
    console.log('LCP видимой страницы:', lcpValue);
  }
});

document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'visible' && lcpValue) {
    console.log('Страница снова видима, финальный LCP:', lcpValue);
  }
});

Такой подход предотвращает неправильное занижение или завышение метрик из-за фонового состояния страницы.

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

  1. Фиксировать метрики только при visible состоянии.
  2. Использовать visibilitychange для корректной синхронизации событий с моментом, когда пользователь реально видит страницу.
  3. Игнорировать события, происходящие в фоне, чтобы CLS и LCP отражали реальный пользовательский опыт.
  4. Хранить промежуточные значения метрик и обновлять их после возврата страницы в видимое состояние.

Заключение по влиянию visibilityState

visibilityState — ключевой инструмент для правильного измерения Web Vitals. Игнорирование его значений приводит к искажённым метрикам, которые не отражают реальный пользовательский опыт. Умение использовать visibilitychange и фильтровать события по состоянию страницы обеспечивает точность LCP, CLS и FID, особенно на страницах с тяжелой загрузкой и большим количеством асинхронного контента.

Оглавление