Source: http://browserdiet.com/

HTML

• 避免對 stylesheet 或 javascript 使用 inline 或 embedded code 的方式
• 除非是一次性的瀏覽頁面（一般 user 只會瀏覽一次，不使用 external 可減少 request 數）
• external 的順序也有影響（最好把 style 放在 script 前）(reference)
• css 放愈前面愈好
• script 放愈後面愈好
• minify html（移除註解、空白、換行）
• 適當使用 async 如：<script async src="example.js"></script>

CSS

• minify CSS
• 合併所有 external stylesheet 以減少 request 數
• 用 <link> 優於 @import

JavaScript

• 使用第三方的 script 最好用 async 或 friendly iframes，避免因為連線問題影響讀取速度
• 避免在 loop 中多次重複計算 array length
• 避免使用 document.write
• 在 loop 中設定 layout 時避免多次重複計算 layout
• 如果要重複在 DOM 取得同一個 element，最好取一次並存在 variable 就好
• minify JavaScript
• 合併所有 external JavaScript 以減少 request 數

jQuery

• 使用愈新的版本愈好
• JavaScript 原生的語法總是比較快，因此盡量不要用 jQuery.each 改用 for-loop
  Note: 但是 for-in-loop 的效能通常還是比 jQuery.each 差
• 除非必要否則盡量少用 jQuery，如 $(this).attr('id') vs. this.id

images

• (CSS Sprite) 將多個圖檔合併，並以 CSS 控制背景顯示位置，如此可減少 request 數並減低顯示延遲
  Note: 但圖與圖之間的空白不宜太多，空白雖不致影響檔案大小，卻與記憶體消耗有關
• 使用 Data-URI 可減少 request 數
• 圖檔指定 width 及 height 屬性可避免瀏覽器做不必要的 repaint 與 reflow
• 圖檔最佳化（減少不必要的資訊如 Exif metadata 等）
• 網頁呈現檔案較大的 jpeg 時，使用 progressive jpeg 優於 baseline jpeg

server

• 自訂 cache 時效，網頁中要更新時可改檔名或用 GET parameter 改版號（但此作法會造成在 proxy 中無效）
• 使用 GZIP 壓縮資料

tools

• PageSpeed Insights: https://developers.google.com/speed/pagespeed/insights