减少 Time to First Byte 的 cache duration 子部分

减少 Time to First Byte 的 cache duration

Time to First Byte (TTFB) 可以分解为以下子部分：

• Waiting + Redirect（或等待时长）
  
• Worker + Cache（或 cache duration）
• DNS（或 DNS 时长）
• Connection （或连接时长）
• Request（或请求时长）

想要优化 Time to First Byte？本文深入分析了 Time to First Byte 的等待时长部分。如果您想了解或修复 Time to First Byte 但不清楚等待时长的含义，请先阅读什么是 Time to First Byte和修复和识别 Time to First Byte 问题再阅读本文

注意：通常 Time to First Byte 的 Cache Duration 部分不是瓶颈。如果您 a) 正在使用 service worker，b) 像我一样是页面速度爱好者，请继续阅读！

通常 Time to First Byte 的 cache duration 子部分不是瓶颈，通常在 10 到 20 毫秒内完成。使用 service worker 时，可接受的时间低于 60 毫秒。

Service worker 如何影响 Time to First Byte？

Service worker 对 Time to First Byte (TTFB) 既可以产生正面影响也可以产生负面影响，但仅限于使用 Service Worker 的网站。 

以下是 service worker 可能影响 TTFB 的方式：

由于 Service Worker 启动时间导致 TTFB 变慢：workerStart 值表示在请求的资源存在 Service Worker 时，Service Worker 启动所需的时间。此启动时间包含在 TTFB 计算中。 如果 Service Worker 需要从终止状态启动或恢复，会增加初始响应时间的延迟，从而增加 TTFB。

通过缓存加速 TTFB：通过使用 stale-while-revalidate 等缓存策略，service worker 可以直接从缓存提供内容（如果可用）。这使得频繁访问的资源具有近乎即时的 TTFB，因为浏览器不需要等待服务器响应。此策略仅适用于不经常更新的内容，不适用于需要最新信息的动态生成内容。

使用 app-shell 加速 TTFB：对于客户端渲染的应用程序，app shell 模型中 service worker 从缓存提供基本页面结构并随后动态加载内容，基础页面的 TTFB 几乎降为零。

未优化的代码导致 TTFB 变慢：复杂且低效的 service worker 可能会减慢缓存查找过程，从而也减慢 TTFB。

Service worker 对页面速度有害吗？不（通常）完全不会！虽然 Service Worker 由于启动时间可能最初会增加 TTFB，但它们拦截网络请求、管理缓存和提供离线支持的能力从长远来看可以带来显著的性能提升，尤其是对于网站的回访用户。

如何测量 Time to First Byte 的 cache duration 子部分

您可以使用以下代码片段测量 Time to First Byte 的 cache duration 子部分：

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

  // get the relevant timestamps
  const activationStart = navigationEntry.activationStart || 0;
  const waitEnd = Math.max(
    (navigationEntry.workerStart || navigationEntry.fetchStart) -
    activationStart,
    0,
  );
  const dnsStart = Math.max(
    navigationEntry.domainLookupStart - activationStart,
    0,
  );

  // calculate the cache duration
  const cacheDuration = dnsStart - waitEnd;

  // log the results
  console.log('%cTTFB cacheDuration', 'color: blue; font-weight: bold;');
  console.log(cacheDuration);

}).observe({
  type: 'navigation',
  buffered: true
});

如何发现由高 cache duration 引起的 TTFB 问题

要了解 cache duration 对真实用户体验的影响，您需要使用 CoreDash 等 RUM 工具。Real User Monitoring 可以让您详细跟踪 Core Web Vitals。

在 CoreDash 中，只需导航到"Time to First Byte"并查看分解详情。这将显示 TTFB 所有子部分的分解，并准确告诉您第 75 百分位的 cacheDuration 耗时

/p>

如何最小化 service worker 缓存时间影响

使用 Service Worker 时优化 TTFB 的方法：

• 最小化 Service Worker 脚本的复杂性以减少启动时间。
• 在 Service Worker 中实施高效的缓存策略。
• 考虑在 Service Worker 安装期间预缓存关键资源。
• 定期监控和分析 Service Worker 对网站 TTFB 的影响。

通过仔细管理 Service Worker 的实现并了解其对 TTFB 的影响，开发者可以在初始开销与 Service Worker 提供的长期性能优势之间取得平衡。