如何減少HTTP Requests?網頁速度最佳化技巧

網頁開啟速度是影響使用者感受非常重要的一個因素,也間接的影響了你的網站瀏覽量、轉換率
一個龜速的網站,使用者是沒有耐心久留的!又尤其在這個行動裝置盛行的時代,越來越多的人是在移動中瀏覽網頁,網站的速度是網站經營者必須做好的一項功課!
先介紹兩個網頁速度測試工具:
Google PageSpeed
https://developers.google.com/speed/pagespeed/insights/
這是Google提供的網頁速度測試工具,不但會計算一個參考分數,更會提供該如何優化的提示說明,而且有中文喔!
WebPageTest
http://www.webpagetest.org/
這個速度測試工具就較複雜一些囉~適合對於網站建置有一定認知的使用者,工具除了能夠選擇遠端測試的地區,更提供了非常詳細的頁面載入時間軸圖表

Google PageSpeed從20分到80分的速度優化技巧

用過了速度測試工具之後,就能夠很清楚的知道拖慢網頁載入速度的問題出在哪裡囉!
其實影響著頁面載入速度的最重要的要素是 HTTP Requests,接著才是檔案大小
我們來看看一個網頁HTTP Requests很多的實際案例,載入速度為什麼會慢吧!
網頁速度優化示意圖2
下圖是某個網站的HTML原始碼前段與使用WebPageTest工具產生的圖表
我們可以看到HTML Document前半段引用了許多現成Framework,如bootstrap、jQuery UI等
這些組件都會產生HTTP requests,並且是從HTML Document依照前後順序循序載入的

從上圖WebPageTest工具產生的圖表,可以看到網頁內容被載入的時間點,與每個內容載入了多久,範例當中的網站使用許多Framework,又沒有將檔案整併,因此一個頁面開啟時需要載48隻js檔案與22隻css檔,光是js與css檔案加起來就高達了70個HTTP requests,佔據頁面開啟之後的6秒,這六秒可是黃金時間呀!!

接著下圖可以看到6秒之後才開始載入頁面的正文本與圖片
而這些圖檔有許多是小小的icon
 例如這個箭頭
上述這個範例網站一共有兩個優化的重點:
1.減少include file的HTTP Requests
2.將小icon圖檔合併使用CSS Sprites
第1點減少include file的HTTP Requests
分為兩個方向
一個是要將頁面當中沒有用到的js或css檔案就不應該載入
應該在HTML中將include的原始碼刪除
另一個是合併多個分開的js或css檔
或是將小型的js或css檔案內嵌在頁面當中(例如僅有10行的檔案)
並且<script>標籤移至</body> 前延後載入
css檔案則是在<head>…</head>當中載入
參考資料:移除禁止轉譯 JavaScript、為 CSS 傳送進行最佳化處理
第2點是將多個icon小圖示檔案合併為一張圖檔使用CSS Sprites方式
如果只有需要用到幾張的小圖也可以使用先前 awoo 部落格有介紹的data URI scheme方式
參考資料:CSS Image Sprites
原本的HTTP Requests共有150個,經過上面的調整之後剩下47個
大幅減低了HTTP Requests數量,頁面載入的效能就提升非常多囉!