在當今的超級互聯(lián)世界中，網(wǎng)絡和移動應用程序的性能在推動客戶的采納和參與方面發(fā)揮著前所未有的關鍵作用。終端用戶有著非常高的期望值，包括更快的頁面加載速度，更豐富、更引人入勝的網(wǎng)絡體驗和應用程序。

與此同時，移動是快速發(fā)展的全球性現(xiàn)象，無論是業(yè)務、信息還是娛樂，移動正在改變我們與內容互動的方式——。因此，通過快速高質量的網(wǎng)絡體驗與移動用戶進行互動的能力成為一項業(yè)務要求，以及成功的首要條件。如果忽視移動用戶的需求，就有可能損失很大一部分、甚至越來越多的業(yè)務。

響應式網(wǎng)頁設計采用正在迅速增長

然而，在這個美好的新世界提供快捷優(yōu)質的體驗并不容易，需要面臨跨越不同瀏覽器、屏幕尺寸、網(wǎng)絡和設備來優(yōu)化性能的挑戰(zhàn)。因此，企業(yè)尋求能夠同時適用于每種設備的技術，這一過程使響應式網(wǎng)頁設計(RWD)應運而生。

響應式網(wǎng)頁設計是一種網(wǎng)頁開發(fā)方法，指網(wǎng)頁能夠應響應載入的環(huán)境(主要是屏幕尺寸)并相應地更改用戶界面。這種技術包括一系列靈活的網(wǎng)格和布局組合、圖片以及對CSS3媒體查詢的智能運用。RWD頁面包含了展示所有版本的網(wǎng)站，包括移動和桌面視圖在內所需的HTML。CSS和JavaScript會在瀏覽器中運行，并會隱藏或修改內容，以適應屏幕尺寸。

RWD的使用與日俱增，一個原因就是RWD可在每次有新移動設備類別進入市場時，免于重新設計和開發(fā)。

如前所述，采用RWD戰(zhàn)略聽上去像是一個理想的解決方案。但是，它并不是改進移動用戶體驗的殺手锏。事實上通過RWD網(wǎng)站成功與移動用戶進行互動并不總是那么容易。隨著移動設備變得更強大，網(wǎng)絡變得更快、更加一致，移動終端用戶的期望值也會隨之增長。

提供快速優(yōu)質的網(wǎng)絡體驗并不容易

如果RWD不是萬能的，那么這類網(wǎng)站面臨的分發(fā)挑戰(zhàn)又是什么呢?在最近對RWD網(wǎng)站組成及其對網(wǎng)絡性能影響所做的調查中，347個 RWD網(wǎng)站在不同的屏幕分辨率上進行了測試，并且對比了在每種分辨率上下載每個頁面所需的字節(jié)數(shù)。調查結果顯示，72%的RWD網(wǎng)站在不同的屏幕分辨率上的尺寸都大致相同，22%的網(wǎng)站只是稍微小一點。

同樣重要的是，不僅大部分頁面會在不同的設備上提供相同的payload，并且相同的有效荷載也與頁面內容更多的總體趨勢保持一致(平均頁面大小接近1.2MB)。

RWD開發(fā)頁面帶來的一個更大更復雜的挑戰(zhàn)是它們必須交付到終端用戶的瀏覽器上，隨后這些瀏覽器需要對頁面進行處理和渲染。在計算能力有限、動力不足的移動設備上，以及受限的無線和蜂窩網(wǎng)絡上，這會對用戶體驗產(chǎn)生不利影響。

從終端用戶角度來看，在移動設備上提供大型復雜頁面意味著什么?下圖顯示了一個終端用戶在各種同類最佳設備/網(wǎng)絡上訪問美國零售商的RWD網(wǎng)站主頁的體驗。圖中的性能指標通過一個使用Safari遠程調試功能的空瀏覽器緩存來捕捉。每個設備/網(wǎng)絡進行的十項測試是通過下圖顯示的中間數(shù)字頁面加載時間(onLoadevent)而進行的。結論顯而易見，在無線網(wǎng)絡上向移動設備交付相對比較小的700KB網(wǎng)站也會導致嚴重的性能缺陷。

圖1：示例RWD網(wǎng)站并未達到終端用戶的性能期望值

從根本上說，終端用戶并不關心在無線和蜂窩網(wǎng)絡上向受限設備提供優(yōu)質速度的基礎技術挑戰(zhàn)。他們只要求網(wǎng)站能夠像他們希望的那樣快速加載和運行。終端用戶期望值只會變得越來越高，相應地，他們也希望網(wǎng)絡應用程序變得更快、更豐富、更加引人入勝。

提供快速優(yōu)質響應式網(wǎng)頁設計網(wǎng)站的步驟

如何才能提供快速、高質量的RWD網(wǎng)站?如前所述，RWD頁面包含了展示所有版本的網(wǎng)站，包括移動和桌面視圖在內所必要的HTML。CSS和JavaScript在瀏覽器中運行，并會隱藏或修改內容，以適應屏幕尺寸。在智能手機上，這往往意味著瀏覽器需要下載并展示桌面網(wǎng)站所需的全部內容，讓CSS/JS隱藏絕大部分內容。

