close

頁面加載對訪問的影響 - 網頁設計

http://webdesign.zoapcon.com

頁面訪問慢是網站公認的死穴,如果頁面都沒法訪問,往后再精彩的體驗都等于零。這個問題如果專業點說,叫做“加載”呈現效率。那么具體了講,除常規的服務器處理速度、服務器端網絡帶寬、客戶端網絡帶寬等“硬”問題外,有哪些是技術上沒處理好的“軟”問題?

舉個例子,某頁面瀏覽到一個地方卡住了,至少要等十幾秒才出來內容。排查原因,瀏覽其他網站頁面很快,說明客戶端網絡帶寬沒問題;瀏覽同個服務器上其他網站頁面都很快,說明服務器的處理速度和網絡帶寬也沒問題。分析代碼可能有好幾種情況,在YUI官方加速網站的最佳辦法提到了13條方法,對于普通產品來說,個人認為有幾條應該強化注意,其他(灰色)從性價比上來說則成本有點高。

? Make Fewer HTTP Requests 更少的HTTP請求
  • ? Use a Content Delivery Network 使用CDN
  • ? Add an Expires Header 指定過期時間
  • ? Gzip Components 壓縮結構 ? Put Stylesheets at the Top 樣式表文件在頂部
  • ? Put Scripts at the Bottom 腳本在底部 ? Avoid CSS Expressions 不在css中使用表達式 ? Make JavaScript and CSS External 將Javascript和CSS文件分離到單獨的文件
  • ? Reduce DNS Lookups 減少DNS查詢 ? Minify JavaScript and CSS 精簡Javascript和CSS
  • ? Avoid Redirects 避免重定向 ? Remove Duplicate Scripts 去掉多余的腳本
  • ? Configure ETags 配置實體標簽
  • ? Make Ajax Cacheable 可緩存的AJAX

    當所有假設都理想化之后,是否所有問題都解決了?答案是不一定。因為并不是加載越快就越好,快慢先后都應該有講究,分別從加載速度、加載優先級兩個角度舉例探討。

    加載速度

    我曾經碰到種情況,因為頁面呈現過快反而影響用戶體驗。頁面跳轉交互一閃就過去了,但首屏內容沒怎么變化,結果我不知道頁面是否真進行了跳轉。過快的交互感覺不是流暢,而是迷茫。此問題常見于博客系統,各位同行可以仔細觀察。比如淘寶UED博客,下圖左為首頁首屏,右為網志頁首屏。

     

    http://ued.taobao.com/blog 截圖于2009年10月28日

    UCDChina官方博客也有類似問題,其癥結在于前后頁面布局不當。按理說,不同層級頁面所突出的核心內容應該不同,所以首屏也應該有明顯差異才對。我設計自己博客首頁、列表頁、網志頁布局時,就特別注意了它們之間的傳達關鍵點差異。下圖上為首頁首屏,左為列表頁首屏,右為網志頁首屏。

     

    http://blog.rexsong.com 截圖于2009年10月28日

    從以上例子可以得出結論,加載速度并不是孤立存在可能影響用戶體驗的因素,而在整個設計方案體系中起推動作用。事實上,用戶對加載速度的要求也不是特別高,最關鍵是穩定,不低于用戶期望。慢一點沒關系,只要能給用戶“說法”,比如動態加載提示,用戶反而會覺得“過程”很受用。

    另外從技術原理上來看,60%到80%的優化很容易,但再往后的每一點進步,都得付出相應的成本和資源。因此,不縱觀全局、不考慮客觀條件追求極致優化的做法不可取。

    加載優先級

    在打開到瀏覽頁面的過程中,除加載速度,我留意并發現呈現順序之差也能造成細微的體驗影響。從web原理來講,整個頁面正常應該是從上倒下,逐步呈現。但現實中web往往是豎狀布局居多,因為更符合用戶瀏覽習慣,更易于頁面技術實現。

    豎狀布局就會牽涉到個優先級問題,應該先顯示哪列模塊?答案肯定是最重要的內容。在2004年網站重構技術得到重視之后,此問題已經不算什么新情況了,技術解決方案很成熟。之前最常見的是用table標簽進行布局,造成需要table內的內容全部加載完成之后才顯示的后果。具體表現為可能卡在頁面某處長時間停留,并整個模塊突然出現在頁面上。下圖為三星中文官網錯誤的先顯示廣告,而在重要模塊長時間等待。

     

    http://www.samsung.com/cn 截圖于2008年7月23日

    除模塊的重要性,我認為模塊還有時間先后關系在影響呈現。比如在網站首頁頂部加長幅消息模塊,通知服務器維護、改版新體驗等用以提升用戶體驗的手段很常見。但是否有設計師考慮過這些內容“性質”模塊應該在什么時間出現比較合適?

    我曾經做過個方案規定“改版體驗的提示必須在整個頁面加載完成2秒之后,從上往下滑出推動整個頁面,以求更明顯讓用戶注意的效果。”因為在頁面加載過程中,所有對象都在從無到有的移動顯示,如果在整個頁面相對靜止之后,突出更重要的“改版提示”,效果會順暢很多。同樣的結論還可以用在幫助提示,或某些新功能貼“標簽”上。下圖為雅虎官方新改版的測試邀請。

     

    http://www.yahoo.com 截圖于2009年3月21日

    前幾年彈窗廣告流行時還有個類似案例,因為用戶都特煩彈窗,打開頁面的彈窗往往用戶下意識就去關掉了。后來我設計了個延時10秒的彈窗,一月數據顯示點擊效果平均提升了30%。

    ? 一葉千鳥(轉載請留原文鏈接,)

     

  • arrow
    arrow
      文章標籤
      網頁設計 web design
      全站熱搜
      創作者介紹
      創作者 imarketin 的頭像
      imarketin

      imarketin的部落格

      imarketin 發表在 痞客邦 留言(0) 人氣()