首字节时间 (TTFB) 是一项基本指标，用于在实验室和现场衡量连接设置时间和网络服务器响应能力。它测量的是从请求资源到响应的第一个字节开始到达所经过的时间。这有助于识别 Web 服务器何时因速度过慢而无法响应请求。对于导航请求（即对 HTML 文档的请求），它先于其他有意义的加载性能指标。
startTime 和 responseStart 之间的所用时间。TTFB 是以下请求阶段的总和：
- 重定向时间
- Service Worker 启动时间（如果适用）
- DNS 查找
- 连接和 TLS 协商
- 请求，直到响应的第一个字节到达
缩短连接设置时间和后端的延迟时间有助于降低 TTFB。
TTFB 得分是多少？
由于 TTFB 发生在以用户为中心的指标（例如首次内容绘制 (FCP) 和 Largest Contentful Paint (LCP)）之前，因此我们建议您的服务器足够快速地响应导航请求，以便第 75 百分位的用户遇到“良好”阈值内的 FCP。一般来说，大多数网站都应尽量将 TTFB 控制在 0.8 秒以内。
要点：由于 TTFB 不是核心网页指标指标，因此网站并不是绝对必须具有出色的 TTFB，只要较长的 TTFB 不会使您的网站更难在重要指标上获得较高的得分。在优化加载时间时，请考虑您的网站传送内容的方式。如果某个网站快速提供初始标记，然后不得不等待脚本填充有意义的内容（如单页应用 [SPA] 通常就是这种情况），那么较低的 TTFB 尤为重要。另一方面，对于由服务器渲染的网站，不需要太多客户端工作，即使其 TTFB 更高，FCP 和 LCP 值也会比客户端渲染的网站更高。
如何衡量 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 might have a responseStart value of 0 if they're being
// cached, or if a cross-origin resource is 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 的深度指南。