怎么提升移動Web性能

這篇文章主要介紹“怎么提升移動Web性能”，在日常操作中，相信很多人在怎么提升移動Web性能問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么提升移動Web性能”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

讓你的網頁和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，那么你必須確保你的應用能夠在各種設備上兼容。簡潔的代碼不僅使得你的應用響應更快，通常還會使得應用具有更好的兼容性。

到此，關于“怎么提升移動Web性能”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！