漲姿式：響應式設計提速指南

如今幾乎每一個人都喜歡響應式設計，而且沒有理由，這跟1997年Flash剛出現那會火熱的局面有點類似。然而，傳統的網站爲了提升表現力，有的時候不得不增大文件的尺寸。而響應式考慮手機瀏覽體驗，則須要快速的載入，這就須要經過調整圖像、壓縮圖像、改變圖像大小等手段來解決，本文將講述一些爲響應式設計提速的方法。

什麼響應式設計載入那麼慢？

在全部的設備上，響應式設計載入的HTML元素都相同。就算你的網站專供桌面或者專供平板，在其餘設備上，載入的元素依然相同。這就意味着須要經過網絡傳遞全部的內容，包括了圖像和腳本。

一項去年的調查代表，86%的響應式網站會將一個完整的桌面頁傳送到手機中。若是咱們可以對數據進行精簡、提高瀏覽速度，那麼響應式設計將獲得更好的推廣。

與此同時，響應式設計提升了頁面大小，這也是一個亟待處理的問題。由於研究發現 ，若是3秒以內沒法載入頁面，57%的用戶會選擇離開。

怎樣提升載入性能？

對於那些已經採用響應式設計，如今想要進行進一步優化的人來講，Mobitest能夠用來測量手持設備上網頁的載入性能，這樣就能發現問題，從而解決問題。固然若是設計還在進行或者計劃中，那麼優化起來就更方便了。只須要在設計過程當中注意載入速度便可，這樣就不用過後亡羊補牢了。

爲了提升表現力，咱們須要減小頁面的資源的數量，縮小頁面的尺寸。並不須要能夠的調整頁面的外觀，經過一些工具和手段也能實現」瘦身」。

首先要考慮的就是哪些元素是必要的，哪些是沒必要要的，去掉沒必要要的元素，這樣就能最小化HTTP請求，這樣用戶的等待加載的耗時也最少。這能夠經過壓縮CSS和JS來實現，推薦一款叫作Compass的工具——開源的CSS框架編寫工具。

JavaScript推薦一款工具叫UglifyJS，能夠壓縮代碼。

有選擇的載入

這也是能夠考慮採用的重要手段，很是適用於響應式設計的提速，這樣就能確保手機用戶不會下載那些會下降載入速度的元素。
有選擇性的載入，可以阻攔各類內容的載入，包括社交窗口、圖像、地圖，以及其餘。再採用這種手段以前，最好對網站進行全面的測試，先要了解是哪方面下降了網頁的載入速度，這樣對症下藥，效果才能更好。

圖像

咱們都知道圖像在網頁中佔據了大量的字節。通常在手機上的圖像表現力要比桌面上的差。

若是網站內容不少，便會影響到載入速度，所以就須要截斷一部份內容，這樣就可以提升載入速度。儘管能夠經過改變src和img元素來調整標記來實現此功能，但採用PHP解決方案Adaptive Images無疑會更加輕鬆。該軟件會根據屏幕大小自動作出調整，合理的縮放嵌入的HTML圖像,而不須要改動標記。主要結合了彈性圖片技術（Fluid Image)，可以方便的解決問題，並且節省載入時間。這種自適應圖像只佔用一個htaccess文件，一個php文件，以及一行Javascript代碼，可以判斷訪問用戶的設備屏幕尺寸。

文本

文本一樣也歸入了」瘦身」範圍，在較小的屏幕上，文本的佈局不當可能會致使閱讀問題。FitText可以解決此問題，是一款jQuery插件，自動改變字體大小。FitText只能解決標題問題，段落文本的問題沒法解決。

爲什麼要選擇響應式設計？

跟任何新式的科技和產品，剛過出現時，每每問題繁多，響應式設計也同樣，但並不能忽視它的價值，不能忽視它將帶來的完美體驗。經過響應式設計，咱們能爲用戶提供更好的瀏覽體驗。沒人會由於過去的方法簡單，而採用復古的技術，咱們須要創新，須要用創新解決問題，並在創新的的同時不斷調整、修正，以達到最佳。

Google很是支持響應式設計，他們的建議 使用響應式設計，他們認爲響應式設計師最適合手機的方式。
在社交分享類網站上，響應式設計也大展拳腳，不少手持設備上的體驗已經和桌面上的一致。
說的再遠一點，響應式網站可以提升工做效率，只需更少的工做人員，就能達到更好的工做效果。

價值所在

手機和平板變得愈來愈流行，意味着使用也愈來愈多，愈來愈多的人選擇它們，由於用它們上網更方便。以iOS和Android爲系統的平板電腦在數碼消費市場大行其道，銷量飆升。
目前爲止，響應式設計雖然有諸多不便，可是利大於弊。儘管有些許的載入速度問題，一份調查採訪了不少世界知名品牌，儘管響應式設計有些載入問題，可是可以帶來訪問量的大幅上漲。

響應式設計平均提升了網站23%的手機訪問量，下降了26%的跳出率（跳出率定義了只瀏覽了單個頁面的訪問量佔總訪問量的比率。跳出率可以反映出引導頁的質量，若是引導頁好，用戶會繼續瀏覽其餘頁面，而不是瀏覽單個頁面後就選擇離開。）增長了7.5%的訪問時長。

O’Neill，流行衝浪服飾供應商，在使用響應式設計後，iPad和iPhone上的轉化率(網站轉換率=進行了相應的動做的訪問量/總訪問量)提升了65.7%。在便攜設備上完成的交易額幾乎和桌面設備相同，利潤幾乎增加了一倍。
而Android設備因爲其流行面廣，平臺支持普遍，便攜設備上的轉化率的提高更明顯，而且能稍微帶動桌面設備上的轉化率。
上面分析的僅僅是一個品牌的故事，從中咱們可見響應式設計的做用很是巨大，別忘了，前些年，響應式設計對於社交媒體/社交應用的推廣做用巨大。

如何在響應式設計的同時保證頁面的載入速度，找到最完美的平衡點，這很是值得咱們去研究。切圖網是國內專業的前端公司，面對挑戰，咱們必須勇敢面對，努力的優化、改進，若是由於問題而停滯不前，而選擇逃避，那麼結局只有被淘汰。
67%的手機用戶有過用手機網購的經驗，手機將會在網購方面取代桌面。所以，更多的商機在移動設備中，所以，咱們須要提供更好的多響應式設計。
雖然響應式設計仍處於發展初期，可是毫無疑問，市場需求會激發它的快速發展，所以咱們須要多掌握一些它的基本規則，多瞭解一點響應式設計。

切版qieban（.cn），致力於爲網建公司提供靠譜的前端切圖外包。

來源：http://www.wenqie.cn/response-design-speed-guide/

原文地址：https://medium.com/design-ux/9ecd34a1a0dc

翻譯：MartinRGB