TTFB

TTFB（Time to First Byte）是一个网络性能指标，用来衡量从客户端（如浏览器）发起请求到接收到服务器响应的第一个字节所花费的时间。TTFB主要反映了服务器处理请求的速度以及网络传输延迟，通常被用作衡量网站性能、服务器性能和网络连接品质的依据之一。TTFB 计算的是整个延迟的往返时间，不仅仅是在服务器上花费的时间，还包括设备请求发送到服务器，再从服务器返回到设备的时间。

由于 TTFB 先于以用户为中心的指标，如首次内容显示（FCP）和最大内容显示（LCP）。因此建议服务器对请求的响应速度要足够快，应努力使 TTFB 少于 0.8秒，以使 P75 的用户体验在良好的 FCP 分数。TTFB 不是 核心 Web 指标，因此，只要不妨碍它们在重要的指标上获得良好的分数，网站并不绝对需要达到“良好”的 TTFB 指标。TTFB 是在实验室和现场测量连接建立时间和 Web 服务器响应能力的一个基础指标，有助于识别 Web 服务器何时对请求的响应速度太慢。对 HTML 文档的请求，该指标先于其他所有的加载性能指标。

TTFB 是影响网站速度的一个因素，也是网站速度优化时的一个重要指标，但只代表网站服务器的响应速度。Google 建议移动网站使用 TTFB 的时间应低于 1.3s，rackAID 建议纯静态网站的 TTFB 应该在 100ms 以下，动态网站 TTFB 应该在 500ms 以内。

TTFB包含以下几个主要组成部分：

1. 请求传输时间：用户在浏览器输入网址或点击链接后，浏览器向服务器发送HTTP请求的时间。
2. 服务器处理时间：服务器接收到客户端请求后，进行处理所需的时间。这取决于服务器的硬件性能、软件优化以及当前服务器的负载情况等。这段时间还包括了服务器可能会进行的数据库查询、服务器端的缓存处理或其他必要的操作。
3. 响应传输时间：服务器将响应数据传送回浏览器的时间。这部分时间受到网络延迟、带宽限制等因素影响。

影响TTFB（Time to First Byte）的因素有很多，主要包括以下几点：

1. 网络延迟：用户与服务器之间的物理距离、网络设备（如路由器、交换机等）的数量和质量以及互联网服务提供商(ISP)都会影响网络延迟。网络延迟越高，TTFB 相应地就会越长。
2. 服务器处理能力：服务器的硬件配置（如 CPU、内存等）以及服务器软件的性能都会影响到 TTFB。若服务器处理能力较低，在高负载情况下可能导致处理时间变长，从而增加 TTFB。
3. 服务器负载：服务器当前的工作负载会影响其处理请求的速度。如果服务器在处理较多并发请求，可能会导致单个请求的处理时间增加，进而影响TTFB。
4. 应用程序性能：网站应用程序的编程语言、框架、数据库结构和查询优化等都会对 TTFB 产生影响。效率较差的代码或者查询可能导致服务器处理时间增加，从而增大 TTFB。
5. 数据库性能：如果向数据库发送请求所需时间较长，这会影响请求处理时间，从而导致 TTFB 增加。数据库优化可以降低查询延迟，提高性能，从而降低 TTFB。
6. 缓存策略：通过使用服务器端缓存（如页面缓存、对象缓存等）以避免重复计算和数据库查询，可以有效降低服务器处理时间，进而缩短 TTFB。
7. 内容分发网络（CDN）：CDN 将网站内容分发至靠近用户的服务器节点，有助于降低网络延迟，从而缩短 TTFB。
8. 响应数据大小：HTTP 响应的数据大小直接影响传输时间。通过减小响应体积（压缩、删除不必要的空白字符等）可以缩短传输时间，从而降低 TTFB。

优化方式：

1. 优化服务器性能：通过增加硬件资源、升级软件版本或调整服务器配置来提高服务器的处理能力。
2. 减少数据库查询：对数据库查询进行优化，避免不必要的查询操作，缩短数据库查询时间。
3. 使用 CDN（内容分发网络）：通过将网站静态资源放置在地理位置更接近用户的CDN节点上，可以减少网络延迟，从而降低 TTFB。
4. 启用服务器端缓存：通过缓存静态内容、页面片段或者整个页面，可以降低服务器处理请求的时间。
5. 减小响应数据大小：对 HTTP 响应中的数据进行压缩和优化，可以降低传输数据所需的时间。

TTFB 测量

new PerformanceObserver((entryList) => {
  const [pageNav] = entryList.getEntriesByType('navigation');

  console.log(`TTFB: ${pageNav.responseStart}`);
}).observe({
  type: 'navigation',
  buffered: true
});

参考文档：

• Navigation Timing API
• Web TTFB