第一個位元組時間 (TTFB)

Jeremy Wagner

Barry Pollard

什麼是 TTFB？

TTFB 是一種指標，用於測量從資源要求到回應第一個位元組開始之間的時間。

TTFB 是下列要求階段的總和：

• 重新導向時間
• Service Worker 啟動時間 (如適用)
• DNS 查詢
• 連線和 TLS 交涉
• 要求，直到回應的第一個位元組送達為止

縮短連線設定時間與後端的延遲時間，會導致 TTFB 降低。

TTFB 分數代表什麼？

TTFB 會優先採用以使用者為中心的指標 (例如首次顯示內容所需時間 (FCP) 和最大內容繪製 (LCP))，因此建議您的伺服器回應導覽要求的速度夠快，以便使用者在「良好」門檻內體驗 FCP。一般而言，大多數網站應盡力將第一個位元組在 0.8 秒內。

如何評估 TTFB

您可以透過研究室或實際工作，以下列方式測量 TTFB。

現場工具

• Chrome 使用者體驗報告
• web-vitals JavaScript 程式庫

研究室工具

• 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 的程式碼片段，只是您改為查詢 'resource' 項目，而不是查詢 'navigation' 項目。也會考量到部分從主要來源載入的資源可能會傳回 0 值，因為該連線已經開啟，或者是立即從快取中擷取資源。

如何改善 TTFB

我們發布了一份關於最佳化 TTFB 的深入指南，可讓您進一步瞭解如何改善網站的 TTFB。