如何提高網站在移動端的打開速度（轉）

原文來自：http://www.studyofnet.com/news/173.html

本文導讀：「移動網絡」是個很是模糊的概念， 2g 3g wifi都是移動網絡，可是網絡特性以及對應的優化方法仍是有些區別的。 對於移動端而言，可能最須要關注的是移動網絡環境下的訪問速度。 重點是減小網絡傳輸量和交互次數， 善用本地緩存。

大部分人對移動端的瀏覽體驗感到失望，同時當體驗提高時，他們會在智能手機上花費更多的時間。由於64%的智能手機用戶但願網站能夠在4秒內加載完畢，但一半的網站花費了二倍以上的時間，達到了9秒。下面簡單介紹一些可使你的網站在移動端跑得更快的技術。

然而下載速度並非瓶頸，網絡延遲及智能機的內存與cpu纔是瓶頸。即便手機能夠在4秒內下載完1mb，頁面也要花費更長的時間去加載，由於手機須要接收並解析代碼與圖片。

在桌面端，下載文件只佔顯示網站時間的20%，其他時間花費在解析http請求，獲取樣式表，腳本文件及圖片上。因爲移動端的cpu，內存與緩存跟桌面端徹底沒法相提並論，這些在手機上會花費更長的時間。

怎樣減小加載時間

 

• 減小依賴文件 : 更少的文件意味着更少的http請求與更快的加載時間

• 下降圖片大小: 適應與調整高分辨率圖片，在額外的下載時間中佔居榜首，佔用了寶貴的內存與處理資源。

• 減輕客戶端負擔: 最佳實踐是從新思考你的javascript，並使之下降到最小尺寸

 

怎樣減小依賴文件

若是你想爲移動端用戶隱藏圖片，display:none與visibility：hidden是不能阻止文件下載的。測試下面的代碼：

<div style="display:none;">    <img src="image1" /></div> <div style="visibility:hidden;">    <img src="image2" /></div>

你能夠觀察下面的瀑布圖，圖片容器設置display: none或visibility: hidden後仍然會被下載。

替代方案是利用css加載背景圖片，以後利用media query媒體查詢來經過條件隱藏圖片。這個技術最初被Jason grigsby測試過，以後被tim kandlec進一步拓展。亞馬遜獨立的移動端頁面使用了此種技術，根據設備來條件加載特定的圖片。

<meta name="viewport" content="width=device-width"> <style>    @media (max-width:600px) {        .image {            display:none;        }    }    @media (min-width:601px) {        .image {            background-image: url(image1.jpg);        }    } </style><div class="image"></div>

你能夠看到圖片不加載的瀑布圖：

 

保持最小數量的外聯樣式表

你須要把這些文件合併在一個文件裏，減小http請求。另外一種方法，你能夠經過後端處理，經過判斷設備來自動插入樣式表。

另外一種方案可使用內部樣式。亞馬遜獨立的移動產品頁面有一個6 KB大小的外部樣式表,連同一些內部樣式。這隻須要經過一個額外的HTTP請求來下載全部的頁面樣式。

 

Sprites圖

Sprites（雪碧圖）技術能夠把常用的圖片合成爲一張圖片，從而減小http請求。好比當你將四張圖片合成到一個sprite中後，http請求從4減小到1.須要顯示的圖片利用background-position屬性來控制。

 

避免內聯iframe

每個內聯框架(iframe)都會生成一個HTTP請求,這是在iframe內沒有另外依賴資源的狀況下。這是咱們作一個快速測試,比較一個iframe只含有文本。

爲了保證web站點加載迅速，最好不要使用iframe。

 

拆分到多個頁面(單獨的移動網站)

保持你的核心內容在頁面上,以後提供到次要內容的連接到次要內容。這將減小HTML的加載負擔，同時防止相關的資源被下載。

亞馬遜的移動產品頁面有通用的產品信息,同時提供連接到「用戶評論」、「描述和細節」和「新&使用提供。

這就減小了三張圖片的HTTP請求,且HTML的大小減小45 KB。

 

保持最少重定向(單獨的移動網站)

亞馬遜有一個重定向，來引導遊客到單獨的移動頁面,這帶來了0.4秒的延遲。與之相比,戴爾的網站有兩個重定向,帶來了1.2秒延遲。

 

如何縮小圖片尺寸 : 響應式圖片

響應式圖片的思路是讓訪客圖像只下載那些最適合他們的設備的圖片,對於智能手機,使用低分辨率圖像,能夠快速下載和渲染。

