Skip to content

2026-07-22

/ 9 分鐘閱讀

/ Web Performance Fundamentals

其他效能指標:TTFB(首位元組時間) ​

前幾篇完整介紹了 Core Web Vitals 的三個指標(LCP、CLS、INP)以及已退役的 FID。本篇進入課程的另一個補充指標:TTFB,它衡量的是伺服器與網路層面的效能,與前面幾個指標的關注點截然不同。

什麼是 TTFB ​

TTFB(Time to First Byte,首位元組時間)量測的是:從使用者發出請求,到瀏覽器收到伺服器回傳的第一個位元組,這中間花了多少時間。

這是所有效能指標中最偏向「基礎設施」的一個。它與客戶端的 HTML、JavaScript、CSS 完全無關,量測的純粹是伺服器與網路的回應速度:資料庫查詢多快、伺服器多快開始傳送資料、網路傳輸延遲多少。

收到第一個位元組之前發生了什麼 ​

TTFB 看起來只是一個時間點,但在這之前其實發生了一連串事情。以使用者從 Google 搜尋結果點進一個網站為例:

13-time-to-first-byte

  1. startTime:使用者點擊連結,導航開始
  2. Redirect:如果有轉址(例如 analytics tracker 轉到目標 URL),每一次轉址都計入時間
  3. Service Worker:若網站有 Service Worker,瀏覽器會先經過這個階段(本課程不深入此主題)
  4. HTTP Cache:瀏覽器檢查是否有本地快取可用
  5. DNS lookup:查詢目標網域對應的 IP 位址
  6. TCP connection:與伺服器建立連線
  7. Request:送出 HTTP 請求
  8. Response(第一個位元組到達):這就是 TTFB 觸發的時刻

講師特別指出,轉址會直接增加 TTFB,過多的轉址會對效能造成實質影響。

TTFB 與 LCP 的關係 ​

TTFB 雖然不是 Core Web Vital,也不是 Google 搜尋排名的直接懲罰指標,但它會直接影響 LCP。如果伺服器遲遲無法送出第一個位元組,瀏覽器就無法開始解析 HTML、下載資源,自然也無法繪製頁面上最大的元素,LCP 必然延遲。

這是為什麼 TTFB 值得關注,即便它本身不在 Google 的排名懲罰範圍內。

Google 的建議標準 ​

Google 建議 TTFB 應在 800 毫秒以內,涵蓋所有轉址、網路跳躍、伺服器處理時間的總和。

講師坦言這個目標在現實中並不容易達到,尤其是需要進行資料庫查詢才能渲染頁面的公開網站。每一次資料庫呼叫都會消耗 TTFB 的時間預算,對公開網站來說,只要在渲染時需要進行資料庫查詢,就很難達到 800 毫秒的門檻。

複習 ​

TTFB(首位元組時間)主要量測什麼? ​

TTFB 量測主機回應請求的速度,聚焦於伺服器與網路效能,從瀏覽器收到伺服器回傳的第一個位元組那一刻開始計算。

在量測到 TTFB 之前,會經歷哪些關鍵步驟? ​

依序包含:導航開始、可能發生的轉址、Service Worker 處理、本地快取檢查、DNS 查詢、建立 TCP 連線,最後才向伺服器發出請求。

TTFB 的建議基準值是多少? ​

TTFB 理想上應低於 800 毫秒,但對於渲染時需要資料庫查詢的網站而言,這個目標可能難以達到。

TTFB 如何影響其他網頁效能指標? ​

TTFB 直接影響 LCP(最大內容繪製),因為伺服器回應緩慢會延遲頁面最大元素的渲染。

TTFB 不量測哪些網頁效能面向? ​

TTFB 不量測客戶端的程式碼效能,包含 HTML、JavaScript 或 CSS 的渲染,它專注於伺服器與網路的回應速度。

小測驗 ​

TTFB(首位元組時間)主要量測什麼? 伺服器與網路效能
根據課程內容,TTFB 的建議最大門檻是多少? 800 毫秒
在網站導航過程中,量測到 TTFB 之前會發生哪些步驟? DNS 查詢、建立 TCP 連線,以及可能發生的轉址
TTFB 如何影響其他網頁效能指標? 它直接影響最大內容繪製(LCP)
量測到 TTFB 的那一刻發生了什麼事? 瀏覽器收到伺服器回傳的第一個位元組

此文章是 FrontendMasters 上的 Web Performance Fundamentals 課程筆記

最後更新時間:

Buy Me A Coffee

系列章節 第 13 篇 / 共 41 篇

0 %
MIT Licensed | Copyright © 2025-present Wen-Hsiu's Blog
Photo by Federica Galli on Unsplash