網頁開啟速度是影響使用者感受非常重要的一個因素，也間接的影響了你的網站瀏覽量、轉換率
一個龜速的網站，使用者是沒有耐心久留的！又尤其在這個行動裝置盛行的時代，越來越多的人是在移動中瀏覽網頁，網站的速度是網站經營者必須做好的一項功課！
先介紹兩個網頁速度測試工具：
Google PageSpeed
https://developers.google.com/speed/pagespeed/insights/
這是Google提供的網頁速度測試工具，不但會計算一個參考分數，更會提供該如何優化的提示說明，而且有中文喔！
WebPageTest
http://www.webpagetest.org/
這個速度測試工具就較複雜一些囉～適合對於網站建置有一定認知的使用者，工具除了能夠選擇遠端測試的地區，更提供了非常詳細的頁面載入時間軸圖表
Google PageSpeed從20分到80分的速度優化技巧
用過了速度測試工具之後，就能夠很清楚的知道拖慢網頁載入速度的問題出在哪裡囉！
其實影響著頁面載入速度的最重要的要素是 HTTP Requests，接著才是檔案大小
我們來看看一個網頁HTTP Requests很多的實際案例，載入速度為什麼會慢吧！
下圖是某個網站的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數量，頁面載入的效能就提升非常多囉！
