Google官方開發(fā)指南：提升移動Web性能表現(xiàn)的四大建議
移動互聯(lián)網(wǎng)已經(jīng)在全球得到了廣泛的應用。到2009年，有50%的新增的互聯(lián)網(wǎng)訪問都是來自手機設備的(eMarket，2008和2009)。來自Google的內(nèi)部資料顯示，隨著移動瀏覽器的提升，用戶的瀏覽習慣也在逐步改進。
移動瀏覽器上的頁面布局與桌面瀏覽器有著顯著的差異，所以，想要在移動設備上開發(fā)出優(yōu)秀的瀏覽器，有些注意事項是需要開發(fā)者事先了解的。對于如何在移動設備上開發(fā)出高性能、體驗良好的web應用，Google網(wǎng)絡管理員Jeremy Weinstein給出了幾點技術和非技術方面的建議(譯者注：原文來自Google Code，可以認為是Google官方的開發(fā)指南)。
讓你的網(wǎng)頁和Apps更適合移動設備訪問
1.在桌面版應用上提供一個顯著的移動版入口
如果你有一個包含大量圖像的網(wǎng)站，當你為它開發(fā)了一個移動版本，你是否還希望移動用戶繼續(xù)使用原來的桌面版?確保讓用戶知道你的網(wǎng)站還有一個移動版本存在。
2.移動URL要遵循習慣用法，并推廣之
雖然沒有規(guī)定你必須把原來桌面服務的移動版的地址設置成什么樣，但是這里有些地址設計的慣例可以參考：m.yoursite.com，mobile.yoursite.com 或是yoursite.com/mobile。選擇一個簡單的移動URL，并且將它貼在原來的桌面網(wǎng)站上。
3.設計一個與移動設備相適應的用戶界面
盡量避免讓用戶輸入過多的信息。提供更多的點擊功能。將URL設計得盡量短一點，方便用戶輸入。選取合適的UI組件和功能，使得你的應用在小屏幕上能夠方便地顯示和操作。多考慮一下用戶的訪問情景——或許不是舒服地坐在椅子上，所以盡量讓用戶能夠快速找到想要的信息。確保你的信息足夠的清晰簡潔。
Gmail提供了一個移動版本，更加符合移動設備的訪問方式
4.讓你的網(wǎng)站適合各種移動瀏覽器的訪問
目前存在著全功能(Mobile Safari, Android等)，半功能(BlackBerry)，以及低功能(舊款的翻蓋手機)瀏覽器。想想如何讓你的移動web頁面既能在150×128像素的屏幕上顯示，又能在640×480像素的屏幕上顯示。不同國家的移動瀏覽器標準也有所不同。如果你的用戶來自不同的國家，確保你的設計能夠符合這些國家的設備標準。
減少請求和數(shù)據(jù)的傳輸
為了減少延遲現(xiàn)象的發(fā)生，你的網(wǎng)站或應用程序應該盡量避免向服務器發(fā)送請求。在TCP和socket機制中，一次大數(shù)據(jù)的請求傳輸比多次小數(shù)據(jù)的請求傳輸速度要快。這一點在移動開發(fā)中顯得尤為重要。
使用CSS Sprite處理你的圖片，或者將你的圖片轉換為data URI scheme?？梢詤⒖糋oogle Search搜索結果頁面上的logo圖標，它就用到了CSS sprite。Google的一些服務(例如Wave)通過使用data URI scheme將靜態(tài)的請求固化，用于在web頁面中內(nèi)聯(lián)靜態(tài)數(shù)據(jù)。(data URI技術無法在舊版本的瀏覽器上使用，它是專門為iPhone，Android和其他***的移動web瀏覽器上的網(wǎng)頁和應用程序設計的。)
如果你的圖片里面包含base64的字符串，那么在壓縮的時候可能會丟失部分數(shù)據(jù)(這種格式的圖片在傳輸時必須使用gzip壓縮)。但即使這樣，也盡量不要創(chuàng)建一個新的連接或是發(fā)送一個新的HTTP請求。
如果你的應用包含了一個CSS文件，那么它還需要導入一些其他的資源;如果包含的是一個JavaScript文件，那么也需要下載一下額外的代碼，將你的網(wǎng)頁需要下載的信息全部放到一個文件中。將你的請求放到一個文件中將提升你的應用的速度。
1.簡化代碼
代碼越少，傳輸?shù)臄?shù)據(jù)越小，你的網(wǎng)頁打開得越快。減少傳輸?shù)臄?shù)據(jù)量不如減少通訊次數(shù)有效，對于高延遲的移動連接，每減少一個bit都將有助于提升你的應用加載速度?？梢钥纯匆黄P于HTML optional tags and CSS optimization的文章。
2.避免重定向
有時Web頁面和Web服務會對某個請求多次重定向。如果你的服務需要對請求重定向，那么盡量在服務器端處理，而不是在客戶端，盡可能減少客戶端的網(wǎng)絡交互次數(shù)。
3.預先考慮并拉長內(nèi)容下載流程
只有在需要的時候才傳輸數(shù)據(jù)，可能的話盡可能提前下載數(shù)據(jù)。不要下載一些用戶根本看不到的圖片。在移動設備上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替代圖片來裝飾你的頁面能夠減少數(shù)據(jù)傳輸?shù)拈_銷。
Google的移動Apps上已經(jīng)使用了HTML5提供的新的APIs。例如Mobile Gmail就用到了Application Cache。Mobile Google Search則使用了HTML5 Geolocation API 來展示搜索到的定位結果。Google Maps for Mobile以及Mobile Gmai都使用了canvas 標志來避免圖片的傳輸。
3.將***配置設備上運行環(huán)境考慮在內(nèi)
如果你想讓更多的用戶訪問你的網(wǎng)頁或是app，那么你必須確保你的應用能夠在各種設備上兼容。簡潔的代碼不僅使得你的應用響應更快，通常還會使得應用具有更好的兼容性。
一些忠告：
◆ 即使是iPhone或Android這樣的瀏覽器現(xiàn)在也不支持Flash，不要在移動網(wǎng)站中使用Flash。
◆ 許多BlackBerry手機默認禁用CSS和JavaScript，不要指望用戶懂得在菜單中開啟這些功能。
◆ 在性能較差的移動設備上運行JavaScript的代價太高。除了優(yōu)化網(wǎng)絡處理，還應該盡量使客戶端的代碼精煉高效，要盡量減少應用對內(nèi)存的占用。
測試，測試用例
如果你是一個web開發(fā)者，那么你應該對跨桌面web瀏覽器開發(fā)的痛苦深有體會了?？鐬g覽器測試對于移動設備開發(fā)是非常重要的一項工作。
為了使得應用適應各種移動設備的屏幕，移動瀏覽器需要靈活地調整文本、圖像以及CSS的顯示方式。
在你手掌上訪問移動web網(wǎng)頁或是使用移動app的體驗與在PC機上的體驗是非常不同的。不要用你在PC上的交互體驗代替你在移動設備上的體驗測試。
測試資源：
User Agent Switcher extension for Firefox. 更換桌面上的用戶代理，檢測在更換代理后網(wǎng)頁能否繼續(xù)正常顯示。
Page Speed Firefox/Firebug Addon.評估網(wǎng)頁的性能并給出改善建議。
其他資料
原文出處：Make the mobile web faster
譯文出處：WebAppTrend(WebAppTrend是一個獨立技術博客，主要關注Web App發(fā)展前沿與實踐，以及智能瀏覽器發(fā)展。)
【編輯推薦】
