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

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

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

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

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

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

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

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

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

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

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

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

        目前存在著全功能（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 文件，那么也需要下載一下額外的代碼，將你的網頁需要下載的信息全部放到一個文件中。將你的請求放到一個文件中將提升你的應用的速度。

        簡化代碼

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

        避免重定向

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

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

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

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

        充分利用 HTML 的新功能

        在移動應用中使用 Appilcation Cache

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

        如果可能的話，盡量用 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 博客。

        將最低配置設備上運行環境考慮在內

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

        一些忠告：

• 即使是 iPhone 或 Android 這樣的瀏覽器現在也不支持 Flash，不要在移動網站中使用 Flash。
• 許多 BlackBerry 手機默認禁用 CSS 和 JavaScript，不要指望用戶懂得在菜單中開啟這些功能。
• 在性能較差的移動設備上運行 JavaScript 的代價太高。除了優化網絡處理，還應該盡量使客戶端的代碼精煉高效，要盡量減少應用對內存的占用。 

        測試、測試，再測試

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

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

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

        測試資源：

• Android Emulator
• BlackBerry Device Simulators
• iPhone
• Opera Mini Simulator
• Palm Pre
• Windows Mobile
• User Agent Switcher extension for Firefox. 更換桌面上的用戶代理，檢測在更換代理后網頁能否繼續正常顯示。
• Page Speed Firefox/Firebug Addon.評估網頁的性能并給出改善建議。

        其他資料

• W3C Mobile Web Best Practices

        文章來源：Make the mobile web faster
       來自: blog.jobbole.com