《移動優先與響應式Web設計》一2.2 速度

本節書摘來異步社群《移動優先與響應式web設計》一書中的第2章，第2.2節，作者： 【美】luke wroblewski , ethan marcotte 譯者： 司徒卓恆 責編： 趙軒，更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。

移動優先與響應式web設計

人們不論身在何處，都會嘗試使用移動裝置，但并不是到處都有移動網絡，就算有也會很昂貴（視乎用什麼套餐），并且不穩定，以緻網速更慢，等待更久。

設計移動體驗時，必須接受這個現實，并施展渾身解數，設法提高速度。應減少檔案的發送，采用好的浏覽器和伺服器技術，盡量提升傳送速度，減少使用者每月的上網費用。

傳送檔案時，盡量降低檔案大小，減少檔案數量，要求移動使用者減少下載下傳量。可是，由于有移動網絡延遲，發送http要求可能會耗時更多。是以請確定做到如下幾點。

将多幅圖檔壓縮至單一檔案（但要確定解壓後不會太大）。

組合并簡化css和javascript檔案。

盡量不要依賴複雜的javascript函數庫，尤其是隻有一兩個函數時。

同一道理，盡量少用css網格系統(grid system)。

用正确的http标頭，確定能暫存檔案至浏覽器。

如适用，利用現代浏覽器的功能，善用html5，例如canvas和appcache。

還有我的至愛：用css3特性來做圓角、漸變色、文字陰影和方塊陰影。這樣做就不需要用圖像來排版了，這在現代浏覽器上固然美觀，不過就算是舊浏覽器不太支援css3，也能兼顧。但不要過份使用css的效果，否則會有太多效果需要排版，這樣就會減慢速度。

速度不隻在移動平台上才重要。亞瑪遜、雅虎、微軟等公司經常指出，就算網頁加載延遲很短時間（100毫秒），使用者也會察覺，然後轉用其他服務。谷歌做過長期測試，發現表現差會有長遠影響。延遲問題就算修複好，在随後5個星期内，用量仍然會減少。是以在桌面版上，速度同樣重要。

若你以移動優先，并且連接配接移動網絡也夠快，網站和應用程式的桌面版就會快如閃電，使用者一定會喜歡。為何欣然接受移動平台的限制？又有一個理由。