Когда отправлять: on-change против on-unload стратегии

Web Vitals измеряют ключевые показатели пользовательского опыта на веб-странице: LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift) и FID (First Input Delay). Одним из критических вопросов при их сборе является стратегия отправки данных: в момент изменений (on-change) или при выгрузке страницы (on-unload). Каждая из стратегий имеет свои особенности, преимущества и ограничения, которые напрямую влияют на точность метрик и производительность сайта.

Стратегия on-change

Стратегия on-change подразумевает отправку данных о метриках немедленно после их изменения. Она активна для всех ключевых Web Vitals, где значения метрик могут меняться в процессе взаимодействия пользователя с страницей.

Преимущества:

  1. Высокая точность данных Метрики фиксируются сразу после события, минимизируя вероятность потери информации. Например, для CLS каждая смещение макета отправляется как отдельное событие, что позволяет точно рассчитывать кумулятивное смещение.

  2. Поддержка интерактивных страниц На динамических страницах с большим количеством асинхронного контента (SPA, AJAX-запросы) метрики могут изменяться многократно. on-change позволяет отследить все эти изменения без необходимости ждать окончания сессии пользователя.

  3. Независимость от завершения сессии Даже если пользователь покинет страницу раньше времени, данные о критических изменениях будут зафиксированы.

Недостатки:

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

  • Сложность агрегирования данных Для анализа необходимо объединять события, чтобы получить финальное значение метрики за сессию.

Пример реализации в Jav * aScript:

import { getCLS, getLCP, getFID } from 'web-vitals';

function sendToAnalytics(metric) {
  fetch('/analytics', {
    method: 'POST',
    body: JSON.stringify(metric),
    keepalive: true
  });
}

getCLS(sendToAnalytics);
getLCP(sendToAnalytics);
getFID(sendToAnalytics);

Здесь каждая метрика отправляется сразу после изменения через sendToAnalytics. Использование keepalive: true обеспечивает надежную отправку даже при закрытии страницы.

Стратегия on-unload

Стратегия on-unload подразумевает отправку всех данных только при закрытии или выгрузке страницы. Она полезна, когда необходимо собрать итоговые значения метрик, например, для анализа LCP и CLS в конце сессии.

Преимущества:

  1. Минимизация сетевой нагрузки Данные отправляются один раз за сессию, что снижает количество запросов к серверу и экономит ресурсы.

  2. Простота агрегирования На сервер приходит уже собранный результат метрики, нет необходимости обрабатывать промежуточные изменения.

Недостатки:

  • Риск потери данных Если пользователь закроет браузер слишком быстро или произойдет сбой, данные могут не успеть отправиться.

  • Задержка анализа Статистика становится доступной только после завершения сессии, что затрудняет моментальный мониторинг.

Пример реализации в Jav * aScript:

import { getCLS, getLCP, getFID } from 'web-vitals';

let metrics = [];

function recordMetric(metric) {
  metrics.push(metric);
}

function sendMetrics() {
  if (metrics.length) {
    navigator.sendBeacon('/analytics', JSON.stringify(metrics));
  }
}

getCLS(recordMetric);
getLCP(recordMetric);
getFID(recordMetric);

window.addEventListener('beforeunload', sendMetrics);

Использование navigator.sendBeacon обеспечивает асинхронную и безопасную отправку данных при закрытии страницы, минимизируя вероятность их потери.

Сравнение стратегий

Критерий on-change on-unload
Точность данных Высокая, фиксируются все изменения Средняя, зависит от завершения сессии
Нагрузка на сеть Высокая, множество запросов Низкая, один запрос
Применимость для SPA Отличная, отслеживаются динамические изменения Ограничена, риск потери промежуточных данных
Простота агрегирования Средняя, требует объединения событий Высокая, данные уже агрегированы
Риск потери данных Минимальный Возможен при преждевременном закрытии страницы

Рекомендации по использованию

  • Для интерактивных страниц с динамическим контентом лучше использовать on-change, чтобы отслеживать все изменения метрик в реальном времени.
  • Для статических страниц или страниц с минимальными изменениями макета стратегию on-unload можно использовать для экономии ресурсов и упрощения обработки данных.
  • Для критически важных метрик (например, CLS, LCP) на крупных проектах часто применяется комбинированный подход: промежуточные события отправляются on-change, а финальные агрегированные данные — on-unload.

Использование Web Vitals с грамотной стратегией отправки данных позволяет обеспечить надежный мониторинг пользовательского опыта, минимизировать потерю информации и оптимизировать нагрузку на сервер. Правильный выбор между on-change и on-unload зависит от характера веб-приложения, динамики контента и приоритетов аналитики.

Оглавление