Time to First Byte 第一字节时间 (TTFB)
TTFB 是什么? #
TTFB 是一个衡量对资源的请求和响应的第一个字节开始和到达之间时间的指标。
startTime和responseStart之间的时间损耗。
TTFB 是下列请求节点的时间损耗汇总：
- Redirect time 重定向时延
- Service worker 启动时延（如果适用）
- DNS 查询时延
- 建立连接和 TLS 所消耗时延
- 请求，直到响应的第一个字节到达为止的时延
减少连接建立和后端服务的时延将有助于降低 TTFB
什么是好的 TTFB 分数? #
由于 TTFB 先于以用户为中心的指标，如首次内容显示（FCP）和最大内容显示（LCP），因此建议您的服务器对请求的响应速度要足够快，以使 P75 的用户体验在良好的 FCP 分数。作为一个粗略的指导，大多数网站应努力使 TTFB 少于 0.8秒 。
如何测量 TTFB #
实际场景可选工具 #
实验场景可选工具 #
- 在 Chrome 开发者工具的 网络面板
- WebPageTest
在 JavaScript 中测量 TTFB #
- Chrome 43, Supported 43
- Firefox 31, Supported 31
- Edge 12, Supported 12
- Safari 11, Supported 11
可以在具备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 library 也能在浏览器内测量 TTFB 指标，代码将更加简洁：
import {onTTFB} from 'web-vitals';
// Measure and log TTFB as soon as it's available.
onTTFB(console.log);Measuring resource requests #
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 的代码片断类似，只不过不是查询 "导航" 条目，而是查询 "资源" 条目。它还说明了这样一个事实，即一些从主源加载的资源可能会返回一个 "0" 的值，因为连接已经打开，或者一个资源是瞬间从缓存中获取的。
如何优化 TTFB #
优化 TTFB 在很大程度上取决于您的托管供应商和后端服务。TTFB 值高可能是由于以下一个或多个问题造成的。
- 托管服务商的基础设施能力不足，无法处理高流量负载
- 网络服务器的内存不足，可能导致 系统颠簸
- 未经优化的数据库
- 不良的数据库服务器配置
通常通过选择一个合适的托管供应商是优化 TTFB ，其基础设施可确保高正常运行时间和响应能力。这与 CDN 相结合，可以起到帮助作用。
其他优化高 TTFB 时延和相关感知延迟的机会包括：
- 避免多次重定向.
- 提前向跨域资源源建立连接 Preconnect 。
- 将源提交给HSTS预加载列表，以消除 HTTP-HTTPS 重定向延迟。
- 使用 HTTP/2 or HTTP/3。
- 考虑预测性预取，为没有指定减少数据使用偏好的用户提供快速页面导航。
- 在可能和适当的情况下，使用服务器端生成（SSG）来代替SSR的标记。