結合響應式網頁設計 給行動網路用戶最佳體驗

響應式網頁設計（RWD）能視不同的原始螢幕尺寸或網頁下載情況，調整使用者介面的表現模式。包含HTML的RWD頁面必須兼顧行動裝置與桌上型電腦等不同版本的網頁顯示模式。RWD正成為如火如荼的趨勢，重要原因在於RWD能有效解決過去每當新型行動裝置上市後，企業必須依新硬體螢幕規格重新調整、開發網站設計的困擾。

響應式網頁設計興起 但效能問題仍大

然而，RWD並非改善行動使用者經驗的萬靈丹。近期一份研究報告針對RWD網站的組成要素，以及RWD對網站表現的衝擊進行分析，對347個RWD網站在不同的顯示螢幕上進行測試，並比較不同解析度的螢幕下載所需之位元差異。

結果顯示，愈來愈大且複雜的RWD網頁將造成解析處理的問題。由於內容必須遞送至終端使用者的瀏覽器再進行處理與顯示，因此在運算能力有限或使用行動無線網路的行動裝置上，皆會帶來負面的網站使用經驗。

▲現今網頁負載普遍加重，目前平均約為1.2MB的大小。但即使以700KB的小型網頁遞送，在不同的裝置及網路上測試，效能體驗往往仍遠低於用戶預期。（資料提供：Akamai）

如何以快速、高品質 遞送RWD網站？

基本上，終端使用者不在乎網頁遞送究竟是透過什麼方式或技術進行，只要求無線網路以及行動網路遞送的速度與品質，他們期待網頁能快速下載完成，此外，終端使用者對網路的期待也日漸升高，同時將以更高的標準來檢視網路應用程式的下載速度、內容豐富度與互動程度。

首先，必須從實際頁面以及與終端消費者相關的遞送內容開始思考。第一個步驟是將內容導向最靠近終端使用者的伺服器（例如CDN內容遞送網路）並運用合適的遞送機制，例如SPDY網路通訊協定，或特別針對無線網路遞送的網路內容傳輸。下一個步驟才開始聚焦於RWD應用、HTML、影像、JavaScript、CCS物件等細部元件。遞送快速的頁面需特別注意以下重點。

降低要求數

最快速的要求即為不做出任何要求。隨著使用者情況及與伺服器之間的相對位置而定，每一次HTTP終端要求與伺服器回應，都必須往返網路全程至少一趟，每趟要費時好幾秒鐘。單一網頁在成功交付內容以前，需要數十?個HTTP要求，通常會伴隨著因瀏覽器的網路連線限制而產生的延遲。為了減少多餘的網路傳遞路徑，我們可以透過一些技術來排除不必要的要求，像是結合數個CSS與JavaScript檔案、以及小型內嵌式影像，並運用HTML5的新型快取功能的方式等。

降低位元數

網頁位元數越大，所需遞送、以及內容處理交付時間也越長。對RWD網站而言，影像傳輸特別令人頭痛，可透過調整影像格式以確保檔案大小，並改善內容快取機制、壓縮檔案，以及移除註解、空白與影像解析度等元數據。自動化解決方案誕生的目的，在於幫助將對的影像解析度遞送至對的裝置中，並能過濾過大的影像檔，在終端使用者不同尺寸的螢幕上顯示出理想影像品質。

舉例來說，最佳化網路頁面的方式包括僅需載入使用者肉眼可見的影像內容，新的頁面內容會隨著使用者拖曳螢幕而進行載入。以即時的方式下載影像能改善頁面的下載時間，不針對使用者尚未拖曳的畫面進行載入以減少頻寬使用。對於RWD網頁而言，這種方式能避免在不同裝置上，因顯示條件不同而被隱藏的影像檔案仍被下載。

加速網站處理與交付

處理網頁內容須歷經複雜的過程，由於無法預先知道網頁內容，瀏覽器被迫使用一般的邏輯進行頁面處理。新型與舊型瀏覽器之間邏輯的替換，會受到反向相容性的限制，且無法針對不同裝置調整內容。推遲執行樣式表（Deferring Print Style Sheets）的技術能提升瀏覽器效率，避免讓社群按鈕（Social Buttons）妨礙頁面處理程序，或提早載入下個頁面的內容。因此，使用者便能獲得快速且滿意的網頁瀏覽經驗。

簡單的使用經驗背後 其實一點也不簡單

快速遞送RWD網頁的程序沒有想像中輕鬆，且需具備一定程度的專業知識與資源。有些企業組織已著手開發這些技術，隨著RWD技術的發展與演進，新的模式將能為使用者遞送快速與高品質的網頁瀏覽經驗。名為RESS（響應式網頁設計+伺服器端元件）的方式結合了最新的行動遞送技術，同時也能確保最前線的優質網路表現。

除此之外，市面上亦有許多協助開發者解決大型RWD網頁遞送挑戰的方案，包括將內容移至能加速網路表現的內容遞送網路（CDN）以及運用SPDY網路通訊協定等，這些技術能大幅改善網路遞送能力，打造快速、優質的網路使用經驗。

（本文作者現任Akamai資深產品行銷經理）