在這個資訊爆炸的時代，使用移動終端獲取新鮮資訊已經是大勢所趨，但是移動網頁瀏覽速度還有巨大的提升空間。據 Strangeloop Networks 統計，在同樣的網路條件下，使用移動端訪問相同網頁平均會比 PC 端慢40%！然而另一方面，使用者對網速的要求卻步步緊逼。研究表明，網頁響應時間可容忍的閥值是2秒，一旦超過3秒，會有40%的使用者放棄瀏覽頁面。

所謂天下武功，唯快不破！想要設計更快的網頁優化速度，我們可以借鑑成功的優化經驗，全球最大的CDN服務商Akamai（阿卡邁）針對移動體驗的問題，提供了一套較為完整的解決方案，感興趣的讀者可以前往註冊下載；與此同時，我們也可以採用直接的技術手段，本文從PC端優化經驗、HTTP/2優化協議、優化蜂窩網路、以及智慧的載入方案設計四個維度，總結了一些提升移動網頁載入速度的方法和技巧。

一、PC 端網站優化方案

不論在 PC 還是在移動瀏覽器上，只有不到10%的時間是用來讀取頁面的 HTML 的。剩下的90%是用來載入額外的如樣式表、指令碼檔案、或者圖片這樣的資源和執行客戶端的程式。因此，許多在 PC 端的傳統網頁優化方案在移動端仍然可行。比如說：

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

I. 將共用的 JavaScript 和 CSS 程式碼放在公共的資料夾中與多個頁面共享。
II. 確保在一個頁面中相同的指令碼不會被載入多次。同時，將指令碼中的 Click 事件改為 On Touch 事件來減少固有的300ms延遲。
III. 使用 CSS Sprites 來整合影象，將多張圖片整合到一個線性的網狀的大圖片中。
IV. 使用 Cache-Control 或者 Expires 標記來實現瀏覽器快取，從而減少不必要的伺服器請求，儘可能地從本地快取中獲取資源。

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

I. 使用 gzip 這樣的壓縮技術來壓縮影象和文字，依靠增加服務端壓縮和瀏覽器解壓的步驟，來減少資源的負載。
II. 整合並壓縮 CSS 與 JavaScript，刪除不必要的字元與變數。
III. 動態地調整圖片大小或者將圖片替換為移動裝置專用的更小的版本。
IV. 分段載入和隱藏載入等手段，可以將不可見區域的內容延遲載入或暫時不需要的指令碼進行延時讀取

二、採用更優的 HTTP/2 協議

2.1 多路複用技術帶來的請求-響應加速

I. HTTP/2 採用多路複用的技術，允許同時通過單一的 HTTP/2 連線發起多重的請求響應訊息，從而大大的加快了網頁載入時間。

2.2 更節省空間的二進位制頭部資料巢狀

I. HTTP/2 採用二進位制格式傳輸資料，並把他們分割為更小的幀，相比於 HTTP/1.x 的文字格式傳輸更為方便。

II. HTTP1.x 的 header 由於 cookie 和 user agent 很容易膨脹，而且每次都要重複傳送。HTTP/2 對訊息頭採用 HPACK 進行壓縮傳輸，能夠節省訊息頭佔用的網路流量。
 

2.3 Server Push 帶來的更快的資源推送

I. 通過 Server Push 功能，服務端可以主動把 JS 和 CSS 等檔案傳送給終端，而省去了解析HTML 請求的過程。簡單的說，當你需要訪問某個檔案的時候，它已經在乖乖的在後臺躺好了。

三、優化蜂窩網路

I.具有實力的內容服務商可以把資源配置在離使用者地理位置更近的地方，縮短最後一公里。
II. 與行動網路服務商合作共同開發演算法，實現實時自動調整網際網路路由，避免網路擁堵、丟包與離線問題。
III. 還可以採用優化TCP協議的方法，通過藉助主流的Cubic、Bic以及Westwood演算法，可以有效的避免網路擁堵。
IV. 此外，還可以研究演算法改善NAT巢狀導致的網路延時，也可以直接通過IPV6的連線協議規避NAT的延遲問題。

四、設計更加智慧的載入方案

4.1採用分段載入和隱藏載入

I.分段載入又稱懶載入，它能夠在使用者滾動頁面的時候自動獲取更多的資料，從而可以很大程度上減少伺服器端的資源耗用。諸如Lazyload.js或Belazy.js都是非常成熟易用的開發包。
II. 隱藏載入是在頁面顯示後再載入使用者暫時看不到的資訊，諸如圖片展示窗裡除了第一張圖片，其他圖片都可以採用隱藏載入的技術。

4.2採用預載入技術

II. 預載入技術不僅支援PC，也已經支援Android系統，可惜的是目前尚不支援iOS Safari。
III. 事實上，Prefetch是網頁優化裡Prebrowsing的一部分，開發者還可以通過DNS-Prefetch , Subresource，Preconnect，Prerender等技術來實現預先解析DNS與提前渲染等優化。

4.3通過機器學習的手段智慧載入

I.通過機器學習的方法，網站可以自動收集並分析使用者的瀏覽習慣與訪問資訊，然後通過預載入的手段將最有可能訪問的資訊提前載入完成。

4.4智慧調整圖片解析度

I.圖片通常佔用了Web頁面載入的大部分網路資源，也佔據了頁面快取的主要空間。 根據統計，一個站點平均62%的內容都是由圖片組成。管理這些圖片除了需要考慮到圖片的大小、格式、旋轉、藝術處理、增加水印、儲存空間等，還要顧及海量的裝置的螢幕尺寸，以及適應終端上執行的瀏覽器。

以上是我們給開發者總結的一些經驗分享，希望能夠對讀者有所幫助，大家也可以註冊下載阿卡邁的技術PPT詳細瞭解如何通過CDN 的方式為（移動）網頁提速。我們需要明確的是，專注移動網頁的效能優化無疑是開發者需要努力的方向，然而使用者並不等於機器。使用者不關心你的網站發出了多少請求，也不在乎你的螢幕渲染得有多快，他們只關心網站帶給他們體驗上的感覺。因此，開發者在進行技術優化時，不僅僅是在某一技術點上的優化，更需要從網站的整體效能規劃把控，讓整個網站給客戶呈現出更快的載入體驗！