TTFB
TTFB 是收到第一個位元組的時間，反映伺服器與網路延遲。TTFB 過高會拖累 LCP 與整體體感。
定義
TTFB（Time to First Byte）是瀏覽器從發出請求到收到第一個位元組的時間。它包含 DNS/TLS/網路與伺服器處理時間。TTFB 過高通常會導致 LCP 變差，間接影響轉換與競爭力。
為什麼重要
- TTFB 是 LCP 的上游因素，會直接拖慢首屏渲染
- 慢站體驗差，會降低使用者留存與轉換率
- 對全球流量，CDN 與邊緣部署能顯著降低 TTFB
- 搜尋引擎在評估網站效能時會考量伺服器回應速度
- 高 TTFB 會讓爬蟲抓取效率降低，影響抓取預算
- 行動裝置網路較慢，TTFB 影響更明顯
- 競爭對手網站快 0.5 秒可能就贏了轉換
怎麼做（實作重點）
- 使用 CDN 快取靜態 HTML/資源，降低地理距離延遲
- 減少後端處理時間：快取查詢結果、避免冷啟動、優化資料庫查詢
- 把可靜態化頁面用 SSG/prerender 輸出，完全繞過伺服器運算
- 啟用 HTTP/2 或 HTTP/3，減少連線建立時間
- 使用 Early Hints（103）提前推送關鍵資源
- 監控 TTFB：用 Lighthouse、WebPageTest 或 RUM 持續追蹤
- 優化 DNS 解析：使用快速 DNS 服務（Cloudflare DNS、Google DNS）
範例
html
// 瀏覽器端測量 TTFB
const [nav] = performance.getEntriesByType('navigation');
const ttfb = nav.responseStart - nav.requestStart;
console.log(`TTFB: ${ttfb.toFixed(0)}ms`);
// 使用 PerformanceObserver 即時監控
new PerformanceObserver((list) => {
const nav = list.getEntries()[0];
console.log('TTFB:', nav.responseStart - nav.requestStart);
}).observe({ type: 'navigation', buffered: true });html
// Cloudflare Worker 傳送 Early Hints
export default {
async fetch(request) {
return new Response('Hello', {
headers: {
'Link': '</styles.css>; rel=preload; as=style',
'Link': '</main.js>; rel=preload; as=script'
}
});
}
};相關連結
常見問題
關於這個詞彙的常見問答。