移動端網頁優化
發布時間:2023-02-11 點擊次數:
響應式網頁設計的普及使各個終端的用戶都能夠訪問所需網站。當下有關響應式設計的討論大多圍繞自適應布局的實現展開,的確,網頁內容能與瀏覽器窗口縮放進行精巧的交互是響應式設計的優勢,但也是巨大障礙-一響應 式設計的初衷本應該是在任意終端顯示內容。
時至今日,訪問響應式的網站終端從高速聯網的機頂盒到裝載低端CPU網速欠佳的手機,應有盡有。對于后者的適配愈發重要,因為17%的美國公民把手機當做主力上網設備。
用圣母大學Erik Runyon的話來說,我們對RWD的認知不應該只停留在響應式網頁設計,應該更進一步到有責任感的網頁設計。我們應該竭盡所能優化網站性能,從當前的設計現狀來看,我們還有很長的路要走。
網頁臃腫化
的確,近年來網頁變得越來越臃腫。自2003年以來,單一頁面的平均文件尺寸已經從300 KB增加到1098 KB,超過了1 MB (平均每個頁面要進行85次請求! )。用如此大量的內容來呈現一個簡單的頁面,真是令我感到既驚奇又困惑。Tim Berners-L _ee的第一個頁面只有2.5 KB,只相當于現在頁面平均文件尺寸的1/420。影響文件尺寸的原因有二:圖片和JavaScript,一共占用頁面文件的82%。圖片本身就占用64%。除此之外,更重要的原因存在于我們自身。作為設計師和開發者,我們都受了“網速會越來越快”念頭的驅使。沒錯,這個想法能使我們的工作合理化。
屏幕越來越大,我們擁有更多填充圖片的空間。新的瀏覽器和JavaScript庫使我們能夠提供更豐富的瀏覽體驗。網速越來越快,為什么要擔心網頁文件尺寸呢?我們先走一步,網速總會慢慢追上來的。但在移動終端上,“ 網速越來越快”這個認知已經超過了真實發展情況:現在的網速雖然比撥號上網有了很大改觀,但還遠遠不夠快。想當然地認為網速必然提升會掩蓋我們許多錯誤做法。我們根據桌面端的開發經驗,-味追求根據網速優化網頁性能,卻忽視了移動端網頁性能提升最本質的瓶頸:延遲。
延遲: 移動網絡殺手
雖然移動網絡速度不如有線網絡,但也沒那么糟糕。導致兩者網頁性能差距的罪魁禍首便是延遲。lyaGrigorik在“延遲:網頁性能的新瓶頸”中提到,單純提升網速并不能明顯縮短頁面加載時間。網速超過某個特定值后,無論再如何提速,網頁加載速度都不會發生明顯變化。“舉個例子,將網速從5Mbit/s提升到10Mbit/s,網頁加載時間只縮短了5%。” 但降低網絡延遲卻能明顯提高頁面加載速度。
那么,究竟什么是延遲呢?延遲指瀏覽器向服務器發出資源請求到開始接受響應的時間。
有線網絡的延遲可以達到平均每個請求為20ms,3G網絡的平均延遲則有200 ms秒,相差10倍之巨。下邊我們通過實例來說明延遲如何影響網頁性能:在有線網絡環境中,瀏覽器同時打開4個頁面,平均每個頁面85個請求,總加載時間中延遲占0.4 s; 3G網絡環境中,同樣條件,延遲本身就高達4.5 S。
不能降低移動端的性能期望
由于延遲的差異,我們設計的響應式網頁在移動端的讀取時間是桌面端(我們的開發和測試環境)的10倍。但仔細想想,延遲并沒那么可怕,畢竟用戶也知道移動端頁面的讀取時間要長一-些,所以應該很容易體諒我們吧。大錯特錯! 調查報告顯示,74%的手機用戶認為移動端網頁的加載速度應該和桌面端-樣快。兩年前,這個數字只是58%。同一調查表明,57%的用戶表示在手機上網頁瀏覽體驗不佳,包括加載速度慢等問題,不會向別人推薦該網站或服務; 46%不會再訪問該網站。報告中最驚人的數據與頁面讀取時間有關。2009年, 20%的調查對象表示不會訪問移動端比桌面端加載速度慢5s以上的網站。2011年,同樣是5s的最長等待時間,比例卻上升到74%。如前文所說,這至關重要的5 s中,延遲就占用了4.5 s。這些數字對設計師和開發者而言意味著什么呢?
RWD視外下載
作為移動開發技術,RWD的丑惡一面在于它可以有效隱藏頁面文件尺寸。有的開發者將RWD視為至寶,媒介查詢就像萬金油一樣,一經采用, 立刻就能誕生一個體驗友好的移動端網站。就像Jason Grigsby所說: “CSS的媒介查詢功能已經成了掩飾問題的利器,還給開發者造成輕松打造多終端頁面、前景無限的假象。”
------------------------------------------------------------------------------------------
藍點網絡提供:網站建設、APP開發、微信小程序、400電話、軟件開發、服務器托管/租用等業務。
從2003年開始,我們始終堅守【網站建設】服務,19年從未放棄!!
售前咨詢:0311-8736 0077
售后服務:0311-8736 0066
值班手機:189 3198 6878