亞馬遜的獨立的移動產品頁面使用響應式圖像技術,利用媒體查詢分配一個特定的背景圖像到一個div。這是亞馬遜的代碼:

 

HTML 代碼   複製

<style>
    @media (max-width:390px) {}{
        #image-container {
            max-width: 109px;
        }
        .image {}{
            background-image: url(image1);
        }
    }
    @media (max-width:390px) and (-webkit-min-device-pixel-ratio:1.5) {}{
        .image {
            background-image: url(image2);
        }
    }
    @media (max-width:390px) and (-webkit-min-device-pixel-ratio:2) {}{
        .image {
            background-image: url(image3);
        }
    }
    @media (min-width:391px) and (max-width:500px) {}{
        #image-container {
            max-width: 121px;
        }
        .image {}{
            background-image: url(image4);
        }
    }
    @media (min-width:391px) and (max-width:500px) and (-webkit-min-device-pixel-ratio:1.5) {}{
        .image {
            background-image: url(image5);
        }
    }
    @media (min-width:391px) and (max-width:500px) and (-webkit-min-device-pixel-ratio:2) {}{
        .image {
            background-image: url(image6);
        }
    }
    @media (min-width: 501px) and (max-width: 767px) {}{
        #image-container {
            max-width: 182px;
        }
        .image {}{
            background-image: url(image5);
        }
    }
    @media (min-width: 501px) and (max-width: 767px) and (-webkit-min-device-pixel-ratio:1.5) {}{
        .image {
            background-image: url(image7);
        }
    }
    @media (min-width: 501px) and (max-width: 767px) and (-webkit-min-device-pixel-ratio:2) {}{
        .image {
            background-image: url(image8);
        }
    }
    @media (min-width:768px) {}{
        #image-container {
            max-width: 303px;
        }
        .image {}{
            background-image: url(image8);
        }
    }
    @media (min-width:768px) and (-webkit-min-device-pixel-ratio:1.5) {}{
        .image {
            background-image: url(image8);
        }
    }
    @media (min-width:768px) and (-webkit-min-device-pixel-ratio:2) {}{
        .image {
            background-image: url(image8);
        }
    }
</style>

<div id="image-container">
    <div class="image">
        <img src="image1">
    </div>
</div>

 

讓JAVASCRIPT降到最低

星巴克的響應式網站在chrome下禁用javascript後，桌面端良好的網絡環境下花費了3.53秒加載完畢，而啓用javascript後，花費了4.73秒，增長了34%。Javascript對加載時間的影響，在移動端較小的內存，cpu及緩存下會表現得更明顯。一般，咱們要從新思考javascript的使用，並保持其在最小尺寸。

一個很好的例子是BBC移動網站的JavaScript。網站不使用外部JavaScript文件——都是內聯。內聯腳本僅限於幾行，沒有顯著影響內存,HTML文件和全部內聯JavaScript花費0.78秒加載完畢。就像BBC那樣,亞馬遜的移動產品頁面也沒有外部JavaScript文件,而使用最少的內聯腳本。HTML文件和全部內聯JavaScript花費0.75秒加載完畢。

(請注意,jQuery不是一個輕量的替代方案,事實上是jquery自己的補充。)這兩個網站在iPhone 4下均在4秒內加載完畢。使用一個JavaScript框架前,考慮它是否真的有必要。在某些狀況下,使用少許的JavaScript比調用一個框架更有效。

 

避免組件

組件對實際加載時間的影響是災難性的。

 

服務器端(後端)技術

除了優化前端,服務器端技術也能夠用來加速加載時間。這些技術都值得考慮:

• 緩存HTTP重定向來加速重複訪問;

• 合併HTTP重定向鏈來減小重定向;

• 使用HTTP壓縮來減小數量的字節(Gzip或縮小)。

 

測試移動設備上的性能

因爲移動設備的不可預知性,測試多個設備上的性能是很重要的。這裏有一些免費的性能測試工具:

• Mobitest,Akamai：能夠對對iPhone 4的 iOS 5.0,iPhone 3 g和Nexus S 生成瀑布圖和HAR文件 .注意Nexus S測試結果與咱們本身的內部測試不一致。咱們的服務器訪問日誌顯示，當咱們測試實際安卓2。x設備時產生了更少的HTTP請求。

• 「Network Panel,」 Chrome Developer Tools

 

結論

爲了知足移動用戶的高指望,你須要對網站針對移動設備進行優化,在4秒或更少的時間裏加載完畢。最好的方式來達到4秒這個魔術時間，是經過減小JavaScript和優化HTML、CSS和圖像，保持智能手機上最少的處理負荷。