當前位置: 主頁 > 資訊中心 > SEO知識 >

如何優化響應式站點的移動性能?

發表日期:2015-11-24 11:11作者來源:旭昇SEO優化公司瀏覽次數: 標簽:響應式

    在這篇文章中,我們會談到移動互聯網和響應式設計的關系,首先將介紹如何巧妙的運用響應式設計,為什么性能對移動端非常重要,為什么響應式設計不能作為你網站的目標,最后技術的性能問題幫助我們更好的理解這問題。
 
 
自2000年開始,設計者和開發者就把移動設備的問題過于簡單化,以至于現在仍然有人認為響應式網頁設計能解決一切問題。
 
大家必須明白,凌駕于任何目標,移動網絡體驗必須和閃電一樣快。迅速、實用、兼容的體驗對所有移動設備都是挑戰。當你使用響應式設計時,這些挑戰都存在。從一開始就重視性能會讓過程容易些。
 
響應式設計是很棒,但不是萬能鑰匙。如果你在移動設備上一味堅持,在轉換率后就可能隱藏著性能問題。大約有11%的網站是響應式,這個數字每月都在增長,所以現在是談論這個問題的時機了。
 
據Guy Podjarny研究,72%的響應式網站不分屏幕大小都提供相同的字節,盡管這會降低移動網絡連接。不是所有用戶都有耐心等著網站加載。
 
對響應式設計存在的問題有了基本認識,我們就能減低它帶來的損失。
 
移動網站來自過去
 
我不是說你不應該采用響應式設計或者去用m.*的子域名。事實上,現在社會分享無處不在,不分設備,分配給給文檔一個URL,這是聰明的做法。但這并不意味著一個單獨URL應該提供相同的文檔或每一個設備都應該下載相同的資源。
 
援引Ethan Marcotte的話,他創造了“響應式網頁設計”這個術語。
 
最重要的是,響應式網頁設計的初衷不是要取代移動網頁。——Ethan Marcotte
 
 
交互、移動、快速
 
如果我們能使用一些其他的技術,就可以實現獲得響應式設計好處的同時,不影響移動設備的性能。響應式設計從來不是意味著要解決“性能”,這也是為什么我們不能因此指責它的原因。然而,相信它能解決你所有問題,這大錯特錯。
 
設計響應式很重要,因為我們需要解決跨桌面和移動端視窗大小范圍的問題。但是只考慮屏幕大小就低估了移動設備。桌面和移動端的界限正在變得模糊,基于不同的設備對我們而言仍然有多種可能性。但是我們還不能通過媒體查詢來決定響應式設計的功能。一些評論家稱之為“可靠的響應式網頁設計”,然而另一些人則認為它是伴隨現代視覺的響應式網頁設計。在沒有了解其基本語義的情況下,我們需要搞清楚這個問題。
 
雖然沒有可應用于各類文檔的萬全之策,但是能夠運用一些技巧來改善現有響應式的解決辦法,并且力求性能最大化。

實現每一個文檔對所有的設備都使用相同的URL和相同的內容,結構不必要相同。
 
當從零開始,遵循“移動先行”的方法。
 
在一個真實設備上測試當資源加載和顯示會發生什么。不要依賴調整你的桌面瀏覽器。
 
使用優化工具測量和提高性能。
 
通過JavaScript傳輸響應圖片,雖然我們更期盼著瀏覽器供應商(例如srcset)能解決這個問題當你需要當前設備具備加載條件時,只加載JavaScript,這會在onload事件之后發生。

對移動設備,內聯文檔的原始視圖,或者發送一屏顯示內容。
 
使用下面一種或幾種技術應用智能響應式的解決方案:條件加載、按組響應、服務器端層(如適應性方法)。
 
條件加載
 
不要總是在CSS中依賴media queries,因為瀏覽器將會為所有設備加載和解析所有選擇器和樣式 (后面詳細討論)。這就意味著手機為了一個大屏要下載和解析CSS。因為CSS塊的呈現,你要浪費一些時間等待聯接成功。
 
在設備上用JavaScript的matchMedia查詢來代替CSS media queries,你知道這些內容是不會變化的。例如,大家都知道iPhone不能動態的轉換成iPad的規格,所以我們只在正在需要CSS時才用。
 
可以用特征檢測,例如 Modernizr,對UI和功能性做出更明智的決定而不是僅僅根據屏幕尺寸。
 
按組響應
 
在處理簡單文檔、為臺式電腦和智能手機提供相同的HTML時,雖然為我們可以讓所有屏幕依賴一個單一的HTML基礎和響應式設計,但這并不總是最好的解決方案。為什么呢?同樣是由于移動設備的性能。
 
即使我們在服務器端儲存相同的文檔,但是根據設備組別的不同給用戶不同的文檔。舉個例子,為一個6英寸甚至更大的屏幕提供大的浮動菜單,為一個小屏幕提供漢堡菜單。在每個組群里,使用響應時技術以適應不同的場景,例如肖像模式和風景模式的轉換,切換iPhone(320像素寬)、5英寸Android設備(360英寸)和平板(400像素)。
 
