原文出處
http://ajaxian.com/archives/yahoo-releases-new-performance-best-practices
參考內容 http://developer.yahoo.com/performance/rules.html
其他參考
http://www.cnblogs.com/JustinYoung/archive/2007/11/20/965070.html
http://www.cnblogs.com/justinyoung/archive/2007/11/28/speeding-up-web-site-yslow.html
http://blog.miniasp.com/post/2007/11/24/14-rules-for-faster-front-end-performance-notes.aspx
http://static.slideshare.net/swf/ssplayer2.swf?doc=high-performance-web-pages-20-new-best-practices-120577522992998-3
http://video.yahoo.com/watch/1040890/3880720
內容節錄
- 頁面速度變慢 500ms -> 使用者的中斷率提高 20%
- 頁面速度變慢 100ms -> 訂單喪失 1%
Ref http://home.blarg.net/~glinden/StanfordDataMining.2006-11-29.ppt
Ref
http://glinden.blogspot.com/2006/11/marissa-mayer-at-web-20.html- HTML主頁載入可能只佔用10-5%，後續80-90%的時間則是在下載與處理頁面所需Image、CSS、Script
- 前端頁面處理佔用80%-90%的比重
- 比改善後端容易
- 實證可行
- 減少HTTP Request
- 合併切圖 Image-Map
- 合併CSS、Script Files
- 使用 Content Devilery Network
- 針對靜態頁面置放於CDN Service Provider上（如 Akamai ；Mirror Image Internet；Limelight Networks）
- 增加 Expire Header 或 Cache-Contorl
- 加速後續的網站再次訪視
- 啟動 Gzip壓縮
- 壓縮資料可減少70%的傳輸量
- 但請勿對Image與PDF這類已經壓縮的檔案格式再次壓縮
- CSS 放最上面
- CSS置放於HEAD中可加速瀏覽器於頁面的處理作業
- 將Script儘可能放到最後面
- 提升檔案下載的平行處理
- 不要使用CSS自定義屬性( CSS expressions )
- 滑鼠的移動都可能得重新計算 造成使用者頁面反應緩慢
- 採用外部載入的CSS與JavaScript而非Inline
- 外部檔案有機會共用，就有機會Cache Hit
- 但首頁還是可採用Inline的方式，減少檔案的數量符合第一點的想法。
- 減少DNS查詢
- 減少Hostname的使用數量
- Browser的DNSCache時間不一，1分(Firefox)半小時(IE)或一小時
- 每次DNS查詢成本約20-120ms
- 縮小CSS與JavaScript大小
- 減少下載時間
- 可採用以下工具協助縮小檔案（JSMin ；YUI Compressor；ShrinkSafe）
- 減少頁面跳轉的Redirect
- 常發生跳轉多半於不自覺的地方，如http://www.abc.com 會發生301狀態而再次跳轉至http://www.abc.com/
- 若真得跳轉，建議採用301或304的方式，讓使用者可以正常操作Back-Page
- 移除重複Script
- 雙重的負擔：下載次數變多，執行次數也變多
- 設定E-Tag
- E-Tag可以讓Browser或Proxy查知頁面資料是否有異動
- 針對Multi-server因為無法有效維持一致的E-Tag,反而造成系統負擔。此時建議改採
Last-Modified方式
- 讓AJAX也能被Cache
- Web 2.0也是需要加速的，上述的3、4、9、10、11、13、都可適用於 AJAX，尤其以第三點最重要，減少不必要的資料更新傳輸。
- 安裝於 Firefox的Plugin ( 需先安裝 Firebug )
- Flush the buffer early (Server)
- 當SERVER還在忙著處理資料時，就可以先讓Browser早些開始接收資料
- ＜/ＨＥＡＤＥＲ＞
＜ＢＯＤＹ＞
- Use GET for AJAX requests (Server)
- GET適合用於拿取資料，通訊次數比POST少
- Post-load components (content)
- 頁面資料並非一次就需提取完畢，部分的資訊可以先提供，其他的陸續抵達可提高使用者操作順暢度
- 善用JavaScript切割頁面資訊
- Preload components (content)
- 未來需要的資訊，利用AJAX的方式背景載入，減少使用者等待
- 自動輔助輸入也可採用此方法
- Reduce the number of DOM elements (content)
- 簡化HTML也就代表較小的檔案大小
- Split components across domains (content)
- 透過不同的domains可以加大資料平行載入的機會，但請勿超過2-4個Domain，減少DNS查詢的額外成本
- Minimize the number of iframes (content)
- iframe優點：容易整合外部頁面，平行載入，減少安全性問題
- 缺點：頁面處理成本高
- No 404s (content)
- 無效的存取
- Reduce cookie size (cookie)
- Use cookie-free domains for components (cookie)
- Minimize DOM access (javascript)
- Develop smart event handlers (javascript)
- Choose ＜link＞ over @import (css)
- Avoid filters (css)
- Optimize images (image)
- Optimize CSS sprites (image)
- Don’t scale images in HTML (image)
- Make favicon.ico small and cacheable (image)
- Keep components under 25K (moblie)
- Pack components into a multipart document (moblie)
