原文來自：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和圖像，保持智能手機上最少的處理負荷。

轉載于:https://my.oschina.net/liangzhenghui/blog/350188

總結

以上是生活随笔為你收集整理的如何提升网站在移动端的打开速度（转）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。