Front end Performance Optimization guideline - skylying/ggcary GitHub Wiki

參考資料

• Google pagespeed insight

• 網頁前端效能優化

• Front End Optimization – 9 Tips to Improve Web Performance

高優先

基本上上面三個參考資料就有很多東西可以做, 但在時間資源有限的狀況下我們要先做「CP值最高」的項目, 我們根據 GA 撈出來的資料, 使用 Chrome 的用戶佔大多數, Chrome 本身已經是一個超級先進快速的瀏覽器, javascript 也是跑得很快的程式語言, 所以 web 前端的效能瓶頸大概一開始都不會是在 source code, 而是都會在 asset 的存取, 所以我們的大方向就是朝著「加快資源存取速度」這個方向走

• CDN
• JS/CSS minified/uglified
• nginx GZIP (看 server 用什麼, 不一定是 nginx)

這三件事情最簡單, 也最有用, 效果立竿見影

至於 cache, 雖然也很有效, 但 cache 的配套要到位才能安心使用, 例如

• 要 Cache 哪些 asset
• 何時刷新快取
• Cache TTL 多久
• 如何強制 ignore cache
• 是否導入 Chrome 的 application cache
• 等等

所以目前我不建議先做 Front-end 快取, 而 server API 又不是全都在我們手裡 所以 Backend Cache 也先作罷吧..

如果有時間, 有精力想做 Cache, 請參考這份簡報

http://s.itho.me/modernweb/2017/day1/101-4-CodinCat.pdf 裡面有介紹五花八門的 cache 方法, 但都是 ES6 以上的語法寫的, 要注意一下 至於後面提到的 css/js blocking 的問題, 我是沒試過, 請小心服用, code splitting, 恩..., 小心別走火入魔了

中優先

中優先的項目也算有效, 但做起來麻煩一點, 效益也沒有高優先的項目好, 之後時程比較鬆的時候再說

• 減少 HTTP request
  • image 的 sprite
  • font icon (參見 bootstrap 的 icon)
• 圖片優化 => 請專家 Tommy 把圖片變小變漂亮
• 用 async load js
• 用 requestAnimationFrame 取代 setTimeout
• 等等

低優先

要從程式碼去優化的基本上都是低優先, 除非我們已經每日訪客數億次, 可能增進個 1% 效能都有巨大影響的時候才需要來做

• Critical Rendering Path
• css syntax optimization
• 等等