目錄
為何要減少 HTTP 請求數量？
當訪客進入網站時，瀏覽器會向伺服器發送大量 HTTP 請求（如 CSS、JavaScript、圖片、字型檔等），每次請求都需要一定的時間才能完成載入。若請求數量過多，將導致網頁載入速度變慢，使用者體驗下降，也可能間接影響搜尋引擎排名（SEO ）。
1. 合併檔案 (CSS / JS)
做法：
- 合併多個 CSS 檔：在開發階段可使用工具（如 Webpack、Gulp、Grunt 等）將多支 CSS 檔合併為一支或少數幾支檔案。
- 合併多個 JavaScript 檔：同樣透過打包工具或手動合併，將散落各處的 JS 檔集中管理。
好處：
- 減少 HTTP 請求：原本需要抓取多個檔案，經過合併後可大幅減少請求次數。
- 載入速度提升：較少的請求意味着更快的初始載入。
2. 壓縮與縮小檔案
做法：
- Minify（縮小程式碼）：移除程式碼中的空白、註解與不必要的符號，可使用如 UglifyJS、Terser、CSSNano 等工具。
- GZIP 或 Brotli 壓縮：在伺服器端設定啟用壓縮，讓瀏覽器接收較小的檔案體積。
好處：
- 降低檔案大小：縮短傳輸時間，間接提高整體載入速度。
- 減輕伺服器負擔：檔案越小，傳輸效率越高，伺服器與使用者端都能受益。
注意：壓縮與縮小檔案並沒有直接「減少請求數量」，但它能減少每次請求的檔案大小，效果同樣可觀。
3. 使用 CSS Sprites（精靈圖）
做法：
- 將網站中常用的多張小圖示整合成一張大型圖片（Sprite），再利用 CSS 的
background-position顯示所需區域。 - 例如：社群按鈕、ICON、或小型裝飾圖片等，都可合併到同一張圖裡。
好處：
- 減少對圖片的請求：從多張圖片合併成一張，請求數量直接降低。
- 維護方便：若專案內圖示數量多，可集中在一個 sprites 檔管理。
4. 使用網路字型時的優化
做法：
- 精選需要的字型字重與字元集：不要一次載入所有字體或所有字重，只載入你真正需要的部分。
- 字型檔壓縮：對字型檔進行子集化（subsetting），讓字型檔更小。
- 字型快取：透過伺服器端設定 Cache-Control/Expires 讓瀏覽器快取，避免重複下載。
好處：
- 減少不必要的檔案載入：載入過多字重（如300、400、500、700）會浪費頻寬。
- 縮小字型檔大小：有助於加快載入速度。
5. 第三方套件與插件精簡
做法：
- 定期檢查 WordPress 或其他 CMS 中安裝的插件，有些可能只使用了其中極少數功能，但卻載入大量資源。
- 移除冗餘或重複功能的插件，或使用更輕量的替代方案。
好處：
- 減少外部腳本載入：許多第三方插件會載入自己的 JS/CSS，大幅增加請求。
- 系統更穩定：插件越少，衝突風險越低。
6. 精簡圖片與 lazy loading
做法：
- 圖片優化：使用壓縮工具（TinyPNG、ImageOptim 等）縮小 JPG/PNG 檔案尺寸，或採用 WebP。
- lazy loading（延遲載入）：僅在使用者捲動到圖片的可視範圍時再動態載入圖片，避免一次載入全部圖片。
好處：
- 初始載入更快：減少頁面初次載入時的圖片請求。
- 節省頻寬：使用者可能不會瀏覽到頁尾，沒必要載入所有圖片。
7. 使用 Content Delivery Network (CDN)
做法：
- 選擇合適的 CDN 服務（如 Cloudflare、Akamai、Amazon CloudFront 等），將靜態資源（圖片、CSS、JS）分散儲存在多個伺服器據點。
- 確保 CDN 與你的主機整合得當，並設定好瀏覽器快取策略。
好處：
- 就近讀取：造訪者可從最靠近的 CDN 節點載入資源，速度更快。
- 分散伺服器負載：減輕原伺服器壓力，提升整體回應效率。
提醒：使用 CDN 並不一定直接「減少請求數量」，但透過有效快取與分流，可以使實際的載入時間更短，且對部分瀏覽器來說，可能同時開啟的連線數量也更有效率。
8. 善用快取與瀏覽器快取
做法：
- 設置伺服器端快取：可將動態頁面產生的靜態檔案保存在快取中，減少頻繁的後端處理。
- 長期快取策略：對於不常變動的資源（圖片、字型、CSS/JS），可設定較長的快取週期，讓瀏覽器優先使用快取的檔案。
好處：
- 減少重複請求：若使用者已訪問過你網站，快取可避免每次都重新下載相同檔案。
- 載入速度明顯提升：舊資源在客戶端已存在時，就無需再次下載。
總結
- 合併與壓縮檔案、減少重複資源載入，是最快也是最常見的做法。
- 使用 CSS Sprites 或 Icon Font，可把多張小圖示合併成單一請求。
- Lazy loading 圖片 及精簡 外部插件，能有效降低初始載入負擔。
- CDN 與快取策略 則進一步優化整體回應速度與使用者體驗。
透過以上方法，能大幅減少網站的 HTTP 請求數量，也能整體提高網站載入與瀏覽速度。建議根據自身網站的需求、架構與技術棧，選擇最適合的方式逐步實施並觀察效益，才能達到最佳效果。
