想要提升移動網頁的加載速度？你可以Get這些技能

2017/05/23 來源：InfoQ

在這個信息爆炸的時代，使用移動終端獲取新鮮信息已經是大勢所趨，但是移動網頁瀏覽速度還有巨大的提升空間。據 Strangeloop Networks 統計，在同樣的網絡條件下，使用移動端訪問相同網頁平均會比 PC 端慢 40%！

然而另一方面，用戶對網速的要求卻步步緊逼。Akamai 的研究表明，網頁響應時間可容忍的閥值是 2 秒，一旦超過 3 秒，會有 40% 的用戶放棄瀏覽頁面。簡而言之，作為內容服務商的你，可能因為移動網頁的加載「太持久」，已經默默的流失了眾多客戶。

所謂天下武功，唯快不破！想要設計更快的網頁優化速度，我們可以借鑑成功的優化經驗以及技術。

PC 端網站優化方案

👁 Image
...

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

減少每個頁面的 HTTP 請求數

1. 將共用的 JavaScript 和 CSS 代碼放在公共的文件夾中與多個頁面共享。

2. 確保在一個頁面中相同的腳本不會被加載多次。同時，將腳本中的 Click 事件改為 On Touch 事件來減少固有的 300ms 延遲。

3. 使用 CSS Sprites 來整合圖像，將多張圖片整合到一個線性的網狀的大圖片中。

4. 使用 Cache-Control 或者 Expires 標記來實現瀏覽器緩存，從而減少不必要的伺服器請求，儘可能地從本地緩存中獲取資源。

減少每個請求加載的大小

1. 使用 gzip 這樣的壓縮技術來壓縮圖像和文本，依靠增加服務端壓縮和瀏覽器解壓的步驟，來減少資源的負載。

2. 整合併壓縮 CSS 與 JavaScript，刪除不必要的字符與變量。

3. 動態地調整圖片大小或者將圖片替換為行動裝置專用的更小的版本。

4. 分段加載和隱藏加載等手段，可以將不可見區域的內容延遲加載或暫時不需要的腳本進行延時讀取

採用更優的 HTTP2 協議

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

HTTP2 採用多路復用的技術，允許同時通過單一的 HTTP2 連接發起多重的請求響應消息，從而大大的加快了網頁加載時間。

👁 Image
...

更節省空間的二進位頭部數據嵌套

👁 Image
...

1. HTTP2 採用二進位格式傳輸數據，並把他們分割為更小的幀，相比於 HTTP/1.x 的文本格式傳輸更為方便。

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

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

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

方法有很多，關鍵是如何將這些方法真正落地應用，你需要行業資深大咖們給你上一堂課~

全球最大的 CDN 服務商 Akamai 將於本周三 20:30-21:30，通過線上直播為大家講解 HTTP2 的前世今生以及最佳實踐，幫助大家了解 HTTP2 的協議細節、緩存策略以及部署優化等技術乾貨，有需要的同學可以點擊 「 閱讀原文 」報名免費聽課！

免責聲明：本文內容來源于InfoQ，文章觀點不代表壹讀立場，如若侵犯到您的權益，或涉不實謠言，敬請向我們提出檢舉。