Google官方開發指南：提升移動Web性能表現的四大建議

作者：byane 2011-12-06 09:55:25

移動瀏覽器上的頁面布局與桌面瀏覽器有著顯著的差異，所以，想要在移動設備上開發出優秀的瀏覽器，有些注意事項是需要開發者事先了解的。對于如何在移動設備上開發出高性能、體驗良好的web應用，Google網絡管理員Jeremy Weinstein給出了幾點技術和非技術方面的建議。

移動互聯網已經在全球得到了廣泛的應用。到2009年，有50%的新增的互聯網訪問都是來自手機設備的(eMarket，2008和2009)。來自Google的內部資料顯示，隨著移動瀏覽器的提升，用戶的瀏覽習慣也在逐步改進。

移動瀏覽器上的頁面布局與桌面瀏覽器有著顯著的差異，所以，想要在移動設備上開發出優秀的瀏覽器，有些注意事項是需要開發者事先了解的。對于如何在移動設備上開發出高性能、體驗良好的web應用，Google網絡管理員Jeremy Weinstein給出了幾點技術和非技術方面的建議(譯者注：原文來自Google Code，可以認為是Google官方的開發指南)。

讓你的網頁和Apps更適合移動設備訪問

1.在桌面版應用上提供一個顯著的移動版入口

如果你有一個包含大量圖像的網站，當你為它開發了一個移動版本，你是否還希望移動用戶繼續使用原來的桌面版?確保讓用戶知道你的網站還有一個移動版本存在。

2.移動URL要遵循習慣用法，并推廣之

雖然沒有規定你必須把原來桌面服務的移動版的地址設置成什么樣，但是這里有些地址設計的慣例可以參考：m.yoursite.com，mobile.yoursite.com 或是yoursite.com/mobile。選擇一個簡單的移動URL，并且將它貼在原來的桌面網站上。

3.設計一個與移動設備相適應的用戶界面

盡量避免讓用戶輸入過多的信息。提供更多的點擊功能。將URL設計得盡量短一點，方便用戶輸入。選取合適的UI組件和功能，使得你的應用在小屏幕上能夠方便地顯示和操作。多考慮一下用戶的訪問情景——或許不是舒服地坐在椅子上，所以盡量讓用戶能夠快速找到想要的信息。確保你的信息足夠的清晰簡潔。

Gmail提供了一個移動版本，更加符合移動設備的訪問方式

4.讓你的網站適合各種移動瀏覽器的訪問

目前存在著全功能(Mobile Safari, Android等)，半功能(BlackBerry)，以及低功能(舊款的翻蓋手機)瀏覽器。想想如何讓你的移動web頁面既能在150×128像素的屏幕上顯示，又能在640×480像素的屏幕上顯示。不同國家的移動瀏覽器標準也有所不同。如果你的用戶來自不同的國家，確保你的設計能夠符合這些國家的設備標準。

減少請求和數據的傳輸

為了減少延遲現象的發生，你的網站或應用程序應該盡量避免向服務器發送請求。在TCP和socket機制中，一次大數據的請求傳輸比多次小數據的請求傳輸速度要快。這一點在移動開發中顯得尤為重要。

使用CSS Sprite處理你的圖片，或者將你的圖片轉換為data URI scheme。可以參考Google Search搜索結果頁面上的logo圖標，它就用到了CSS sprite。Google的一些服務(例如Wave)通過使用data URI scheme將靜態的請求固化，用于在web頁面中內聯靜態數據。(data URI技術無法在舊版本的瀏覽器上使用，它是專門為iPhone，Android和其他***的移動web瀏覽器上的網頁和應用程序設計的。)

如果你的圖片里面包含base64的字符串，那么在壓縮的時候可能會丟失部分數據(這種格式的圖片在傳輸時必須使用gzip壓縮)。但即使這樣，也盡量不要創建一個新的連接或是發送一個新的HTTP請求。

如果你的應用包含了一個CSS文件，那么它還需要導入一些其他的資源;如果包含的是一個JavaScript文件，那么也需要下載一下額外的代碼，將你的網頁需要下載的信息全部放到一個文件中。將你的請求放到一個文件中將提升你的應用的速度。

1.簡化代碼

代碼越少，傳輸的數據越小，你的網頁打開得越快。減少傳輸的數據量不如減少通訊次數有效，對于高延遲的移動連接，每減少一個bit都將有助于提升你的應用加載速度。可以看看一篇關于HTML optional tags and CSS optimization的文章。

2.避免重定向

有時Web頁面和Web服務會對某個請求多次重定向。如果你的服務需要對請求重定向，那么盡量在服務器端處理，而不是在客戶端，盡可能減少客戶端的網絡交互次數。

3.預先考慮并拉長內容下載流程

只有在需要的時候才傳輸數據，可能的話盡可能提前下載數據。不要下載一些用戶根本看不到的圖片。在移動設備上Time-to-text是非常重要的。如果你的設備在顯示一組圖片，可以考慮一起下載它前后的圖片以提升UI的速度，但是不要下載一些相隔太遠的圖片。

可以看看Page Speed中的Web Performance Best Practices介紹。

充分利用HTML的新功能

1.在移動應用中使用Appilcation Cache

HTML5瀏覽器(Mobile Safari, Android)通過使用Application Cache能夠減少頁面啟動時間，并且允許用戶離線訪問。

2.如果可能的話，盡量用CSS3替代圖片

支持CSS3的HTML5瀏覽器能使用各種豐富的屬性，如圓角、漸變色、陰影、文本轉換、畫布等等。使用CSS替代圖片來裝飾你的頁面能夠減少數據傳輸的開銷。

Google的移動Apps上已經使用了HTML5提供的新的APIs。例如Mobile Gmail就用到了Application Cache。Mobile Google Search則使用了HTML5 Geolocation API 來展示搜索到的定位結果。Google Maps for Mobile以及Mobile Gmai都使用了canvas 標志來避免圖片的傳輸。

查看有關HTML 5和移動web App的文章。

3.將***配置設備上運行環境考慮在內

如果你想讓更多的用戶訪問你的網頁或是app，那么你必須確保你的應用能夠在各種設備上兼容。簡潔的代碼不僅使得你的應用響應更快，通常還會使得應用具有更好的兼容性。

一些忠告：

◆ 即使是iPhone或Android這樣的瀏覽器現在也不支持Flash，不要在移動網站中使用Flash。

◆ 許多BlackBerry手機默認禁用CSS和JavaScript，不要指望用戶懂得在菜單中開啟這些功能。

◆ 在性能較差的移動設備上運行JavaScript的代價太高。除了優化網絡處理，還應該盡量使客戶端的代碼精煉高效，要盡量減少應用對內存的占用。

測試，測試用例

如果你是一個web開發者，那么你應該對跨桌面web瀏覽器開發的痛苦深有體會了。跨瀏覽器測試對于移動設備開發是非常重要的一項工作。

為了使得應用適應各種移動設備的屏幕，移動瀏覽器需要靈活地調整文本、圖像以及CSS的顯示方式。

在你手掌上訪問移動web網頁或是使用移動app的體驗與在PC機上的體驗是非常不同的。不要用你在PC上的交互體驗代替你在移動設備上的體驗測試。

測試資源：