天天看點

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

在這個資訊爆炸的時代,使用移動終端擷取新鮮資訊已經是大勢所趨,但是移動網頁浏覽速度還有巨大的提升空間。據 Strangeloop Networks 統計,在同樣的網絡條件下,使用移動端通路相同網頁平均會比 PC 端慢 40%!

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

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

PC 端網站優化方案

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

不論在 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 連接配接發起多重的請求響應消息,進而大大的加快了網頁加載時間。

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

  1. HTTP2 采用二進制格式傳輸資料,并把他們分割為更小的幀,相比于 HTTP/1.x 的文本格式傳輸更為友善。
  2. HTTP1.x 的 header 由于 cookie 和 user agent 很容易膨脹,而且每次都要重複發送。HTTP/2 對消息頭采用 HPACK 進行壓縮傳輸,能夠節省消息頭占用的網絡的流量。

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

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