&

移動(dòng)端網(wǎng)頁優(yōu)化

日期 : 2022-02-10 23:11:28

響應(yīng)式網(wǎng)頁設(shè)計(jì)的普及使各個(gè)終端的用戶都能夠訪問所需網(wǎng)站。當(dāng)下有關(guān)響應(yīng)式設(shè)計(jì)的討論大多圍繞自適應(yīng)布局的實(shí)現(xiàn)展開，的確，網(wǎng)頁內(nèi)容能與瀏覽器窗口縮放進(jìn)行精巧的交互是響應(yīng)式設(shè)計(jì)的優(yōu)勢(shì)，但也是巨大障礙-一響應(yīng) 式設(shè)計(jì)的初衷本應(yīng)該是在任意終端顯示內(nèi)容。
時(shí)至今日，訪問響應(yīng)式的網(wǎng)站終端從高速聯(lián)網(wǎng)的機(jī)頂盒到裝載低端CPU網(wǎng)速欠佳的手機(jī)，應(yīng)有盡有。對(duì)于后者的適配愈發(fā)重要，因?yàn)?7%的美國(guó)公民把手機(jī)當(dāng)做主力上網(wǎng)設(shè)備。
用圣母大學(xué)Erik Runyon的話來說，我們對(duì)RWD的認(rèn)知不應(yīng)該只停留在響應(yīng)式網(wǎng)頁設(shè)計(jì)，應(yīng)該更進(jìn)一步到有責(zé)任感的網(wǎng)頁設(shè)計(jì)。我們應(yīng)該竭盡所能優(yōu)化網(wǎng)站性能，從當(dāng)前的設(shè)計(jì)現(xiàn)狀來看，我們還有很長(zhǎng)的路要走。

網(wǎng)頁臃腫化

的確，近年來網(wǎng)頁變得越來越臃腫。自2003年以來，單一頁面的平均文件尺寸已經(jīng)從300 KB增加到1098 KB，超過了1 MB (平均每個(gè)頁面要進(jìn)行85次請(qǐng)求! )。用如此大量的內(nèi)容來呈現(xiàn)一個(gè)簡(jiǎn)單的頁面，真是令我感到既驚奇又困惑。Tim Berners-L _ee的第一個(gè)頁面只有2.5 KB，只相當(dāng)于現(xiàn)在頁面平均文件尺寸的1/420。影響文件尺寸的原因有二:圖片和JavaScript，一共占用頁面文件的82%。圖片本身就占用64%。除此之外，更重要的原因存在于我們自身。作為設(shè)計(jì)師和開發(fā)者，我們都受了“網(wǎng)速會(huì)越來越快”念頭的驅(qū)使。沒錯(cuò)，這個(gè)想法能使我們的工作合理化。
屏幕越來越大，我們擁有更多填充圖片的空間。新的瀏覽器和JavaScript庫使我們能夠提供更豐富的瀏覽體驗(yàn)。網(wǎng)速越來越快，為什么要擔(dān)心網(wǎng)頁文件尺寸呢?我們先走一步，網(wǎng)速總會(huì)慢慢追上來的。但在移動(dòng)終端上，“ 網(wǎng)速越來越快”這個(gè)認(rèn)知已經(jīng)超過了真實(shí)發(fā)展情況:現(xiàn)在的網(wǎng)速雖然比撥號(hào)上網(wǎng)有了很大改觀，但還遠(yuǎn)遠(yuǎn)不夠快。想當(dāng)然地認(rèn)為網(wǎng)速必然提升會(huì)掩蓋我們?cè)S多錯(cuò)誤做法。我們根據(jù)桌面端的開發(fā)經(jīng)驗(yàn)，-味追求根據(jù)網(wǎng)速優(yōu)化網(wǎng)頁性能，卻忽視了移動(dòng)端網(wǎng)頁性能提升最本質(zhì)的瓶頸:延遲。

延遲: 移動(dòng)網(wǎng)絡(luò)殺手

