Optimizing the Critical Rendering Path 閱讀筆記

Optimizing the Critical Rendering Path - Velocity SC 2013 這篇滿有趣的, 看完順便筆記一下。

問題描述

  • 使用者等超過一秒就會不耐煩
  • 3G / 4G 網路 latency 很高
  • 以 3G 的情況來說, 假設 RTT 是 200ms, 去掉必須的 DNS lookup、TCP handshake、載入 html 檔 (用 http), 就只剩下 400ms 可以 render 網頁。
  • https 需要額外 1 ~ 2 個 RTT, 情況更糟
  • 載入網頁時, 雖然 html 可以邊載入邊顯示, 但是需要載入外部 CSS 檔時會延後顯示網頁。CSS 需要載入完整個檔案才可使用, 無法邊載入邊用
  • 外部 javascript 檔也會阻擋整個網頁顯示

( ps. 網頁加速的基本知識可以參閱 Best Practices for Speeding Up Your Web Site, 還有用 Chrome Developer Tool 內建的功能檢查 )

解法

  • 要下參數避免 TCP slow start, 降低 RTT
  • 一個 roundtrip 大概可下載 14KB 資料 (應該是以 MTU 1500 Bytes 來估吧), 盡量讓第一份 html 只含 14KB 以下的資料, 之後再補載入剩下內容
  • 避免在第一次顯示時用到外部 CSS 檔, 有 Google 有提供模組讓 apache2 或 nginx "inline CSS"
  • 避免在第一次顯示時用到外部 JS 檔

留言

  1. 不過做 inline 的話,css 和 js 也就很難被 cache 住,除非是靜態網頁,感覺有點難做抉擇...。

    回覆刪除

張貼留言

這個網誌中的熱門文章

(C/C++ ) 如何在 Linux 上使用自行編譯的第三方函式庫

virtualbox 使用 USB 裝置

熟悉系統工具好處多多