加载第一个字节所需时间 (TTFB)

Barry Pollard
Jeremy Wagner

Browser Support

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

Source

什么是 TTFB？

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

网络请求时间的直观呈现。从左到右的时间分别是重定向、Service Worker 初始化、Service Worker 提取事件、HTTP 缓存、DNS、TCP、请求、早期提示 (103)、响应（与“提示卸载”重叠）、处理和加载。相关时间点包括 redirectStart 和 redirectEnd、fetchStart、domainLookupStart、domainLookupEnd、connectStart、secureConnectionStart、connectEnd、requestStart、interimResponseStart、responseStart、unloadEventStart、unloadEventEnd、responseEnd、domInteractive、domContentLoadedEventStart、domContentLoadedEventEnd、domComplete、loadEventStart 和 loadEventEnd。
网络请求阶段及其相关时间的示意图。TTFB 用于衡量 startTime 和 responseStart 之间的经过时间。

TTFB 是以下请求阶段的总和：

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

缩短连接设置时间和后端延迟时间可以降低 TTFB。

TTFB 和早期提示

103 早期提示的引入导致人们对 TTFB 衡量“第一个字节”的含义感到困惑。103 个提前提示计为“第一个字节”。finalResponseHeadersStart 是 responseStart 的额外时间条目，用于衡量要衡量的最终文档响应（通常是 HTTP 200 响应）的开始时间。

提前提示只是提前响应的一种新方法。某些服务器允许在主正文可用之前提前刷新文档响应，只包含 HTTP 标头或包含 <head> 元素，这两种方式的效果与提前提示类似。这也是所有这些都被测量为 reponseStart 和 TTFB 的另一个原因。

如果完整响应需要一些时间，提前发回数据非常有用。不过，这确实会使您难以比较不同平台或技术的 TTFB，因为它们使用的功能不同，这会影响所使用的 TTFB 衡量方式。最重要的是了解您所用工具衡量的内容，以及衡量结果会受到被衡量平台的影响。

TTFB 得分多少算好？

由于 TTFB 在以用户为中心的指标（例如首次内容渲染 [FCP] 和最大内容渲染 [LCP]）之前，因此建议您的服务器快速响应导航请求，以便75 百分位数的用户获得在“良好”阈值范围内的 FCP。作为粗略的指导，大多数网站应力求 TTFB 不超过 0.8 秒。

TTFB 值在 0.8 秒或更短时间内为良好值，大于 1.8 秒为较差值，介于二者之间的值则需要改进
良好的 TTFB 值不超过 0.8 秒，不良的 TTFB 值则大于 1.8 秒。

如何衡量 TTFB

您可以通过以下方式在实验室或现场测量 TTFB。

现场工具

实验室工具

在 JavaScript 中衡量 TTFB

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

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 深度指南。