雖然移動(dòng)網(wǎng)絡(luò)速度不如有線網(wǎng)絡(luò)，但也沒那么糟糕。導(dǎo)致兩者網(wǎng)頁性能差距的罪魁禍?zhǔn)妆闶茄舆t。lyaGrigorik在“延遲:網(wǎng)頁性能的新瓶頸”中提到，單純提升網(wǎng)速并不能明顯縮短頁面加載時(shí)間。網(wǎng)速超過某個(gè)特定值后，無論再如何提速，網(wǎng)頁加載速度都不會(huì)發(fā)生明顯變化。“舉個(gè)例子，將網(wǎng)速?gòu)?Mbit/s提升到10Mbit/s，網(wǎng)頁加載時(shí)間只縮短了5%。” 但降低網(wǎng)絡(luò)延遲卻能明顯提高頁面加載速度。
那么，究竟什么是延遲呢?延遲指瀏覽器向服務(wù)器發(fā)出資源請(qǐng)求到開始接受響應(yīng)的時(shí)間。
有線網(wǎng)絡(luò)的延遲可以達(dá)到平均每個(gè)請(qǐng)求為20ms，3G網(wǎng)絡(luò)的平均延遲則有200 ms秒，相差10倍之巨。下邊我們通過實(shí)例來說明延遲如何影響網(wǎng)頁性能:在有線網(wǎng)絡(luò)環(huán)境中，瀏覽器同時(shí)打開4個(gè)頁面，平均每個(gè)頁面85個(gè)請(qǐng)求，總加載時(shí)間中延遲占0.4 s; 3G網(wǎng)絡(luò)環(huán)境中，同樣條件，延遲本身就高達(dá)4.5 S。

不能降低移動(dòng)端的性能期望

由于延遲的差異，我們?cè)O(shè)計(jì)的響應(yīng)式網(wǎng)頁在移動(dòng)端的讀取時(shí)間是桌面端(我們的開發(fā)和測(cè)試環(huán)境)的10倍。但仔細(xì)想想，延遲并沒那么可怕，畢竟用戶也知道移動(dòng)端頁面的讀取時(shí)間要長(zhǎng)一-些，所以應(yīng)該很容易體諒我們吧。大錯(cuò)特錯(cuò)! 調(diào)查報(bào)告顯示，74%的手機(jī)用戶認(rèn)為移動(dòng)端網(wǎng)頁的加載速度應(yīng)該和桌面端-樣快。兩年前，這個(gè)數(shù)字只是58%。同一調(diào)查表明，57%的用戶表示在手機(jī)上網(wǎng)頁瀏覽體驗(yàn)不佳，包括加載速度慢等問題，不會(huì)向別人推薦該網(wǎng)站或服務(wù); 46%不會(huì)再訪問該網(wǎng)站。報(bào)告中最驚人的數(shù)據(jù)與頁面讀取時(shí)間有關(guān)。2009年， 20%的調(diào)查對(duì)象表示不會(huì)訪問移動(dòng)端比桌面端加載速度慢5s以上的網(wǎng)站。2011年，同樣是5s的最長(zhǎng)等待時(shí)間，比例卻上升到74%。如前文所說，這至關(guān)重要的5 s中，延遲就占用了4.5 s。這些數(shù)字對(duì)設(shè)計(jì)師和開發(fā)者而言意味著什么呢?

RWD視外下載

作為移動(dòng)開發(fā)技術(shù)，RWD的丑惡一面在于它可以有效隱藏頁面文件尺寸。有的開發(fā)者將RWD視為至寶，媒介查詢就像萬金油一樣，一經(jīng)采用，立刻就能誕生一個(gè)體驗(yàn)友好的移動(dòng)端網(wǎng)站。就像Jason Grigsby所說: “CSS的媒介查詢功能已經(jīng)成了掩飾問題的利器，還給開發(fā)者造成輕松打造多終端頁面、前景無限的假象。”