網頁加載速度慢，用戶體驗差？這4個技巧就能解決你的煩惱

+ 查看更多

 

網頁加載速度直接決定著網站的成敗。如果一個網站的加載速度很慢，訪客很可能缺乏足夠的耐心去等待，這在無形之中會流失不少訪客，進而影響網站的銷量和效益。反之，如果一個網站的速度很快，訪客可以流暢的完成瀏覽或購買行為，用戶轉化率和銷量都會有所提高。這也是為什么很多站長都很重視網頁的加載速度。不過，就算一個網站的界面設計地再精巧，在某些情況下，網站的內容或元素也是需要一段時間才能加載出來的。而對于用戶來說，這段等待加載的時間直接影響著他們的整體體驗，如果用戶覺得等待的時間非常長，可能就會失去耐心，直接離開。這時，我們怎樣才能讓加載頁面更友好呢？小飛這剛好有一些讓用戶覺得頁面加載很快（也許那只是錯覺）的小技巧，快來和小飛一起看看吧！

 

 

 

假如用戶的網絡連接狀態很差，網站上的內容或元素可能就需要一段時間來加載。而用戶從觸動CTA按鈕那一刻開始就處于等待狀態了，這時如果網站上沒有及時的反饋，比如"請稍候"、"運作中"等提示，用戶一般就會認為系統沒有受到指令，他們就會重復操作。很多不必要的重復點擊都是由于網站加載時沒有反饋引起的，在這個不斷重復的過程中用戶很容易變得焦慮。所以說，為了給用戶提供愉悅的體驗，站長們最好能夠提供一個視覺反饋，告訴用戶內容已經在加載中，只需耐心等待即可。

 

 

 

靜態的視覺反饋是指使用靜止的圖片或文本來表明網站內容正在加載，比如："加載中"、"請稍候"的文字。雖然說在用戶處于等待狀態時，有反饋比沒有要好，但靜態的卻并不可取，這是因為它常常會帶來糟糕的用戶體驗。靜態的視覺反饋往往不能直觀地展示內容或元素正在加載。換句話說，用戶在看到靜態的視覺反饋時依舊無法判斷網頁是否正在加載。

 

 

 

用戶心理研究表明，在CTA按鈕觸動后的1秒后，如果系統沒有給出任何反饋，用戶的注意力馬上就會轉移。而最能有效吸引用戶注意力就要數動畫效果了，所以說站長們可以在網站中使用帶有動效的加載提示。當然，這種樣式的加載提示并不是無條件適應于所有情況的，如果你的網頁加載時間很短，比如1秒以內，用戶可能更不想看到那些所謂"酷炫"的動畫動效。下面介紹兩種不同樣式的動效加載提示：

 

 

在所有帶有動效的加載提示樣式中，無限循環的提示項可以說是最簡單的一種了。這種樣式只告訴用戶需要耐心等待，而沒有說明需要等待多長時間。因此，無限循環的加載提示比較適合加載速度相當快的網頁（加載速度2-10秒），因為如果在加載時間長的網頁中使用這種樣式，用戶很容易就會覺得無趣、失去耐心。無限循環提示項的最佳拍檔就是下拉刷新，它們經常一起搭配使用，作為兩種界面的過渡，幫助用戶更好的理解頁面上的狀態改變。

 

 

 

就像前面說的，無限循環的加載提示并不適合加載時間較長的狀況（加載時間>10秒）。如果網頁的加載時間比較長，讓用戶清楚知道他們需要等待多長時間是非常有必要的，這時站長們就可以采用百分比式的加載提示。或者，你可以提供一個系統加載的預計時間，也不用太精確，比如“可能需要一分鐘”，這就足夠了，這種預計的時間遠比無盡頭的等待要好得多，用戶也會更有動力去堅持等待。

 

 

 

頁面加載時間是長還是短很大程度上取決于用戶的主觀感受，而人的主觀感受是可變的，我們可以適當使用一些小技巧來調整用戶對于等待時間的認知。不過，注意這里并不是要改變網頁實際加載所需的時間。怎樣才能調整用戶對于等待時間的認知呢？一般我們需要讓用戶心情保持愉悅，或專心做另一件事，下面是幾個實用的小技巧：

 

 

在加載頁面使用進度條可以讓用戶更好的感知頁面加載的快慢。進度條的設計也直接影響用戶對于網頁加載時間的認知，進度條如何設計才能讓用戶覺得頁面加載更快、瀏覽體驗更順暢呢？

 

 

 

 

概略式布局是指一個逐漸加載信息出來的空白頁面，在等待加載時上面會呈現一些線條或區塊。它可以看作是傳統動效加載提示的一種替代方案。概略式布局最大的優點在于它并不抽象，而是會向用戶實際展示接下來頁面的哪個區域會出現哪些內容。這能讓用戶將更多的精力集中于動作進程，而不是琢磨等待時間的長短。這種布局在移動端軟件上應用的很多，Facebook的手機端應用就是一個栗子，當屏幕刷新、用戶等待頁面加載時，屏幕上就會出現灰色的區塊和線條，這恰恰是等會圖像和文本會出現的位置，用戶在等待的過程中會更關注不同的區塊處會出現什么內容。雖然，概略式的布局實際上并不會比無限循環的加載提示快多少，但在用戶的心中，它就是快的。

 

 

 

還有一種讓用戶覺得頁面加載速度很快的技巧就是將操作隱藏在后臺。Instagram的圖片上傳操作就是一個好栗子。當用戶選擇一張圖片進行分享時，后臺已經在上傳這張圖片了，不過這時系統會要求用戶給圖片添加名稱和標題，然后當用戶真正點擊"分享"按鈕時，圖片一下子就上傳好了。這時，用戶的操作是十分順暢的，這會給用戶一種頁面加載速度很快的錯覺。

 

 

一圖頂千言，圖片往往比文本更具吸引力，更能抓住用戶的目光。不過相對文本來說，圖片也更大，這時圖片的加載快慢就是個問題了，因為它直接影響著網站的表現力和用戶體驗。怎樣更好的讓圖片加載速度看上去更快？借助模糊效果創造出一種漸進的加載效果是一個很好的選擇。以Medium網站為例，首先，它會加載出模糊效果的縮略圖，然后逐漸變成了清晰的大圖。這些縮略圖很小（只有幾千字節），與模糊效果結合在一起，可以得到比純色效果更好的占位符，且不會增加額外負載。

 

 

 

這里所說的"干擾"并不是真正的干擾，而是能夠在頁面加載時有效吸引用戶注意力的一些視覺效果。這些視覺干擾并不是空穴來風的，而是能和頁面加載很好結合在一起的，能讓用戶在等待的過程中更加愉悅。有趣的動效就是其中一種，下圖就是一個栗子：

 

 

快來起飛頁自助建站平臺做一個響應式網站吧！

 

 

相關閱讀：

《提高網頁訪問速度的一些技巧》