WordPress 速度優化 TTFB 淺談

WordPress TTFB

談到 WordPress 速度優化,會想到主機性能、加入快取外掛、資料表的優化,反而 TTFB 很少人談論,TTFB (time to first byte),第一個字節的反應時間,我覺得在討論 WordPress 速度優化時,不能少了 TTFB 這部分。

Advertisement

TTFB 的概念是甚麼?

TTFB 代表第一個字節反應的時間;簡單的說,就是當讀者在瀏覽器這一端,點下你的網站時,到你的主機開始接收第一個數據字節之前所等待的時間。

換句話說,瀏覽器獲取數據所需的時間越長,你的網站顯示頁面所需的時間就越長。

有的人會把 TTBF 與網站 Load Time 或 Requests 混在一起,其實這是時間點有不同的計算方式,優化方法也有所不同。

如何測量 TTFB 的反應時間?

知道 TTFB 代表的是甚麼後,該如何測量我的網站的 TTFB,最簡單的方法就是使用 Google Chrome DevTools,Chrome F12 來測量 TTFB 的時間。

Get started with Google Chrome's built-in web developer tools.

Chrome 測量 TTFB

如圖:綠色的長條圖就是 TTFB 所需時間,時間當然是越短越好。我優化過最短的 TTFB 的網站,是使用 GCP 的台灣主機,TTFB 只有 10MS 左右,有人說網站會有秒開的感覺,這跟 TTFB 的時間長短是有關係的,後面的內容會說明是甚麼原因。

在 Pingdom 線上工具測試的結果,Wait 黃色長條是 TTFB 的時間:

Pingdom 工具測試 TTFB

WebPageTest 測試 TTFB 的結果,First Byte 指的是 TTFB 的時間:

WebPageTest 測量 TTFB

從以上的線上測量工具,可以看出我的網站的 TTFB 的時間,接下來說明:

影響 TTFB 的三個因素

  • 讀者 (客戶端) 的請求通過網絡到 Web 伺服器所需的時間。
  • Web 伺服器處理請求並生成回應所需的時間。
  • Web 伺服器所產生的回應通過網絡回傳到瀏覽器 (客戶端) 所需的時間。
簡單的說,客戶端 >> 主機 >> 客戶端,這個相對關係之間的時間題。

從上面的三個影響因素後,我們將如何縮短 TTFB 的時間:

如何縮短 TTFB 的反應時間

使用一個快速的 WordPress 主機:

這是一個最快速的做法,優化後端基礎架構性能,包含硬體設備;TTFB 中的第二個因素是伺服器處理請求和生成響應所花費的時間,基本上主機處理時間也是會影響您網站的所表現的結果。

挑選一個快速的 DNS (Domain Name Server) 主機:

大家常常忽略了這個問題,DNS 的作用是將域名和 IP 位址相互對映的一個分散式資料庫,瀏覽器 (客戶端) 輸入一個網址 (yungke.me),DNS 主機會快速查詢 Domain Name 和 IP 對應資料,而指向該 IP 位置的主機。

這些對應的動作,就是上述 TTFB 中的第一個影響因素。

您可以利用 SolveDNS 速度測試工具進行 DNS 主機測試,以下是 yungke.me 網站所使用的 Name.com DNS 為例:

SolveDNS 測試 Name.com DNS

CloudFlare 的免費 DNS 和響應時間:

SolveDNS 測試 Cloudflare DNS

您也可以測試一下自己的 DNS 主機的響應時間,有的 DNS 主機的響應時間會慢到 100ms 以上,如果網站伺服器又不快速,TTFB 的時間被拉長是必然的了。

快取您的 WordPress:

在 WordPress 網站上使用快取方式,也是一個減少 TTFB 時間的方式;用對的快取方式不只減少加載時間,還可以所短 TTFB,我用一個網站安裝免費 KeyCDN 的 Cache Enabler 快取外掛來做測試,很明顯的啟動外掛後的 TTFB 的效果。

A lightweight caching plugin for WordPress that makes your website faster by generating static HTML files plus WebP support.

未啟動 Cache Enabler Plugin,TTFB 為 124ms
Cache Enabler 未啟動

啟動 Cache Enabler Plugin,TTFB 為 44ms
啟動 Cache Enabler 的 TTFB

伺服器的頻寬與距離:

快速的網路連接及最接近客戶端的伺服器是一個重要部分,當 Web 伺服器所產生的回應通過網絡回傳到瀏覽器 (客戶端),這是第三個因素。

加載網站頁面所需的時間不僅取決於連接的速度,還取決於該網站主機的頻寬;把網路連接比喻是一條水管,頻寬越大,水管越大,主機端可以下載的數據就越多。簡單的說,瀏覽器 (客戶端) 可以很快的看到 Web 伺服器所回應的數據 (文字和圖片)。

主機的頻寬

所以,為何我前面所說的,我曾使用 GCP 台灣主機,TTFB 會有這麼低 ms,剛好符合快速的 DNS 主機、WordPress 快取、客戶端與 GCP 主機有最短的距離。

如果您的客戶端都在台灣,以上的作法是可以縮短 TTFB 的時間,如果客戶端是在全世界,那你有必要增加 CDN 的服務。

KeyCDN Tools 工具測量 TTFB:

Web performance test to analyze the speed of individual assets from 14 different locations. It returns a breakdown of TTFB, DNS, TLS, and connection times.

KeyCDN 工具測量 TTFB

由上圖看見,我的網站沒有做 CDN,除了日本、台灣有不錯的 TTFB 外,其他地區的 TTFB 都很悲慘,相對的,這些地區的客戶端開啟我的網站,也不會很快。

另一個減少 TTFB 最好的方法,使用 CDN (內容傳遞網路)。

如果您的網站為全球各地的訪問者提供服務,CDN 則會大大降低您的 TTFB,就如我所述,伺服器的位置非常重要,最好就在客戶端所在地。

CDN 示意圖

結語

這只是一個對 TTFB 的概述,讓您了解 TTFB 與網站間的關係,國外的技術網站對 TTFB 的優化說明越來越多,您除了很努力優化 WordPress 速度外,TTFB 也是一個不可忽略的優化。

參考資料:

Improving Search Rank by Optimizing Your Time to First Byte

In August, Zoompf published new research showing a clear correlation between the web performance of "Time to First Byte" and Search Engine ranking. In this arti...

We Analyzed 143,827 URLs and Discovered the Overlooked Speed Factors That Impact Google Rankings

Let me start out with an obvious fact:  Site speed matters for SEO. Any junior SEO could tell you that. But I wanted to know something more important: how and w...

What is server response time?

How to make your web server respond quicker to requests for optimal pagespeed.

How to Reduce TTFB to Improve WordPress Page Load Times

Check out some of these easy ways to reduce TTFB on your WordPress site. Fast hosting, utilizing a CDN, caching, and DNS all come into play.

攝影師:Matthis Villars,連結:Pexels

Follow me

yungke

視咖啡如命的癮君子,沒有厲害的技術,只會小打小鬧的電腦工程師,其實是個打雜小弟,修電燈、水管也都是我的工作。
yungke
Follow me
Advertisement

Follow Me

查看本文
喜愛 Like 點擊數!!
Back to top