2015年10月18日 星期日

CSS 放在 Cloudfront 、 Cloudflare 和 no CDN 的差異

本篇文章是測試 CSS 的速度，因為 CSS 是唯一會卡頁面的東西。

一直以來看到調教網站效能的文章都教育大家，當網站是 www.example.com 時，JS 和 CSS 放在 asset.example.com ，而有時會把 asset.example.com 掛上 CDN。直到後來開始使用 webpagetest 來測試的時候，發現 DNS 都佔很大時間？不，是最長的時間。所以就來測試一下，看看每個月花在 cloudfront 的錢是否是值得的。


筆者大部份頁面的組成，由上而下依序是：
  1. Bootstrap CSS
  2. Custom CSS
  3. BODY
  4. jQuery JS
  5. Custom JS
Size  大小分別為： jQuery > Bootstrap CSS > Custom CSS > Custom JS

現在的瀏覽器在解析頁面完後，會把上述四項外部資源一起載入，直到 CSS 都載入完之後，使用者才會看得到東西。所以 CSS 是最重要，也是唯一會卡頁面的東西。而 Bootstrap CSS 又是 CSS 裡面最肥的，所以用 bootstrap 來做測試，可信度應該會很符合實際的情況。

測試環境

測試檔案：Bootstrap 2.3.1 Minified CSS。大小為 103 K，gzip 大小為 17k，大部份使用者應該是載入 17K 的大小。Bootstrap CSS 是頁面上第一個載入的外部檔案，都每次載入都是 no cache。
測試 CDN：
  • Cloudfront：直接使用 xxx.cloudfront.net 的網域
  • Cloudflare：不是使用 cdnjs.cloudflare.com ，掛上自己另外一個 domain 。網站是 www.example.com ，掛上的則是 cdn.example.net
  • no CDN：同網域，像是 /static/bootstrap.min.css ，所以此方法可以節省 DNS Lookup 和 connection 建立的時間。主機位置為美國西岸 (Fremont)
訪客數： 約 45 萬，依瀏覽器隨機分配測試三種 CDN 狀態：Cloudfront, Cloudflare 或 no Cache
記錄工具：在載入bootstrap 後會記錄時間，超過 20 秒則不會記錄，以免極端值影響太大。再用 GA Event Tracking。

測試結果

全球結果平均值，共 152 個國家，數值越小越好：
no CDN：988
Cloudflare：1239
Cloudfront：1350


不同地區的測試結果
TWUSHKSGKRBRINJPFRGBDERU
no CDN502591619309807111811726382699419544809
Cloudflare74977371637669713631682581666500606964
Cloudfront64488728847237515241723399630690590765

結論

本次測試的目的是在看 js / css 是否要繼續花錢經由 Cloudfront 來遞送。結論是第一個需要載入的 css 資源，透過 CDN 沒有比較快。外部資源載入的時間是由 DNS Lookup +  connection + download 來組成。CDN 只有 download 的優勢，如果頁面上有很多圖片，使用 CDN 一定會比 no CDN 來的快。但第一個外部資源是 CSS ，不用 CDN 反而會加速載入速度，因為不需要  DNS Lookup 和 Connection 的時間。


Cloudflare 給我的印象中一直是很不穩定，在約兩年前我才由 Cloudflare 搬到 AWS  的 route53 和 cloudfront。而在最近半年對 cloudflare 的觀察是，它的節點越來越綿密，但穩定度就不知了。我決定先把 JS 和圖片 搬到 Cloudflare ，CSS 則改由主機直接 serve 。


at