如何爲你的響應式設計提速

響應式設計是最近的流行詞，可以打造多屏幕一致體驗。
如今幾乎每一個人都喜歡響應式設計，並且能夠是沒有緣由的支持，這跟Flash剛出現那會火熱的局面有點類似。然而，響應式設計帶來了表現力的問題，這須要經過調整圖像、壓縮圖像、改變圖像大小等手段來解決。
然而，爲了提升表現力，有的時候不得不增大文件的尺寸。瀏覽體驗須要快速的載入，本文將講述一些爲響應式設計提速的方法。
爲何響應式設計載入那麼慢？
在全部的設備上，響應式設計載入的HTML元素都相同。就算你的網站專供桌面或者專供平板，在其餘設備上，載入的元素依然相同。這就意味着須要經過網絡傳遞全部的內容，包括了圖像和腳本。
一項去年的調查代表，86%的響應式網站會將一個完整的桌面頁傳送到手機中。若是咱們可以對數據進行精簡、提高瀏覽速度，那麼響應式設計將獲得更好的推廣。
與此同時，響應式設計提升了頁面大小，這也是一個亟待處理的問題。由於研究發現 ，若是3秒以內沒法載入頁面，57%的用戶會選擇離開。

怎樣提升載入性能？
對於那些已經採用響應式設計，如今想要進行進一步優化的人來講，Mobitest能夠用來測量手持設備上網頁的載入性能，這樣就能發現問題，從而解決問題。固然若是設計還在進行或者計劃中，那麼優化起來就更方便了。只須要在設計過程當中注意載入速度便可，這樣就不用過後亡羊補牢了。
爲了提升表現力，咱們須要減小頁面的資源的數量，縮小頁面的尺寸。並不須要能夠的調整頁面的外觀，經過一些工具和手段也能實現」瘦身」。
首先要考慮的就是哪些元素是必要的，哪些是沒必要要的，去掉沒必要要的元素，這樣就能最小化HTTP請求，這樣用戶的等待加載的耗時也最少。這能夠經過壓縮CSS和JS來實現，推薦一款叫作Compass的工具——開源的CSS框架編寫工具。
這也是能夠考慮採用的重要手段，很是適用於響應式設計的提速，這樣就能確保手機用戶不會下載那些會下降載入速度的元素。
有選擇性的載入，可以阻攔各類內容的載入，包括社交窗口、圖像、地圖，以及其餘。再採用這種手段以前，最好對網站進行全面的測試，先要了解是哪方面下降了網頁的載入速度，這樣對症下藥，效果才能更好。
咱們都知道圖像在網頁中佔據了大量的字節。通常在手機上的圖像表現力要比桌面上的差。
若是網站內容不少，便會影響到載入速度，所以就須要截斷一部份內容，這樣就可以提升載入速度。儘管能夠經過改變src和img元素來調整標記來實現此功能，但採用PHP解決方案Adaptive Images無疑會更加輕鬆。該軟件會根據屏幕大小自動作出調整，合理的縮放嵌入的HTML圖像,而不須要改動標記。主要結合了彈性圖片技術（Fluid Image)，可以方便的解決問題，並且節省載入時間。這種自適應圖像只佔用一個htaccess文件，一個php文件，以及一行Javascript代碼，可以判斷訪問用戶的設備屏幕尺寸。