如何減少 HTTP Requests 的數量?

網頁上所有的文字、圖片、樣式和腳本都需要經由發送 HTTP Requests 從伺服器下載來取得,網頁大部份的時間大都花在下載資源上,只有少少的時間是花在渲染上。本文主要探討如何減少 HTTP Requests 的數量。

文字資源的整合

適當的合併樣式(CSS)和腳本(Script)文件,可利用 Webpack 等工具有系統地打包,再配合瀏覽器快取機制便能更降低 HTTP Requests 次數。

圖片資源的整合

最經典的例子是 Sprites,將許多 icon 小圖合併成一張大圖,再利用 CSS 圖片定位的方式依需求顯示個別小圖,這樣就能將多次的 HTTP Requests 減少為一次而已,若能配合瀏覽器快取機制便不需要發出請求了,但注意在 HTTP/2 下就不再需要 Sprites 了,也可參考其他更好的選擇(例如:Base64各種 SVG 的應用),點此看優劣比較。

外部檔案與內聯推送

外部檔案除了以上合併的處理方式之外,還要注意引入的位置,這會牽涉到是否能及早顯示畫面;而內聯推送除了可節省 HTTP 請求的次數外,還可增進效能,讓頁面更快顯示。

外部檔案-放置檔案的位置

因此

可參考這裡

內聯推送-放置程式碼的位置

以上探討的皆為將樣式和腳本放在外部檔案的狀況,但若放在檔案內,即內聯樣式或腳本,就沒有發出 HTTP 請求的問題,就可節省 HTTP 請求的次數,讓頁面更快顯示。

關於樣式方面,現在當紅的 CSS Modules / Scoped CSSCSS in JS 就是將樣式以內聯或行內方式放在 HTML(或說是 js)內部,並且只會載入要用到的程式碼,效能佳。

關於腳本方面,將關鍵的腳本用 <script> ... </ script> 包裹程式碼,放在 <head><body> 中,這樣會與 HTML 一同下載和執行,即可節省 HTTP 請求次數。

References


效能調校 加載效能 base-64 Loading Performance 前端效能 系列文