Google網站管理員：提升移動Web效能的4個建議

發表於2011-12-04
Go網站Web

移動網際網路已經在全球得到了廣泛的應用。到2009年，有50%的新增的網際網路訪問都是來自手機裝置（eMarket，2008和2009）。來自Google的內部資料顯示，隨著移動瀏覽器的提升，使用者的瀏覽習慣也在逐步改進。

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

1. 讓你的網頁和Apps更適合移動裝置訪問

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

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

1.2 移動URL要遵循習慣用法，並推廣之

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

1.3 設計一個與移動裝置相適應的使用者介面

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

 Google網站管理員：提升移動Web效能的4個建議

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

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

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

2. 減少請求和資料的傳輸

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

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

  Google網站管理員：提升移動Web效能的4個建議

如果你的圖片裡面包含base64的字串，那麼在壓縮的時候可能會丟失部分資料（這種格式的圖片在傳輸時必須使用gzip壓縮）。但即使這樣，也儘量不要建立一個新的連線或是傳送一個新的HTTP請求。

如果你的應用包含了一個CSS檔案，那麼它還需要匯入一些其他的資源；如果包含的是一個JavaScript檔案，那麼也需要下載一下額外的程式碼，將你的網頁需要下載的資訊全部放到一個檔案中。將你的請求放到一個檔案中將提升你的應用的速度。

2.1 簡化程式碼

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

2.2 避免重定向

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

2.3 預先考慮並拉長內容下載流程

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

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

3. 充分利用HTML的新功能

3.1 在移動應用中使用Appilcation Cache

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

3.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 標誌來避免圖片的傳輸。

檢視有關HTML5和移動web App的Google Code部落格。

3.3 將最低配置裝置上執行環境考慮在內

如果你想讓更多的使用者訪問你的網頁或是app，那麼你必須確保你的應用能夠在各種裝置上相容。簡潔的程式碼不僅使得你的應用響應更快，通常還會使得應用具有更好的相容性。

一些忠告：

  • 即使是iPhone或Android這樣的瀏覽器現在也不支援Flash，不要在移動網站中使用Flash。
  • 許多BlackBerry手機預設禁用CSS和JavaScript，不要指望使用者懂得在選單中開啟這些功能。
  • 在效能較差的移動裝置上執行JavaScript的代價太高。除了優化網路處理，還應該儘量使客戶端的程式碼精煉高效，要儘量減少應用對記憶體的佔用。 

4. 測試測試，再測試

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

為了使得應用適應各種移動裝置的螢幕，移動瀏覽器需要靈活地調整文字、影像以及CSS的顯示方式。

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

測試資源：

其他資料

作者：Jeremy Weinstein， Google 網站管理員    英文原文：Make the mobile web faster

相關文章