什么是 TTFB?
TTFB 是一个指标,用于衡量请求资源到响应第一个字节开始到达之间的时间。
TTFB 是以下请求阶段的总和:
- 重定向时间
- Service Worker 启动时间(如果适用)
- DNS 查找
- 连接和 TLS 协商
- 请求,直到收到响应的第一个字节为止
缩短连接设置时间和后端延迟时间可以降低 TTFB。
TTFB 的其他定义
上述定义是传统定义,但随着提前提示的引入,什么是“第一个字节”还有待商榷。firstInterimResponseStart
是 responseStart
中新增的一个新计时条目,用于区分这二者,但只有 Chrome 和基于 Chromium 的浏览器支持此功能。因此,某些浏览器和工具(包括 CrUX)会从收到第一个字节(包括早期提示)开始测量。
提前提示只是提前响应的一种新方法。某些服务器允许在主正文可用之前刷新文档响应,只包含 HTTP 标头或包含 <head>
元素,这两种方式在效果上都与提前提示类似,因此也模糊了 TTFB 衡量指标的定义。
作为衡量浏览器何时收到文档可操作数据的“第一字节”的指标,所有这些定义都可以被视为有效。如果完整响应需要一些时间,提前发回数据具有真正的价值。最重要的是了解您所用工具衡量的内容,以及这些内容会受到被衡量平台的影响。这确实会使您难以比较不同平台或技术的 TTFB,因为它们使用的功能不同,对所使用的 TTFB 衡量方式的影响也不同。
TTFB 通常也被视为服务器或主机响应时间的指标。但是,它会受到直接控制之外的因素(例如重定向时间)的影响,无论是从被 CDN 命中的缓存中传送,还是必须等待更长的时间返回源服务器。这在实际数据中尤为明显 - 实验室测试通常不太受这些因素的影响,因为通常会测试最终网址,并且经常反复否定缓存更改。为了更清楚地说明这一点,Lighthouse 会报告服务器响应时间,而不是 TTFB,但其他实验室工具可能不会这样做。
什么是良好的 TTFB 得分?
由于 TTFB 会先于以用户为中心的指标(例如 First Contentful Paint (FCP) 和 Largest Contentful Paint (LCP)),因此建议您的服务器对导航请求做出足够快速的响应,以便 75% 的用户体验到“良好”阈值内的 FCP。一般而言,大多数网站应力求将 TTFB 控制在 0.8 秒或更短。
如何衡量 TTFB
现场工具
实验工具
- 在 Chrome 开发者工具的网络面板中
- WebPageTest
在 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 的代码段类似,只不过前者不是查询 'navigation'
条目,而是查询 'resource'
条目。它还考虑到了从主要来源加载的某些资源可能会返回值 0
,因为连接已打开,或者系统会立即从缓存中检索资源。
如何缩短 TTFB
如需有关提高网站 TTFB 的指南,请参阅我们的优化 TTFB 深度指南。