Web 2.0 網站效能調優實戰：從 DNS、瀏覽器快取到後端架構

Web 2.0 架構特性與優化層級

傳統靜態網站：瀏覽器 ←→ Web Server（兩層）
Web 2.0 動態互動網站：瀏覽器 ←→ Web Server ←→ App Server ←→ DB（三/四層）

優化原則：越上層收益越大，優化由上而下。

一、Web 層優化（瀏覽器端與 Web Server）

1.1 DNS 解析時間

• 首次造訪必經 DNS，解析慢 = 體驗差。
• 設定合理 TTL（> 30 分鐘，IE 快取 30 分鐘）。
• 啟用 Keep-Alive 減少重複 DNS 查詢。

1.2 減少瀏覽器請求數

• 合併所有 CSS 為單一檔案。
• 合併所有 JS 為單一檔案。
• 圖片合併：CSS Sprites 將多張小圖合成一張，利用 background-position 顯示。ADSL 環境下，連線建立開銷大於傳輸大小。
• 啟用瀏覽器快取：設定 Expires/Cache-Control，二次造訪請求趨近 1（僅 HTML）或 0（304 Not Modified）。

1.3 頁面架構與樣式

• 採用 XHTML + Div/CSS 版面，分離結構與表現。
• CSS、JS 外連檔案，利於快取與並行下載。
• UI 設計越簡潔，HTML 體積越小，傳輸越快。

1.4 JavaScript 最佳化

• JS 放在 </body> 前，避免阻塞渲染。
• 壓縮混淆（UglifyJS/Terser），移除註解與空白。
• 非關鍵 JS 使用 defer 或 async 載入。

1.5 靜態檔案壓縮

• 啟用 Gzip/Deflate：文字類檔（HTML、CSS、JS、XML、JSON）壓縮率 70-90%。
• Lighttpd 設定範例：

server.modules = ( ..., "mod_compress", ... )
compress.cache-dir = "/tmp/lighttpd/cache/compress/"
compress.filetype = ("text/plain", "text/html", "text/css", "text/xml", "text/javascript", "application/javascript", "application/json")

1.6 靜態資源獨立域名 / CDN

• 靜態檔放在無 Cookie 的域名（如 static.example.com），避免每請求攜帶 Cookie 浪費頻寬。
• 接入 CDN 就近分發，降低延遲。

二、應用伺服器層優化

2.1 輸出快取

ASP.NET <%@ OutputCache %>、MVC [OutputCache]、ASP.NET Core ResponseCachingMiddleware。

2.2 資料快取

MemoryCache / Redis / Memcached 快取熱門查詢、計算結果、頁面片段。

2.3 非同步與併發

• IO 密集操作（DB、HTTP 呼叫）全面採用 async/await 釋放執行緒。
• 調整 ThreadPool 參數、連線池大小匹配負載。

2.4 Session 狀態外部化

使用 Redis / SQL Server Session State，支援 Web Farm 水平擴展。

三、資料庫層優化

3.1 索引與查詢調優

• 分析執行計畫，補足遺漏索引，移除未使用索引。
• 避免 SELECT *、隱含轉換、參數嗅探問題。

3.2 讀寫分離 / 分庫分表

主庫寫、從庫讀；大表水平切分（Sharding）或垂直切分。

3.3 連線池與參數化查詢

ADO.NET 連線池預設啟用，確保 using 區塊正確釋放；全面參數化防注入並利用計畫快取。

四、監控與持續優化

• APM 工具：Application Insights、New Relic、SkyWalking 追蹤請求延遲、錯誤率、資料庫耗時。
• 負載測試：JMeter、k6 模擬尖峰流量，找出瓶頸。
• 建立效能基準線，每次部署前後比對關鍵指標（TTFB、FCP、LCP、API P99）。

結語

Web 2.0 效能調優是系統工程，需從 DNS、瀏覽器快取、靜態資源壓縮合併、CDN、應用層快取非同步、資料庫索引架構、監控體系全鏈路佈局。記住：測量 → 分析 → 優化 → 驗證 閉環，才能持續交付極速體驗。