網(wǎng)頁(yè)頁(yè)面加載對(duì)用戶訪問(wèn)的影響

舉個(gè)例子，某頁(yè)面瀏覽到一個(gè)地方卡住了，至少要等十幾秒才出來(lái)內(nèi)容。排查原因，瀏覽其他網(wǎng)站頁(yè)面很快，說(shuō)明客戶端網(wǎng)絡(luò)帶寬沒(méi)問(wèn)題；瀏覽同個(gè)服務(wù)器上其他網(wǎng)站頁(yè)面都很快，說(shuō)明服務(wù)器的處理速度和網(wǎng)絡(luò)帶寬也沒(méi)問(wèn)題。分析代碼可能有好幾種情況，在YUI官方加速網(wǎng)站的最佳辦法提到了13條方法，對(duì)于普通產(chǎn)品來(lái)說(shuō)，個(gè)人認(rèn)為有幾條應(yīng)該強(qiáng)化注意，其他（灰色）從性價(jià)比上來(lái)說(shuō)則成本有點(diǎn)高。

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

當(dāng)所有假設(shè)都理想化之后，是否所有問(wèn)題都解決了？答案是不一定。因?yàn)椴⒉皇羌虞d越快就越好，快慢先后都應(yīng)該有講究，分別從加載速度、加載優(yōu)先級(jí)兩個(gè)角度舉例探討。

加載速度

我曾經(jīng)碰到種情況，因?yàn)轫?yè)面呈現(xiàn)過(guò)快反而影響用戶體驗(yàn)。頁(yè)面跳轉(zhuǎn)交互一閃就過(guò)去了，但首屏內(nèi)容沒(méi)怎么變化，結(jié)果我不知道頁(yè)面是否真進(jìn)行了跳轉(zhuǎn)。過(guò)快的交互感覺不是流暢，而是迷茫。此問(wèn)題常見于博客系統(tǒng)，各位同行可以仔細(xì)觀察。比如淘寶UED博客，下圖左為首頁(yè)首屏，右為網(wǎng)志頁(yè)首屏。

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

UCDChina官方博客也有類似問(wèn)題，其癥結(jié)在于前后頁(yè)面布局不當(dāng)。按理說(shuō)，不同層級(jí)頁(yè)面所突出的核心內(nèi)容應(yīng)該不同，所以首屏也應(yīng)該有明顯差異才對(duì)。我設(shè)計(jì)自己博客首頁(yè)、列表頁(yè)、網(wǎng)志頁(yè)布局時(shí)，就特別注意了它們之間的傳達(dá)關(guān)鍵點(diǎn)差異，如此在較快的交互時(shí)會(huì)有“動(dòng)畫”效果。下圖上為首頁(yè)首屏，左為列表頁(yè)首屏，右為網(wǎng)志頁(yè)首屏。

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

從以上例子可以得出結(jié)論，加載速度并不是孤立存在可能影響用戶體驗(yàn)的因素，而在整個(gè)設(shè)計(jì)方案體系中起推動(dòng)作用。事實(shí)上，用戶對(duì)加載速度的要求也不是特別高，最關(guān)鍵是穩(wěn)定，不低于用戶期望。慢一點(diǎn)沒(méi)關(guān)系，只要能給用戶“說(shuō)法”，比如動(dòng)態(tài)加載提示，用戶反而會(huì)覺得“過(guò)程”很受用。

另外從技術(shù)原理上來(lái)看，60%到80%的優(yōu)化很容易，但再往后的每一點(diǎn)進(jìn)步，都得付出相應(yīng)的成本和資源。因此，不縱觀全局、不考慮客觀條件追求極致優(yōu)化的做法不可取。

加載優(yōu)先級(jí)

在打開到瀏覽頁(yè)面的過(guò)程中，除加載速度，我留意并發(fā)現(xiàn)呈現(xiàn)順序之差也能造成細(xì)微的體驗(yàn)影響。從web原理來(lái)講，整個(gè)頁(yè)面正常應(yīng)該是從上倒下，逐步呈現(xiàn)。但現(xiàn)實(shí)中web往往是豎狀布局居多，因?yàn)楦嫌脩魹g覽習(xí)慣，更易于頁(yè)面技術(shù)實(shí)現(xiàn)。

豎狀布局就會(huì)牽涉到個(gè)優(yōu)先級(jí)問(wèn)題，應(yīng)該先顯示哪列模塊？答案肯定是最重要的內(nèi)容。在2004年網(wǎng)站重構(gòu)技術(shù)得到重視之后，此問(wèn)題已經(jīng)不算什么新情況了，技術(shù)解決方案很成熟。之前最常見的是用table標(biāo)簽進(jìn)行布局，造成需要table內(nèi)的內(nèi)容全部加載完成之后才顯示的后果。具體表現(xiàn)為可能卡在頁(yè)面某處長(zhǎng)時(shí)間停留，并整個(gè)模塊突然出現(xiàn)在頁(yè)面上。下圖為三星中文官網(wǎng)錯(cuò)誤的先顯示廣告，而在重要模塊長(zhǎng)時(shí)間等待。

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

除重要性，我認(rèn)為模塊還有時(shí)間先后關(guān)系在影響呈現(xiàn)。比如在網(wǎng)站首頁(yè)頂部加長(zhǎng)幅消息模塊，通知服務(wù)器維護(hù)、改版新體驗(yàn)等用以提升用戶體驗(yàn)的手段很常見。但是否有設(shè)計(jì)師考慮過(guò)這些內(nèi)容“性質(zhì)”模塊應(yīng)該在什么時(shí)間出現(xiàn)比較合適？

我曾經(jīng)做過(guò)個(gè)方案規(guī)定“改版體驗(yàn)的提示必須在整個(gè)頁(yè)面加載完成2秒之后，從上往下滑出推動(dòng)整個(gè)頁(yè)面，以求更明顯讓用戶注意的效果。”因?yàn)樵陧?yè)面加載過(guò)程中，所有對(duì)象都在從無(wú)到有的移動(dòng)顯示，如果在整個(gè)頁(yè)面相對(duì)靜止之后，突出更重要的“改版提示”，效果會(huì)順暢很多。同樣的結(jié)論還可以用在幫助提示，或某些新功能貼“標(biāo)簽”上。下圖為雅虎官方新改版的測(cè)試邀請(qǐng)。

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

前幾年彈窗廣告流行時(shí)還有個(gè)類似案例，因?yàn)橛脩舳继責(zé)棿?，打開頁(yè)面的彈窗往往用戶下意識(shí)就去關(guān)掉了。后來(lái)我設(shè)計(jì)了個(gè)延時(shí)10秒的彈窗，一月數(shù)據(jù)顯示點(diǎn)擊效果平均提升了30%。