什么是 TTFB？
TTFB 指标用于衡量从请求资源到响应的第一个字节开始到达的时间点之间的时长。
startTime 和 responseStart 之间的用时。TTFB 是以下请求阶段的总和：
- 重定向时间
- Service Worker 启动时间（如果适用）
- DNS 查找
- 连接和 TLS 协商
- 请求，直到收到响应的第一个字节为止
减少连接设置时间和后端的延迟可以降低 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。以下示例展示了如何创建 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 的深度指南。