導語

在這個資訊爆炸的時代，使用行動裝置取得新鮮資訊可以說是大勢所趨，但是行動網頁瀏覽速度還有很大的提升空間。據Strangeloop Networks 統計，在同樣的網路條件下，相同網頁如果使用行動端瀏覽，平均會比電腦瀏覽慢40%！

然而另一方面，使用者對網路速度的要求卻越發嚴苛。Akamai的研究指出，網頁回應時間可容忍的閥值是2秒，一旦超過3秒，會有40%的使用者放棄瀏覽頁面。簡單來說，如果你身為內容服務供應商，可能因為行動網頁的載入「太持久」，而已經默默流失許多客戶。

這是一個需要快槍手的時代！如果你不夠快，快去弄一把好槍！

那麼，我該怎麼打磨出一把好槍？

一、參考電腦端網站最佳化經驗

不論在PC還是在行動瀏覽器上，只有不到10%的時間是用來讀取頁面的HTML原始碼。而剩下的90%是用來載入例如樣式表、指令檔、或者圖片等資源還有執行使用者端的程式。所以，許多傳統的電腦端網頁最佳化方案在行動裝置上仍然可行。

1.1減少每個頁面的 HTTP請求數

1. 將共用的JavaScript和CSS代碼放在公共的資料夾中與多個頁面共用。
2. 確定一頁中不會多次載入相同的腳本。同時，將腳本中的Click事件改為On Touch事件來減少300ms固有延遲的發生。
3. 使用CSS Sprites來整合圖像，將多張圖片整合到一個線性的網狀大圖中。
4. 使用Cache-Control或者Expires標記來進行瀏覽器快取，從而減少不必要的伺服器請求，盡量從本地快取內取得資源。

1.2減少每個請求載入的大小

1. 使用gzip這樣的壓縮技術來壓縮圖像和文本，憑藉增加服務端壓縮和瀏覽器解壓的步驟，來減少資源的負荷。
2. 整合並壓縮CSS與JavaScript，刪除不必要的字元與變數。
3. 動態調整圖片大小，或者將圖片替換為專為行動設備製作的小型版本。
4. 採取分段載入和隱藏載入，可以將未顯示區域的內容延遲載入或暫時不需要的腳本進行延後讀取。

二、採用更適合的HTTP2協定

2.1多工技術帶來的請求：回應加速

1. HTTP2採用多工的技術，允許同時經由單一的HTTP2連接發起多重的請求回應訊息，因此可以有效的加快網頁載入時間

2.2更節省空間的二進位頭部資料嵌套

1. HTTP2採用二進位格式傳輸資料，並把他們分割為更小的影格，相比於HTTP/1.x 的文本格式傳輸更為方便。
2. HTTP1.x的header由於cookie和user agent很容易膨脹，而且每次都要重新發送。HTTP/2 對頭欄位採用 HPACK 進行壓縮傳輸，能夠節省頭欄位佔用的網路的流量。

2.3Server Push讓資源推播變得更快

1. 經由Server Push功能，服務端可以主動把 JS 和 CSS 等檔發送給終端，因此節省解析HTML請求的過程。簡單來說，當你需要瀏覽某個檔的時候，它已經在乖乖的在後台睡覺覺了。

講到這兒，賣個關子，我們下次再講

剩下的乾貨。