Akamai 網路效能 網頁設計 CDN 行動

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

2014-09-25
能否吸引行動使用者,已成為今日企業致勝的必要條件。而網路與行動應用程式的效能表現,則在推動用戶採用率以及參與度時扮演著關鍵角色。除了對網頁下載速度的標準空前嚴苛,使用者也要求更豐富、更具互動性的網路與應用程式使用體驗。
在潛力無窮的網路世界中,傳遞快速而優質的使用者經驗並非想像中容易,其中的挑戰包括了在不同瀏覽器、螢幕尺寸、網路、裝置上最佳化使用者經驗。今天,企業正持續關注能適用各種裝置的網路科技,而這樣的程序即所謂的響應式網頁設計。

響應式網頁設計(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資深產品行銷經理)


追蹤我們Featrue us

本站使用cookie及相關技術分析來改善使用者體驗。瞭解更多

我知道了!