Сегментация по типу устройства

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

Определение типа устройства

Тип устройства чаще всего определяется по user-agent браузера, но для целей анализа Web Vitals предпочтительнее использовать более надежные методы, ориентированные на характеристики устройства:

  • Ширина экрана (window.innerWidth) — простая эвристика для различения мобильных и десктопных пользователей. Обычно устройства с шириной экрана менее 768 пикселей считаются мобильными.
  • Сенсорный ввод (window.matchMedia('(pointer: coarse)')) — наличие сенсорного интерфейса может дополнительно уточнить тип устройства.
  • Операционная система — мобильные платформы (iOS, Android) обычно классифицируются как мобильные устройства, десктопные ОС — как настольные.

Пример кода для классификации:

function detectDeviceType() {
  const isMobile = window.innerWidth < 768 || matchMedia('(pointer: coarse)').matches;
  return isMobile ? 'mobile' : 'desktop';
}

Сбор Web Vitals с учетом устройства

Библиотека web-vitals предоставляет функции для сбора ключевых показателей: CLS, LCP, FID, TTFB и INP. Для сегментации необходимо добавлять к каждому измерению информацию о типе устройства:

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

function sendToAnalytics(metric) {
  const payload = {
    name: metric.name,
    value: metric.value,
    id: metric.id,
    device: detectDeviceType()
  };
  // Отправка данных на сервер аналитики
  navigator.sendBeacon('/analytics', JSON.stringify(payload));
}

getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getLCP(sendToAnalytics);
getTTFB(sendToAnalytics);
getINP(sendToAnalytics);

Таким образом, каждая метрика сопровождается дополнительным полем device, что позволяет в аналитике строить сравнительные отчеты по платформам.

Применение фильтров и отчетов

После сбора данных сегментация позволяет:

  1. Сравнивать мобильные и десктопные показатели:

    • Мобильные устройства чаще показывают более высокие значения LCP из-за медленной сети или слабого процессора.
    • CLS может быть выше на десктопе при больших изображениях и динамических баннерах.

  2. Выявлять критические узкие места:

    • На мобильных пользователях медленные шрифты или тяжелые изображения сильно влияют на LCP.
    • На десктопе важнее оптимизация рендеринга интерактивных элементов.

  3. Настраивать приоритеты оптимизации:

    • Для мобильных — уменьшение размеров ресурсов, lazy-loading изображений, ускорение загрузки шрифтов.
    • Для десктопа — оптимизация JavaScript и устранение Layout Shift при динамическом контенте.

Дополнительные рекомендации

  • Ведение исторических данных по устройствам: важно сохранять тип устройства вместе с метриками для анализа трендов.
  • Использование медиазапросов в аналитике: позволяет проверять, как разные размеры экранов влияют на метрики.
  • Разделение по мобильным категориям: смартфоны и планшеты можно анализировать отдельно, так как производительность сильно зависит от мощности устройства.

Пример расширенной сегментации

function getDeviceCategory() {
  const width = window.innerWidth;
  if (width < 576) return 'smartphone';
  if (width < 1024) return 'tablet';
  return 'desktop';
}

function sendVitals(metric) {
  const payload = {
    name: metric.name,
    value: metric.value,
    id: metric.id,
    category: getDeviceCategory()
  };
  navigator.sendBeacon('/analytics', JSON.stringify(payload));
}

[getCLS, getFID, getLCP, getTTFB, getINP].forEach(fn => fn(sendVitals));

Такой подход позволяет строить детальные отчеты с разделением на смартфоны, планшеты и десктопы, что дает максимально точную картину производительности для всех типов пользователей.

Сегментация по устройствам в Web Vitals — фундаментальный шаг для правильного анализа пользовательского опыта, позволяющий выявлять проблемные сценарии и нацелено улучшать производительность.

Оглавление