Поля waitingDuration, dnsDuration, connectionDuration, requestDuration

Web Vitals предоставляет набор метрик для измерения производительности и пользовательского опыта веб-страниц. Одной из ключевых задач является понимание, какие этапы загрузки ресурса занимают наибольшее время. Поля waitingDuration, dnsDuration, connectionDuration и requestDuration позволяют анализировать сетевое взаимодействие и узкие места в обработке HTTP-запросов.

dnsDuration

dnsDuration измеряет время, затраченное на разрешение доменного имени в IP-адрес через систему DNS.

Особенности:

  • Измеряется в миллисекундах.

  • Включает только чистое время резолвинга имени, не учитывает задержки на сетевом канале или обработку HTTP.

  • Полезно для выявления проблем с DNS-серверами, медленной маршрутизацией или ненадежной инфраструктурой провайдера.

  • Если dnsDuration слишком велико, возможны оптимизации через:

    • Использование CDN с кешированием DNS.
    • Настройку DNS prefetch ().
    • Использование современных протоколов, таких как DoH (DNS over HTTPS).

Пример получения значения через Performance API:

const [resource] = performance.getEntriesByType('resource');
console.log(resource.domainLookupEnd - resource.domainLookupStart); // dnsDuration

connectionDuration

connectionDuration отражает время, затраченное на установление TCP-соединения, включая возможный TLS handshake при HTTPS.

Особенности:

  • Считается как разница между connectEnd и connectStart в объекте PerformanceResourceTiming.

  • Включает:

    • TCP handshake.
    • TLS handshake (при HTTPS).
    • Переподключения (в случае использования keep-alive или HTTP/2 возможны дополнительные этапы).

  • Высокие значения могут указывать на:

    • Сетевые задержки.
    • Проблемы с серверной конфигурацией TLS.
    • Медленное разрешение маршрута к серверу.

Пример расчета:

const [resource] = performance.getEntriesByType('resource');
const connectionDuration = resource.connectEnd - resource.connectStart;
console.log(connectionDuration);

requestDuration

requestDuration измеряет время, затраченное на отправку запроса и получение первого байта ответа от сервера.

Особенности:

  • Включает:

    • Время передачи запроса к серверу.
    • Серверное время обработки запроса.
    • Время ожидания первого байта ответа (TTFB).

  • Основная метрика для оценки производительности серверной части.

  • Высокие значения могут быть следствием:

    • Медленного серверного кода.
    • Нагрузки на базу данных.
    • Неоптимальных кэш-стратегий.

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

const [resource] = performance.getEntriesByType('resource');
const requestDuration = resource.responseStart - resource.requestStart;
console.log(requestDuration);

waitingDuration

waitingDuration — это время, которое клиент тратит на ожидание ответа после отправки запроса, до получения полного ответа.

Особенности:

  • Часто воспринимается как совокупный показатель времени ожидания сервера.

  • Рассчитывается как разница между responseStart и requestStart.

  • Полезно для анализа:

    • Нагрузки сервера.
    • Влияния CDN и кэширования.
    • Медленных API-запросов или динамических страниц.
const [resource] = performance.getEntriesByType('resource');
const waitingDuration = resource.responseStart - resource.requestStart;
console.log(waitingDuration);

Практическая интеграция в Web Vitals

Для интеграции с библиотекой Web Vitals можно использовать события onPerfEntry или прямой доступ к PerformanceResourceTiming.

Пример анализа сетевых этапов:

import { getLCP } from 'web-vitals';

getLCP((metric) => {
  const resource = performance.getEntriesByName(metric.entries[0].name)[0];
  const dnsDuration = resource.domainLookupEnd - resource.domainLookupStart;
  const connectionDuration = resource.connectEnd - resource.connectStart;
  const requestDuration = resource.responseStart - resource.requestStart;
  const waitingDuration = resource.responseStart - resource.requestStart;

  console.table({ dnsDuration, connectionDuration, requestDuration, waitingDuration });
});

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

Важные рекомендации по интерпретации

  • dnsDuration и connectionDuration преимущественно сетевые и инфраструктурные показатели.
  • requestDuration и waitingDuration отражают как сетевые, так и серверные аспекты.
  • Совокупный анализ всех четырёх полей даёт полное представление о том, где задержка возникает: клиентская сеть, сервер или промежуточные слои (CDN, прокси, балансировщики нагрузки).
  • Для динамических сайтов и SPA важно учитывать асинхронные запросы, которые также измеряются через PerformanceResourceTiming.
Оглавление