第一個位元組時間 (TTFB)

Barry Pollard
Jeremy Wagner

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 11.

Source

什麼是 TTFB？

TTFB 是用來測量從要求資源到回應的首個位元組開始傳送所需的時間。

網路要求時間點的視覺化呈現。從左到右的時間點分別是重新導向、Service Worker 初始化、Service Worker 擷取事件、HTTP 快取、DNS、TCP、要求、提早提示 (103)、回應 (與提示卸載重疊)、處理和載入。相關聯的時間點包括 redirectStart 和 redirectEnd、fetchStart、domainLookupStart、domainLookupEnd、connectStart、secureConnectionStart、connectEnd、requestStart、interimResponseStart、responseStart、unloadEventStart、unloadEventEnd、responseEnd、domInteractive、domContentLoadedEventStart、domContentLoadedEventEnd、domComplete、loadEventStart 和 loadEventEnd。
網路要求階段和相關時間的示意圖。TTFB 會評估 startTime 和 responseStart 之間的時間間隔。

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

  • 重新導向時間
  • Service worker 啟動時間 (如有)
  • DNS 查詢
  • 連線和 TLS 協商
  • 要求，直到回應的第一個位元組到達

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

TTFB 和早期提示

103 Early Hints 的推出，讓人對「第一個位元組」TTFB 的測量方式感到困惑。103 早期提示會計為「第一個位元組」。finalResponseHeadersStart 是 responseStart 的額外時間記錄，用於測量要評估的最終文件回應 (通常為 HTTP 200 回應) 的開始時間。

提示早提供只是提早回應的最新例子。部分伺服器允許在主要內容可用之前，提早清除文件回應，方法是傳送 HTTP 標頭或 <head> 元素，這兩種方法的效果都與提早提示類似。這也是為什麼所有這些都會以 reponseStart 和 TTFB 的形式進行評估。

如果完整回應需要較長的時間，提早傳回資料就非常有用。不過，這確實會讓我們難以比較不同平台或技術的 TTFB，因為這些平台或技術採用的功能不同，對 TTFB 的影響也不同。最重要的是瞭解您使用的工具所評估的項目，以及評估項目會受到評估平台的影響程度。

什麼是良好的 TTFB 分數？

由於 TTFB 會先於以使用者為中心的指標 (例如 首次顯示內容所需時間 (FCP) 和 最大內容繪製時間 (LCP))) 執行，因此建議伺服器快速回應導覽要求，讓75 個百分位數的使用者都能在「良好」門檻內體驗FCP。作為粗略的參考依據，大多數網站應力求 TTFB 為 0.8 秒以下。

良好的 TTFB 值為 0.8 秒以下，不良的值大於 1.8 秒，介於兩者之間的值則需要改善
良好的 TTFB 值為 0.8 秒以下，不良的值則為 1.8 秒以上。

如何評估 TTFB

您可以透過下列方式，在實驗室或實際環境中測量 TTFB。

欄位工具

實驗室工具

  • 在 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 的深入指南。