圖1:示例RWD網(wǎng)站并未達到終端用戶的性能期望值
從根本上說,終端用戶并不關(guān)心在無線和蜂窩網(wǎng)絡(luò)上向受限設(shè)備提供優(yōu)質(zhì)速度的基礎(chǔ)技術(shù)挑戰(zhàn)。他們只要求網(wǎng)站能夠像他們希望的那樣快速加載和運行。終端用戶期望值只會變得越來越高,相應(yīng)地,他們也希望網(wǎng)絡(luò)應(yīng)用程序變得更快、更豐富、更加引人入勝。
提供快速優(yōu)質(zhì)響應(yīng)式網(wǎng)頁設(shè)計網(wǎng)站的步驟
如何才能提供快速、高質(zhì)量的RWD網(wǎng)站?如前所述,RWD頁面包含了展示所有版本的網(wǎng)站,包括移動和桌面視圖在內(nèi)所必要的HTML。CSS和JavaScript在瀏覽器中運行,并會隱藏或修改內(nèi)容,以適應(yīng)屏幕尺寸。在智能手機上,這往往意味著瀏覽器需要下載并展示桌面網(wǎng)站所需的全部內(nèi)容,讓CSS/JS隱藏絕大部分內(nèi)容。
第一步要關(guān)注真實頁面以及向終端用戶提供的相關(guān)對象。對于那些希望交付復(fù)雜RWD網(wǎng)站相關(guān)的開發(fā)者來說,也有多種選擇。首先,讓內(nèi)容盡可能地靠近終端用戶,例如使用CDN并充分利用SPDY(一個傳輸網(wǎng)絡(luò)內(nèi)容的開放式網(wǎng)絡(luò)協(xié)議,與無線網(wǎng)絡(luò)尤為相關(guān))這樣的最佳交付機制。
接下來關(guān)注于RWD應(yīng)用程序、HTML、圖像、JavaScript 和CSS對象的組成要素。為了更快加載頁面,重點是:
· 減少請求數(shù)量
· 減少字節(jié)數(shù)量
· 加速渲染
下面我們來詳細探討這些因素。
減少請求數(shù)量
最快的請求是不發(fā)起請求。每個客戶端的HTTP請求和服務(wù)器相應(yīng)組合至少代表網(wǎng)絡(luò)上的一個往返。根據(jù)終端用戶的情況及其離原始服務(wù)器的距離,一個請求往返需要幾秒鐘來完成。一個網(wǎng)頁在渲染內(nèi)容之前需要幾十個HTTP請求,而這些請求往往會因為特定瀏覽器限制的連接數(shù)量而彼此拖延。為了減少往返,需要使用多種技術(shù)來消除不必要的請求,如合并多個CSS和JavaScript文件,內(nèi)聯(lián)圖像,以及利用HTML5中新的緩存功能。
圖2:減少請求的一個簡單的辦法就是將多個CSS或JavaScript文件合并到一個文件夾中
減少字節(jié)數(shù)
原理很簡單:網(wǎng)頁越大(按字節(jié)數(shù)衡量),在受限網(wǎng)絡(luò)上交付網(wǎng)頁的時間就越長,處理器處理和渲染內(nèi)容的時間也就越長。圖像尤其是RWD網(wǎng)站的一個難題,通過調(diào)整圖片格式、改進緩存管理、壓縮文件以及刪除注釋、空格和圖像元數(shù)據(jù)等數(shù)據(jù)而將文件尺寸保持在可控范圍內(nèi)。自動化解決方案旨在幫助為合適的設(shè)備提供合適的圖像分辨率,并避免過大圖像,無論是大屏幕還是小屏幕,在用戶能夠感知到的范圍內(nèi)保持圖像質(zhì)量。例如,有的頁面可專為加載當前視窗內(nèi)可視的圖片而優(yōu)化。隨著用戶下拉頁面,新圖像按需加載。按需加載圖像有助于改進頁面加載時間,還可在用戶沒有真正下拉頁面的情況下減少帶寬。特別是對RWD網(wǎng)站來說,這種方式可以避免頁面下載隱藏圖片,同樣適用于顯示尺寸或情況。
加速渲染
處理網(wǎng)頁是一個復(fù)雜的流程。瀏覽器在加載時采用復(fù)雜的邏輯做出決策,例如哪些文件用串行方式下載,哪些用并行方式下載,哪些資源類型會阻止渲染,如何管理其連接。與此同時,瀏覽器必須解析和執(zhí)行復(fù)雜的HTML、CSS和JavaScript代碼,這些代碼往往沒有被明確定義。不幸的是,瀏覽器并不能提前識別網(wǎng)站,并會在處理頁面時被迫采用通用邏輯。新舊瀏覽器之間的邏輯變化受限于向后兼容,且不是根據(jù)網(wǎng)站定制。延遲打印樣式表、避免社交按鈕妨礙渲染,以及預(yù)取下個頁面等技術(shù)可引導(dǎo)瀏覽器做正確的事。因此,用戶就能獲得真正快速的用戶體驗。
圖3:由于字節(jié)數(shù)和請求數(shù)量降低,優(yōu)化過的RWD網(wǎng)站速度明顯提高,且渲染速度更快。
結(jié)論
制作快速RWD網(wǎng)站未必容易,需要相當多的專業(yè)知識和資源。只有在極少數(shù)的機構(gòu)內(nèi)部擁有足夠的開發(fā)者或?qū)I(yè)知識來采取這一措施。隨著RWD的演進,這個為所有用戶提供快速優(yōu)質(zhì)的網(wǎng)絡(luò)體驗的新模式也變得人所共知。尤其是一種名為RESS(Responsive Web Design + Server Side Components))的方法,似乎融合了當前移動交付技術(shù)的所有優(yōu)點,同時讓性能保持領(lǐng)先。此外,如前所述,對于那些希望交付復(fù)雜RWD網(wǎng)站相關(guān)的開發(fā)者來說,也有多種選擇。例如:將內(nèi)容遷移到內(nèi)容分發(fā)網(wǎng)絡(luò)(CDN),這種技術(shù)可幫助加快網(wǎng)絡(luò)性能或充分利用SPDY這樣的最佳交付機制。我們在這里重點介紹的技術(shù)也非常有用,一經(jīng)采用,能顯著提高交付快速優(yōu)質(zhì)網(wǎng)絡(luò)體驗的能力,同時與你的移動用戶進行良好互動。
關(guān)于作者
Lorenz Jakober是Akamai Technologies公司高級產(chǎn)品營銷經(jīng)理,在網(wǎng)絡(luò)及移動應(yīng)用程序設(shè)計、性能優(yōu)化、可用性和交付等領(lǐng)域有著豐富的經(jīng)驗。他熱衷于就移動和網(wǎng)絡(luò)性能主題發(fā)表演講并撰寫博客。