網站前後端效能優化 34 條黃金法則完整指南

前端優化 (1-22)

1. 減少 HTTP 請求

• 合併 JS/CSS 檔案
• CSS Sprites 合併背景圖
• Image Maps (僅相鄰圖片)
• 內聯圖片 (Data URI) → 放入已快取的 CSS

2. 使用 CDN (內容分發網路)

靜態資源部署至邊緣節點，依網路拓撲就近回應。Yahoo 實測提速 20%+。

3. 設定 Expires / Cache-Control

• 靜態資源：遠期 Expires (如 1 年) + 檔名含版本號
• 動態資源：適當 Cache-Control (private, max-age, must-revalidate)

4. Gzip 壓縮

Apache: mod_deflate (2.x) / mod_gzip (1.3)。壓縮 HTML/JS/CSS/JSON/XML，減少 70% 體積。圖片/PDF 勿壓縮。

5. 樣式表置頂

<link> 放在 <head>，啟用漸進式渲染，避免白屏/閃爍。

6. 腳本置底

JS 阻塞平行下載。放在 </body> 前，或用 defer/async 屬性。

7. 避免 CSS Expressions

IE 專有、高頻執行 (滑鼠移動皆觸發)。改用一次性表達式或事件處理。

8. 外部化 JS/CSS

利用瀏覽器快取。首頁少量頁面可內聯並非同步載入外部檔。

9. 減少 DNS 查詢

資源分佈在 2-4 個域名，平衡 DNS 開銷與平行下載度。

10. 壓縮 JS/CSS (Minify)

移除註解、空白。工具：UglifyJS, Terser, cssnano。混淆風險較大，壓縮即可。

11. 避免重導向

301/302 延遲文檔輸出。常見：缺尾斜線 /dir → /dir/。用 mod_rewrite 或 DirectorySlash 修正。

12. 移除重複腳本

模板系統加入腳本管理模組防重複載入。

13. 設定 ETags

多伺服器環境預設 ETag (inode/ChangeNumber) 不一致導致 304 失效。建議移除 FileETag None，依 Last-Modified 驗證。

14. 讓 Ajax 可快取

加 Expires/Cache-Control、URL 含時間戳版本參數 &t=timestamp。

15. 早期刷新緩衝區

PHP flush() 在 </head> 後輸出頭部，瀏覽器提前載入資源。

16. Ajax 用 GET

POST 分兩個 TCP 封包 (Header + Body)，GET 單封包。URL < 2000 字元時優先 GET。

17. 後載入元件

拖放、動畫、隱藏內容、摺疊圖片延後載入。工具：YUI Image Loader, YUI Get Utility。

18. 預載入元件

• 無條件：onload 後載入下頁資源
• 有條件：依用戶行為預測 (搜尋聯想)
• 預期性：舊站空閒時預載新站資源

19. 減少 DOM 元素數量

語義化標籤、CSS Grid/Flex 替代表格佈局。目標 < 700 元素 (Yahoo 首頁)。檢測：document.getElementsByTagName('*').length。

20. 跨域分流元件

靜態資源放 static1.example.org, static2.example.org，主站 www.example.org。限 2-4 域名。

21. 減少 Iframe

優點：隔離第三方、平行下載。缺點：空頁面也消耗、阻塞 onload、無語意。慎用。

22. 避免 404

JS 404 會阻塞平行下載並嘗試解析錯誤內容。建立完善監控與預設圖片。

Cookie 優化 (23-24)

23. 減少 Cookie 體積

移除非必要、縮短值、設適當 Domain/Path/Expires。

24. 靜態資源用無 Cookie 域名

主站 www.example.org 寫 Cookie，靜態放 static.example.org 或獨立域名 (yimg.com, ytimg.com)。代理伺服器拒絕快取帶 Cookie 資源。

JavaScript 優化 (25-26)

25. 減少 DOM 存取

快取引用、離線操作節點再掛回、避免 JS 佈局強制回流。

26. 事件委派

父層綁定單一 Handler 捕獲冒泡事件，識別目標元素。用 DOMContentLoaded 替代 onload 提早執行。

CSS 優化 (27-28)

27. 用 <link> 替代 @import

IE 中 @import 等同置底，阻塞渲染。

28. 避免 IE 濾鏡

AlphaImageLoader 阻塞渲染、記憶體洩漏。改用 PNG8 漸變或 Hack 隔離 IE7+。

圖片優化 (29-32)

29. 優化圖片

• GIF 檢查調色板：identify -verbose
• GIF → PNG 通常更小：convert
• PNG 無損優化：pngcrush -rem alla -reduce -brute
• JPEG 優化：jpegtran -copy none -optimize -perfect

30. 優化 CSS Sprites

• 橫向排列體積較小
• 合併相近色彩降至 256 色內 (支援 PNG8)
• 避免大面積透明間隙，減少解碼記憶體

31. HTML 勿縮放圖片

直接輸出顯示尺寸圖片，避免下載 500px 顯示 100px。

32. Favicon 小且可快取

< 1KB、ICO 格式、設遠期 Expires、根目錄固定名稱。

移動端專屬 (33-34)

33. 元件 < 25KB

iPhone 不快取 > 25KB (未壓縮) 元件。Minify + Gzip 雙重保障。

34. 多部分文檔打包 (MHTML)

單一 HTTP 請求回應多資源。注意：iPhone 不支援，需檢測 User-Agent。