合併 CSS/JS 檔案、CSS Sprites 合併圖示、內聯極小資源。屬前端重構,IIS 無需設定。
大型網站透過邊緣節點分發靜態資源,降低延遲。中小站可評估成本效益。
IIS → 目錄屬性 → HTTP 標頭 → 勾選「啟用內容過期」→ 設定 30 天。靜態資源(圖片、CSS、JS)命中瀏覽器快取,二次造訪零流量。
步驟:
HTTPCompression、檔案 C:\WINDOWS\system32\inetsrv\gzip.dll → 允許C:\Windows\System32\inetsrv\MetaBase.xml,HcFileExtensions 區段新增 .js、.css、.json、.svg 等(勿加圖片/壓縮檔)iisreset 生效所有 <link rel="stylesheet"> 放在 <head> 區塊,避免重繪阻塞。
所有 <script> 放在 </body> 前,避免阻塞 DOM 解析。
IE 專有動態屬性,效能極差,現代瀏覽器不支援,直接移除。
獨立檔案利於瀏覽器快取(配合第 3 項),避免內聯重複下載。
單頁面域名控制在 2-4 個以內,減少 DNS 解析開銷。
移除空白、註解、縮短變數名。工具:UglifyJS、Closure Compiler、YUI Compressor(GUI 版)。
301/302 額外增加 RTT,檢查內部連結直指最終 URL。
同頁面重複引用同一 JS 檔案會雙重下載執行,建立依賴管理機制(如 RequireJS、Webpack)或人工審核。
IIS 6.0 原生 ETag 含伺服器唯一識別碼,叢集環境導致快取失效。
解法:安裝 ISAPI 擴充 remetag 移除 ETag 標頭,或升級 IIS 7.5+ 使用 <httpProtocol><customHeaders><remove name="ETag" /></customHeaders></httpProtocol>。
套用上述前端重構與 IIS 配置調整,YSlow 評分普遍提升至 A/B 級,頁面載入時間縮短 40-60%,使用者體驗顯著改善。持續監控與自動化部署是維持高效能關鍵。