服務器端層
 
智能響應策略的最后一個選擇是服務器。
 
服務器端功能檢測和決策不是移動網絡的新鮮玩意。類似 WURFL 和Device Atlas的庫在市場上有好多年,響應式設計和服務器組件的混合也眾所周知。有時被稱為是響應式設計和服務器端組件(RESS),有時又叫自適應設計,這提高了響應式設計的速度和可用性,同時每一個服務器端都保持一個代碼庫。
 
很遺憾的是。這些技術這幾年并沒有什么突破性的發展。只能在博客和雜志里看到一些開發者對“RESS”、“響應式”、“自適應”做比較。原因就是:我們是前端專業人士。任何涉及到服務器的事情看起來都是不太愉快的問題。在一些情況下,前端設計師能把握好服務器的腳本,另一些情況是,服務器由遠程開發團隊管理,設計師不想每做一次小的UI改變就要和遠程團隊溝通處理。我能體會這種感覺。
 
這就是在大型項目中要花時間思考新架構層的原因,這樣前端工程師對服務器做決定時不會影響到后端架構。Node.js是一個極好的備選平臺,是介于當前企業后端基礎和前端之間的服務器端層。
 
在這個新的端層里,前端的工程師可以根據有現實的決定權,這會使得在不觸及后端架構的情況下,讓所有設備上的體驗更為快速、響應、可用。
 
想了解更多相關網站建設經驗,請點入官網。
如沒特殊注明,文章均為旭昇SEO優化公司原創,轉載請注明來自http://www.5804724.live/news/29.html
相關新聞

企業網站建設要重視網站兼容

[企業網站在設計制作的時候,要考慮到兼容性方面的東西,比如要兼容用戶的瀏....

日期:2016-08-09 14:02:54 瀏覽次數:119

seo發布內容的標準是什么?

[基礎版 四處一詞 標題 關鍵詞標簽(因為URL出現關鍵詞) 內容里面多次出現想....

日期:2018-11-22 22:53:15 瀏覽次數:150

深度分析百度綠蘿算法的見解

[綠蘿算法是指針對買賣鏈接作弊的網站,對于買賣鏈接會干擾搜索引擎算法,在....

日期:2019-03-11 16:09:01 瀏覽次數:100

外貿營銷網站建設特點

[目前外貿B2B與B2C竟爭激烈,企業要自己建立B2B和B2C外貿銷售平臺,由于缺乏網絡....

日期:2016-04-07 17:24:39 瀏覽次數:194

建站中需要用到的優化措施

[對于現在 網站建設 變得越來越簡單,但是某些建站技術的人沒有相應的優化知....

日期:2015-11-09 16:53:30 瀏覽次數:191

網站設計需要注意哪些

[在網站的設計的時候需要注意哪些事情.我們在這里為你說說.讓你的設計的風格....

日期:2015-12-22 16:25:22 瀏覽次數:140

品牌化網站視覺設計之“淺藍

[淺藍色給人一種很寧靜安靜的心理感受。淺藍色系有淡雅、清新、浪漫、高級的....

日期:2018-05-23 00:29:57 瀏覽次數:173

企業網站如何做好內容優化工

[網站建設公司非常多,而網站的價格也是參差不齊,從1千到百萬不等,但對于....

日期:2018-06-27 15:12:15 瀏覽次數:159

網站更換域名有什么損失呢?

[網站更換域名會對網站帶來比較大的影響,大一點的改動就相當于重新做了一個....

日期:2014-12-05 21:12:04 瀏覽次數:164

企業營銷型網站怎么做

[企業做了營銷型網站沒有流量怎么辦?用戶來了就跑怎么辦?其實很多時候不是....

日期:2014-10-09 00:00:07 瀏覽次數:131

廣州SEO談網站降權出現的情況

[今天我們來談 網站降權 后會出現那些問題,是由于那些問題導致網站被降權?....

日期:2019-03-21 17:06:34 瀏覽次數:178

網站設計中五個錯誤將毀掉你

[網站設計發控他們的創造力,但還是需要按規矩制作,如果網站設計上出現這些....

日期:2016-03-23 16:54:51 瀏覽次數:117

相關標簽
響應式
熱門地區
成都 江西 長春 吉林 重慶 四川 成都 北京 濟南 山東 天津 河北 石家莊 廊坊 山西 太原 包頭 遼寧 沈陽 大連 黑龍江 哈爾濱 上海 江蘇 南京 浙江 杭州 合肥 福建 福州 河南 鄭州 湖北 武漢 湖南 長沙 西安 蘭州
?
QQ在線咨詢
咨詢熱線
020-82035113
QQ咨詢
2053034165
今天山西十一选五