Day 04 - 開始動手，以 CloudFront 作為自己的第一個 CDN 方案(Part II) - 如何量測

當完成第一組設定之後，從此過著幸福快樂的日子了。。嗎?

量測

在往幸福的遠方邁進之前，我們先來驗證網站反應有無變快。

指標

要量測，不可以只憑感覺，要能量化。一般常用的評量方式，會參考以下兩個數值:

1. TTFB (TimeToFirstByte): 從 client 端送出請求開始，到"開始"收到從 Server 端回應的時間。這時間越短越好。(如果你是玩遊戲的人，可以用 ping 值做類比，越低越好)
   

2. AVG Bitrate: 內容開始傳送時的傳輸速率: 傳輸資料量(檔案大小)/傳輸使用的時間(Transfer Time)。代表實際使用的頻寬多寡。
   
   上方兩張圖片來源: Web.Dev + 後續我的調整。

比較對象

既然是使用 CDN 的差異，比較目標自然就是 未經過 CloudFront v.s. 有經過 CloudFront

1. 未經過 CloudFront 的網址 http://ironman2023-alb-1744908637.ap-northeast-1.elb.amazonaws.com/
2. 有經過 CloudFront 的網址 http://dwnhikcdqi4zf.cloudfront.net/

比較方式

我們可以透過以下方式模擬客戶的請求，並根據測試結果來評估使用 CDN 的效能改善差異。
方式1. 透過 curl 測試

• a. 將以下內容存成一個檔案，取名叫做 curl-format.txt

status_code:	%{http_code}\n
time_namelookup:  %{time_namelookup}\n
time_connect:  %{time_connect}\n
time_appconnect:  %{time_appconnect}\n
time_pretransfer:  %{time_pretransfer}\n
time_redirect:  %{time_redirect}\n
time_starttransfer:  %{time_starttransfer}\n
----------\n
time_total:  %{time_total}\n

• b. 測試指令。
  $ curl -so /dev/null -w @curl-format.txt $TargetURL
  測試指令及參考結果如下

1-1 測試未經 CDN(CloudFront) - http://ironman2023-alb-1744908637.ap-northeast-1.elb.amazonaws.com/

$ curl -so /dev/null -w @curl-format.txt http://ironman2023-alb-1744908637.ap-northeast-1.elb.amazonaws.com/ 

#測試結果
curl -so /dev/null  -w @curl-format.txt http://ironman2023-alb-1744908637.ap-northeast-1.elb.amazonaws.com/
status_code:	200
time_namelookup:  0.004231
time_connect:  0.042736
time_appconnect:  0.000000
time_pretransfer:  0.042776
time_redirect:  0.000000
time_starttransfer:  0.081512 <---- 0.0815秒後開始傳 (TTFB[1] 81.5ms)
----------
time_total:  0.081992 

• 連續測試多次(ex: n=10)，得到了平均 約為 83ms 的反應時間[1]

1-2 測試經 CDN(CloudFront) - http://dwnhikcdqi4zf.cloudfront.net/

$ curl -so /dev/null -w @curl-format.txt http://dwnhikcdqi4zf.cloudfront.net/

#測試結果
status_code:	200
time_namelookup:  0.005648
time_connect:  0.011380
time_appconnect:  0.027294
time_pretransfer:  0.028336
time_redirect:  0.000000
time_starttransfer:  0.036729
----------
time_total:  0.036848

• 連續測試多次(ex: n=10)，得到了平均 約為 16ms 的反應時間[2]

如果以比例計算，居然有 80% 以上的進步。
(83-16)/83 * 100% = 80.72%

方式 2: 使用 pingdom tools 這類第三方服務測試來協助觀察
測試方法很簡單，直接連上網站輸入網址即可。
參考結果:

2-1 測試未經 CDN(CloudFront) - http://ironman2023-alb-1744908637.ap-northeast-1.elb.amazonaws.com/ - 227 ms

2-2 測試經 CDN(CloudFront) - http://dwnhikcdqi4zf.cloudfront.net/ - 48 ms

方法 3: 使用瀏覽器的 Developer Tools 來觀察。
Developer Tools 中的 'Network' Tab 紀錄瀏覽器送出請求到取得 Server 回應的狀態，裡面就直接有 TTFB 欄位資訊。

[1] 不經 CDN 的 TTFB 原始數據; avg: 0.0830304(秒)

time_starttransfer:  0.098993
time_starttransfer:  0.081326
time_starttransfer:  0.084875
time_starttransfer:  0.081467
time_starttransfer:  0.084939
time_starttransfer:  0.078365
time_starttransfer:  0.082073
time_starttransfer:  0.078851
time_starttransfer:  0.078653
time_starttransfer:  0.080762

[2] 經 CDN 的 TTFB 原始數據; avg: 0.0158907(秒)

time_starttransfer:  0.017789
time_starttransfer:  0.014954
time_starttransfer:  0.015719
time_starttransfer:  0.017805
time_starttransfer:  0.013790
time_starttransfer:  0.015434
time_starttransfer:  0.016132
time_starttransfer:  0.018778
time_starttransfer:  0.012985
time_starttransfer:  0.015521