什么是 TTFB？
TTFB 是一个指标，用于测量资源请求与响应的第一个字节开始到达之间的间隔时间。
startTime 和 responseStart 之间的所用时间。TTFB 是以下请求阶段的总和：
- 重定向时间
- Service Worker 启动时间（如果适用）
- DNS 查找
- 连接和 TLS 协商
- 请求，直到响应的第一个字节到达
缩短连接设置时间和后端的延迟时间将有助于降低 TTFB。
TTFB 得分是多少？
由于 TTFB 先于以用户为中心的指标（例如 First Contentful Paint (FCP) 和 Largest Contentful Paint (LCP)），因此建议服务器以足够快的速度响应导航请求，以便第 75 百分位的用户获得 FCP 不超出“良好”阈值。一般来说，大多数网站都应力争将首字节时间缩短为 0.8 秒或更短。
如何衡量 TTFB
野外工具
实验工具
- 在 Chrome 开发者工具的“网络”面板中
- WebPageTest
使用 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 的代码段类似，只不过前者不是查询 'navigation' 条目，而是查询 'resource' 条目。此外，它还考虑到了这样一个事实：从主源加载的某些资源可能会返回 0 值，因为连接已经打开，或者资源会立即从缓存中检索。
如何改进 TTFB
我们发布了有关优化 TTFB 的深度指南，为您提供有关改进网站 TTFB 的更多指导。