上一講聊到部落格平台的型態，有分成封閉和開放，取決於我們能否修改其程式碼；也討論了動態和靜態網站，主要差異在需不需要維護一個資料庫，或是每次新增文章都得走一遍建置流程。

這一講，我們將聊聊網站的一些「指標」，如此一來才不會太過主觀的做出選擇，能夠多一種維度，更量化的來評估一個網站的好壞。

怎麼衡量網站效能？

首先，我們來看看第一種衡量目標：網站效能。要衡量一個網站效能，一般人大概能夠第一個想到的就是載入速度的快慢。但有沒有其他指標能夠衡量呢？

當然有，一個叫做 CWV 這個指標就常被拿來衡量。

Core Web Vitals (CWV)

Core Web Vitals 可譯為「核心網頁指標」，簡寫為 CWV，是由 Google 在 2021 年前後推出的一組網站效能指標，由下面這三個子指標所組成：

1. LCP - Largest Contentful Paint，測量頁面主要內容載入完成所需的時間，理想值是小於等於 2.5 s
2. INP - Interaction to Next Paint，衡量網站互動（點擊、輸入）後所得到的視覺回應時間，理想值是小於等於 200 ms
3. CLS - Cumulative Layout Shift，測量頁面載入時，是否有圖片、按鈕等元素意外移動而影響操作的程度（每個意外事件會有一個分數，由「影響區域」乘上「移動距離」得出），理想值是分數的加總小於等於 0.1

簡單來說，這三個指標是在衡量網站頁面：載入的速度夠不夠快？互動流不流暢？有沒有跑版？

Lighthouse Performance Score

再來是一款開源的網站分析工具，稱作 Lighthouse。

Lighthouse 也是由 Google 所推出的工具，能夠檢查網站在多個指標上的表現，並且打一個綜合分數，藉由這樣的一個分數，就讓我們有量化的標準來判斷這個網站的效能好不好了。

目前新版的 Lighthouse（v10+）會測量的指標共有 5 個，包含前面提到的 CWV 指標 LCP、CLS，以及另外 3 個：

1. FCP - First Contentful Paint，測量頁面載入到有內容顯示在畫面上的時間，理想值是小於 1.8 s
2. SI - Speed Index，測量頁面在視覺上完成載入的速度（例如內容逐漸平穩顯示的頁面，比起一直白屏後突然全部顯示，分數會更好），理想值是小於 3.4 秒
3. TBT - Total Blocking Time，測量長任務阻塞互動的總時間，理想值是小於 200 ms

要使用 Lighthouse 跑分的話，可以簡單透過 npm install -g lighthouse 安裝，然後直接針對某個 URL 下指令：lighthouse <url>。

就可以輕鬆的得到一份 Report，列出各項指標以及加權後的分數，例如我們針對 Medium 的首頁來跑分看看：

*使用 lighthouse 跑 medium.com 之範例

最終就可以看到由五個指標產生出的 84 分綜合分數，列在一份由 Lighthouse 產出的 HTML 頁面中。

這五個指標都會有一個 0-100 的分數，透過加權平均（FCP 10%、SI 10%、LCP 25%、TBT 30%、CLS 25%）算出一個 Lighthouse Performance Score。有了量化的分數，便能更客觀的評估一個網站的效能。

Time to First Byte (TTFB)

最後談到 Time to First Byte，簡寫為 TTFB，指的是瀏覽器發送 Request 之後，收到伺服器 Response 的第一個 Byte 之間的延遲時間。

收到第一個 Byte 之前，雖然還會有建立連線的動作，例如 DNS 的查詢、建立 TCP 連線等等，但這些前置動作通常不包含在 TTFB 的計算當中。

*計算 TTFB 時間加總

我們用一個簡化版的計算 TTFB 例子來說明 TTFB 計算的時間可能包含哪些資訊，假設使用者在台北，網站原點在附近的資料中心內。

1. 瀏覽器送出 HTTP Request 到 CDN，經過半程的 RTT（Round Trip Time）5ms
2. 若 CDN 沒有 Cache 我們 Request 的內容，則會導流此 Request 到原網頁伺服器，半程 RTT 為 15ms
3. 如果有資料庫的話，可能還包含向資料庫獲取資料的時間，半程 RTT 為 15ms
4. 還包含網頁伺服器本身需要計算回傳的資料，總計 50ms

本次 Request 的 TTFB 計算結果為 5*2 + 15*2 + 15*2 + 50 = 120 (ms)，也就是說當瀏覽器發送 Request 後，拿到第一個封包的時間為 120ms。

實務上，TTFB 的理想數值是小於 200ms，如果超過一些，但是還小於 500ms，也算是可接受的數值。

值得注意的是，TTFB 的數值受蠻多因素影響的，包含地理的距離（會決定 RTT 長短）、CDN 是否命中、伺服器的等待和運算時間等等。

TTFB 並不包含在 Lighthouse、CWV 的核心分數計算內，因為其測量「第一個 Byte 的延遲時間」，主要著重在反映伺服器的處理效能和網路傳輸的延遲。當考慮到用戶看到網頁載入的體驗，才會用到 CWV 這類指標來衡量。

我們這講談了 CWV、Lighthouse 及 TTFB 這些指標和工具，都是在選擇部落格框架和部署選擇時，能用上的衡量標準，幫助做出更好的判斷。

參考資料

1. Google Search Central - Understanding Core Web Vitals and Google search results
2. Chrome for developer - Introduction to Lighthouse
3. Chrome for developer - Lighthouse performance scoring
4. Wiki - Time to first byte