首字节时间 (TTFB)

Barry Pollard
Jeremy Wagner

浏览器支持

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 11.

来源

什么是 TTFB？

TTFB 是一个指标，用于衡量从请求资源到响应的第一个字节开始到达之间的时间。

A visualization of network request timings. The timings from left to right are Redirect, Service Worker Init, Service Worker Fetch event, HTTP Cache, DNS, TCP, Request, Early Hints (103), Response (which overlaps with Prompt for Unload), Processing, and Load. The associated timings are redirectStart and redirectEnd, fetchStart, domainLookupStart, domainLookupEnd, connectStart, secureConnectionStart, connectEnd, requestStart, interimResponseStart, responseStart, unloadEventStart, unloadEventEnd, responseEnd, domInteractive, domContentLoadedEventStart, domContentLoadedEventEnd, domComplete, loadEventStart, and loadEventEnd.
网络请求阶段及其相关计时的图示。TTFB 衡量 startTime 和 responseStart 之间经过的时间。

TTFB 是以下请求阶段的总和

  • 重定向时间
  • Service Worker 启动时间（如果适用）
  • DNS 查询
  • 连接和 TLS 协商
  • 请求，直到响应的第一个字节到达为止

减少连接建立时间和后端延迟可以降低您的 TTFB。

TTFB 和 Early Hints

引入 103 Early Hints 导致人们对 TTFB 衡量的“第一个字节”感到困惑。103 Early Hints 算作“第一个字节”。finalResponseHeadersStart 是 responseStart 的一个附加计时条目，用于衡量要测量的最终文档响应（通常为 HTTP 200 响应）的开始时间。

Early Hints 只是提前响应的一个新示例。某些服务器允许在主内容可用之前提前刷新文档响应，无论是仅包含 HTTP 标头，还是包含 <head> 元素，这两者都可以被认为在效果上类似于 Early Hints。这也是为什么所有这些都以 reponseStart 以及 TTFB 衡量的另一个原因。

如果完整响应需要更长时间，那么尽早发回数据确实有价值。然而，这使得比较不同平台或技术之间的 TTFB 变得困难，这取决于它们使用的功能以及这如何影响正在使用的 TTFB 测量。最重要的是了解您正在使用的工具衡量什么，以及这如何受到被衡量平台的影响。

TTFB 的良好分数是多少？

由于 TTFB 先于 以用户为中心的指标（例如 首次内容绘制 (FCP) 和 最大内容绘制 (LCP)），因此建议您的服务器足够快地响应导航请求，以便 75% 的用户在“良好”阈值内体验 FCP。作为大致指南，大多数网站应力争将 TTFB 控制在 0.8 秒或更短。

Good TTFB values are 0.8 seconds or less, poor values are greater than 1.8 seconds, and anything in between needs improvement
良好的 TTFB 值是 0.8 秒或更短，而较差的值大于 1.8 秒。

如何衡量 TTFB

TTFB 可以在 实验室 或 实际场景 中通过以下方式进行衡量。

实际场景工具

实验室工具

在 JavaScript 中衡量 TTFB

您可以使用 Navigation Timing API 在浏览器中衡量 导航请求 的 TTFB。以下示例展示了如何创建一个 PerformanceObserver，该观察器监听 navigation 条目并将其记录到控制台

new PerformanceObserver((entryList) => {
  const [pageNav] = entryList.getEntriesByType('navigation');

  console.log(`TTFB: ${pageNav.responseStart}`);
}).observe({
  type: 'navigation',
  buffered: true
});

web-vitals JavaScript 库 也可以更简洁地在浏览器中衡量 TTFB

import {onTTFB} from 'web-vitals';

// Measure and log TTFB as soon as it's available.
onTTFB(console.log);

衡量资源请求

TTFB 适用于所有请求，而不仅仅是导航请求。特别是，托管在跨域服务器上的资源可能会由于需要建立与这些服务器的连接而引入延迟。要在实际场景中衡量资源的 TTFB，请在 PerformanceObserver 中使用 Resource Timing API

new PerformanceObserver((entryList) => {
  const entries = entryList.getEntries();

  for (const entry of entries) {
    // Some resources may have a responseStart value of 0, due
    // to the resource being cached, or a cross-origin resource
    // being served without a Timing-Allow-Origin header set.
    if (entry.responseStart > 0) {
      console.log(`TTFB: ${entry.responseStart}`, entry.name);
    }
  }
}).observe({
  type: 'resource',
  buffered: true
});

前面的代码片段与用于衡量导航请求的 TTFB 的代码片段类似，不同之处在于，您查询的是 'resource' 条目而不是查询 'navigation' 条目。它还考虑了这样一个事实，即从主源加载的某些资源可能会返回 0 值，因为连接已打开，或者资源是从缓存中即时检索的。

如何改进 TTFB

有关改进网站 TTFB 的指南，请参阅我们的 优化 TTFB 深入指南。