NavigationTimingAttribution для FCP и TTFB

Библиотека Web Vitals предоставляет средства для измерения ключевых метрик производительности веб-страниц, таких как FCP (First Contentful Paint) и TTFB (Time to First Byte). Для глубокого анализа этих метрик важную роль играет объект NavigationTimingAttribution, который позволяет детализировать источник времени, затраченного на загрузку страницы.

Основы NavigationTimingAttribution

NavigationTimingAttribution — это объект, который используется вместе с метриками Web Vitals для предоставления дополнительного контекста о времени навигации страницы. Он позволяет понять, как различные этапы загрузки веб-страницы влияют на FCP и TTFB. Объект доступен через параметр attribution при вызове функций измерения Web Vitals, таких как getTTFB и getFCP.

Структура объекта включает следующие ключевые свойства:

  • navigationType — тип навигации страницы (navigate, reload, back_forward, prerender). Позволяет различать первичную загрузку и возврат на страницу.
  • redirectCount — количество редиректов перед загрузкой основной страницы.
  • loadEventEnd — время завершения события load в миллисекундах относительно начала навигации.
  • requestStart, responseStart, responseEnd — отметки времени для сетевого запроса, которые важны для расчета TTFB.
  • workerStart — время, когда был запущен Service Worker, если он используется.
  • domInteractive и domContentLoadedEventEnd — позволяют оценить влияние DOM на FCP.

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

Измерение TTFB с использованием NavigationTimingAttribution

TTFB — это время от запроса ресурса до получения первого байта ответа от сервера. В Web Vitals TTFB измеряется с помощью функции getTTFB, которая возвращает объект метрики с полем value и объект attribution.

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

import { getTTFB } from 'web-vitals';

getTTFB((metric) => {
  console.log('TTFB:', metric.value, 'ms');
  console.log('NavigationTimingAttribution:', metric.attribution);
});

Объект metric.attribution содержит следующие детали:

  • navigationType — показывает, был ли это обычный переход или перезагрузка.
  • redirectCount — указывает, сколько редиректов предшествовало загрузке.
  • requestStart, responseStart — позволяют локализовать задержку на сервере или в сети.
  • workerStart — если используется Service Worker, позволяет увидеть, сколько времени прошло до его активации.

С помощью этих данных можно построить подробную трассировку задержки сети и сервера, что особенно важно для оптимизации TTFB на динамических сайтах.

Измерение FCP с использованием NavigationTimingAttribution

FCP фиксирует время, когда в браузере впервые был визуализирован любой контент DOM. Для FCP важно учитывать, как загрузка CSS, JavaScript и сетевых ресурсов влияет на момент отображения содержимого.

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

import { getFCP } from 'web-vitals';

getFCP((metric) => {
  console.log('FCP:', metric.value, 'ms');
  console.log('NavigationTimingAttribution:', metric.attribution);
});

Поля объекта metric.attribution позволяют:

  • Определять влияние редиректов и типа навигации на визуализацию контента.
  • Сопоставлять момент domContentLoadedEventEnd с FCP для выявления блокирующих ресурсов.
  • Определять, насколько Service Worker влияет на первый рендер.

Использование этих данных позволяет выявлять узкие места, замедляющие отображение первой визуальной информации, даже если TTFB находится в норме.

Сравнение FCP и TTFB через NavigationTimingAttribution

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

NavigationTimingAttribution объединяет эти точки зрения, предоставляя комплексный контекст:

Метрика Важные поля attribution Что можно узнать
TTFB requestStart, responseStart, workerStart Серверная задержка, работа Service Worker
FCP domInteractive, domContentLoadedEventEnd, navigationType Задержка рендеринга, блокирующие ресурсы, тип навигации

Практические рекомендации по использованию

  1. Анализ типа навигации — различие между первичной загрузкой и возвратом позволяет точнее оценивать пользовательский опыт.
  2. Учет редиректов — каждое перенаправление увеличивает TTFB и может замедлять FCP.
  3. Сервис-воркеры — workerStart помогает понять, влияет ли кэширование через SW на первые байты и рендер.
  4. Сопоставление DOM и сети — анализ domContentLoadedEventEnd относительно responseEnd выявляет блокирующие скрипты и CSS.

Эти данные дают глубокое понимание причин задержек и помогают проводить целенаправленную оптимизацию.

Оглавление