第一個位元組時間 (TTFB)

Jeremy Wagner

Barry Pollard

瀏覽器支援

• 43
• 12
• 31
• 11

來源

第一個位元組時間 (TTFB) 是一項基礎指標，可用來評估研究室和實際環境中的連線設定時間和網路伺服器回應速度。會測量從資源收到要求到回應第一個位元組開始送達之間的時間。如此一來，即可識別網路伺服器回應要求速度過慢的情況。若是導覽要求 (也就是要求 HTML 文件)，系統會優先顯示其他所有有意義的載入效能指標。

網路要求階段及其相關時間的圖表。TTFB 會測量從 startTime 到 responseStart 之間的經過時間。

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

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

縮短連線設定時間和後端的延遲時間有助於降低 TTFB。

TTFB 分數代表什麼？

TTFB 發生在以使用者為中心的指標 (例如首次顯示內容所需時間 (FCP) 和最大內容繪製 (LCP)) 之前，因此建議您的伺服器能迅速回應導覽要求，這樣就能在第 75 個百分位數的使用者遇到 FCP 低於「良好」門檻的情況。一般而言，大多數網站應盡力將 TTFB 控制在 0.8 秒以內。

良好的 TTFB 值不得超過 0.8 秒，而低值則大於 1.8 秒。

重點：由於 TTFB 不是網站體驗核心指標指標，因此只要 TTFB 的時間越長，網站就難以提升相關指標的分數，網站不一定要擁有良好的 TTFB。如要縮短載入時間，請考慮網站提供內容的方式。如果網站可以快速提供初始標記，然後等待指令碼填入有意義的內容，和單頁應用程式 (SPA) 一樣，低 TTFB 格外重要。另一方面，如果是伺服器算繪網站，且無需進行太多用戶端作業，即使網站的 TTFB 較高，這類網站的 FCP 和 LCP 值仍可能獲得較佳的 FCP 和 LCP 值。

如何評估 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
});

注意： 並非所有瀏覽器都支援 PerformanceObserver 或其 buffered 旗標。如要盡可能讓瀏覽器支援範圍最廣，請考慮採用 web-vitals 套件，本頁後續會討論相關內容。

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 might have a responseStart value of 0 if they're being
    // cached, or if a cross-origin resource is 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 值，或是立即從快取中擷取資源。

提示： 如果跨來源伺服器無法設定 Timing-Allow-Origin 標頭，就無法評估跨來源要求的 TTFB。

如何改善 TTFB

如需改善網站的 TTFB 指南，請參閱最佳化 TTFB 的詳細指南。