建站常識

頁面加載對訪問的影響

2009-10-29 18:28:00

頁面訪問慢是網(wǎng)站公認(rèn)的死穴，如果頁面都沒法訪問，往后再精彩的體驗都等于零。這個問題如果專業(yè)點說，叫做“加載”呈現(xiàn)效率。那么具體了講，除常規(guī)的服務(wù)器處理速度、服務(wù)器端網(wǎng)絡(luò)帶寬、客戶端網(wǎng)絡(luò)帶寬等“硬”問題外，有哪些是技術(shù)上沒處理好的“軟”問題？

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

?
Make Fewer HTTP Requests 更少的HTTP請求
?
Use a Content Delivery Network 使用CDN
?
Add an Expires Header 指定過期時間
?
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文件分離到單獨的文件
?
Reduce DNS Lookups 減少DNS查詢
?
Minify JavaScript and CSS 精簡Javascript和CSS
?
Avoid Redirects 避免重定向
?
Remove Duplicate Scripts 去掉多余的腳本
?
Configure ETags 配置實體標(biāo)簽
?
Make Ajax Cacheable 可緩存的AJAX

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

加載速度

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

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

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

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

加載優(yōu)先級

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

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

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

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