為你的響應式設計提速

來源:互聯網
上載者:User

   響應式設計是最近的流行詞,能夠打造多螢幕一致體驗。

  現在幾乎每個人都喜歡響應式設計,而且可以是沒有原因的支援,這跟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%的手機使用者有過用手機網購的經驗,手機將會在網購方面取代案頭。因此,更多的商機在行動裝置中,因此,我們需要提供更好的多響應式設計。

  雖然響應式設計仍處於發展初期,但是毫無疑問,市場需求會激發它的快速發展,因此我們需要多掌握一些它的基本規則,多瞭解一點響應式設計。

相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。