第一步要關注真實頁面以及向終端用戶提供的相關對象。對于那些希望交付復雜RWD網(wǎng)站相關的開發(fā)者來說，也有多種選擇。首先，讓內容盡可能地靠近終端用戶，例如使用CDN并充分利用SPDY(一個傳輸網(wǎng)絡內容的開放式網(wǎng)絡協(xié)議，與無線網(wǎng)絡尤為相關)這樣的最佳交付機制。

接下來關注于RWD應用程序、HTML、圖像、JavaScript 和CSS對象的組成要素。為了更快加載頁面，重點是：

· 減少請求數(shù)量

· 減少字節(jié)數(shù)量

· 加速渲染

下面我們來詳細探討這些因素。

減少請求數(shù)量

最快的請求是不發(fā)起請求。每個客戶端的HTTP請求和服務器相應組合至少代表網(wǎng)絡上的一個往返。根據(jù)終端用戶的情況及其離原始服務器的距離，一個請求往返需要幾秒鐘來完成。一個網(wǎng)頁在渲染內容之前需要幾十個HTTP請求，而這些請求往往會因為特定瀏覽器限制的連接數(shù)量而彼此拖延。為了減少往返，需要使用多種技術來消除不必要的請求，如合并多個CSS和JavaScript文件，內聯(lián)圖像，以及利用HTML5中新的緩存功能。

圖2：減少請求的一個簡單的辦法就是將多個CSS或JavaScript文件合并到一個文件夾中

減少字節(jié)數(shù)

原理很簡單：網(wǎng)頁越大(按字節(jié)數(shù)衡量)，在受限網(wǎng)絡上交付網(wǎng)頁的時間就越長，處理器處理和渲染內容的時間也就越長。圖像尤其是RWD網(wǎng)站的一個難題，通過調整圖片格式、改進緩存管理、壓縮文件以及刪除注釋、空格和圖像元數(shù)據(jù)等數(shù)據(jù)而將文件尺寸保持在可控范圍內。自動化解決方案旨在幫助為合適的設備提供合適的圖像分辨率，并避免過大圖像，無論是大屏幕還是小屏幕，在用戶能夠感知到的范圍內保持圖像質量。例如，有的頁面可專為加載當前視窗內可視的圖片而優(yōu)化。隨著用戶下拉頁面，新圖像按需加載。按需加載圖像有助于改進頁面加載時間，還可在用戶沒有真正下拉頁面的情況下減少帶寬。特別是對RWD網(wǎng)站來說，這種方式可以避免頁面下載隱藏圖片，同樣適用于顯示尺寸或情況。

加速渲染

處理網(wǎng)頁是一個復雜的流程。瀏覽器在加載時采用復雜的邏輯做出決策，例如哪些文件用串行方式下載，哪些用并行方式下載，哪些資源類型會阻止渲染，如何管理其連接。與此同時，瀏覽器必須解析和執(zhí)行復雜的HTML、CSS和JavaScript代碼，這些代碼往往沒有被明確定義。不幸的是，瀏覽器并不能提前識別網(wǎng)站，并會在處理頁面時被迫采用通用邏輯。新舊瀏覽器之間的邏輯變化受限于向后兼容，且不是根據(jù)網(wǎng)站定制。延遲打印樣式表、避免社交按鈕妨礙渲染，以及預取下個頁面等技術可引導瀏覽器做正確的事。因此，用戶就能獲得真正快速的用戶體驗。

圖3：由于字節(jié)數(shù)和請求數(shù)量降低，優(yōu)化過的RWD網(wǎng)站速度明顯提高，且渲染速度更快。

結論

制作快速RWD網(wǎng)站未必容易，需要相當多的專業(yè)知識和資源。只有在極少數(shù)的機構內部擁有足夠的開發(fā)者或專業(yè)知識來采取這一措施。隨著RWD的演進，這個為所有用戶提供快速優(yōu)質的網(wǎng)絡體驗的新模式也變得人所共知。尤其是一種名為RESS(Responsive Web Design + Server Side Components))的方法，似乎融合了當前移動交付技術的所有優(yōu)點，同時讓性能保持領先。此外，如前所述，對于那些希望交付復雜RWD網(wǎng)站相關的開發(fā)者來說，也有多種選擇。例如：將內容遷移到內容分發(fā)網(wǎng)絡(CDN)，這種技術可幫助加快網(wǎng)絡性能或充分利用SPDY這樣的最佳交付機制。我們在這里重點介紹的技術也非常有用，一經(jīng)采用，能顯著提高交付快速優(yōu)質網(wǎng)絡體驗的能力，同時與你的移動用戶進行良好互動。

關于作者

Lorenz Jakober是Akamai Technologies公司高級產(chǎn)品營銷經(jīng)理，在網(wǎng)絡及移動應用程序設計、性能優(yōu)化、可用性和交付等領域有著豐富的經(jīng)驗。他熱衷于就移動和網(wǎng)絡性能主題發(fā)表演講并撰寫博客。