Различное значение TTFB в Chrome и Web Vitals

Question

Я замечаю разные значения TTBF на вкладке сети Chrome по сравнению с зарегистрированными WebVitals. В идеале это должно быть точно такое же значение, но иногда наблюдается большая разница до 2-3 секунд для определенных сценариев.

Я использую Next.js и reportWebVitals для регистрации соответствующих показателей производительности.

Вот образец репо , URL приложения и скриншоты для справки.

С помощью performance.timing.responseStart - performance.timing.requestStart возвращает более подходящее значение, чем полагается на значение TTFB WebVitals.

Есть идеи, что может пойти не так? Это ошибка в WebVitals, и я не должен ее использовать или ошибаться с моей стороны при использовании / регистрации значений?

Answer 1

Номер предоставлен reportWebVitals (и лежащая в основе библиотека ) обычно считается правильным TTFB в сообществе веб-разработчиков (хотя, честно говоря, есть некоторые различия в реализации для разных инструментов).

Я считаю, что DevTools помечает это меньшее число «Ожидание (TTFB)» как неформальный намек для пользователя, что это за «ожидание», чтобы дать ему контекст, и потому что это обычно большая часть времени TTFB.

Однако с точки зрения пользователя, время до первого байта действительно должно включать в себя все время с момента, когда пользователь начинает переход на страницу, до момента, когда сервер отвечает первым байтом этой страницы, что будет включать время для Разрешение DNS, согласование соединения, перенаправления (если есть) и т. Д. DevTools действительно включает в себя по крайней мере некоторую информацию об этом дополнительном времени на этом снимке экрана, просто разделенную на различные периоды над якобы номером TTFB (см. «Очередь», «Остановлено», и записи «Запрос отправлен»).

Обычно спецификацию Resource Timing можно использовать как источник правды для разговоров о веб-производительности. Он помещает время 0 как начало навигации :

На протяжении всей этой работы все значения времени измеряются в миллисекундах с момента начала навигации по документу [ HR-TIME-2 ]. Например, начало навигации по документу происходит в момент времени 0.

А затем определяет <tcode id="48592684"></tcode> в качестве

Время сразу после того, как HTTP-парсер пользовательского агента получит первый байт ответа

Так performance.timing.responseStart - performance.timing.navigationStart сам по себе является измерением TTFB браузером (или performance.getEntriesByType('navigation')[0].responseStart в новом API-интерфейсе Navigation Timing Level 2), и это число web-vitals также используется для TTFB .