電子商務：對網站速度的感知決定一切

我們都知道網站速度可以對電子商務網站的轉化率和粘性產生巨大影響。

SOASTA 的一項案例研究聲稱，提高移動頁面加載速度可將轉化率提高 25% 以上。 亞馬遜創始人兼首席執行官傑夫·貝佐斯（Jeff Bezos）一直致力於將用戶放在首位，他著名的痴迷於頁面加載速度，並不斷推動他的員工降低亞馬遜網站的頁面速度。

移動主導地位的興起擴大了對更快頁面加載速度的需求，因為用戶通常會以較慢的連接瀏覽網站。

有很多工具可以幫助您提高網頁的速度，例如 Yslow 或 Google Pagespeed Insights，還有各種最佳實踐，例如 css 和 js 縮小和合併、使用 css sprite 以及最小化網絡請求前端開發人員應遵循以確保最大化頁面速度。

我們遇到的問題是，一旦您遵循標準的最佳實踐並實現了巨大的勝利，您很快就會開始看到提高整體頁面速度的努力的回報遞減。

您可以花費大量時間進行越來越小的增量改進，這將是一個昂貴且耗時的過程。 擁有在這個級別工作所需技能和經驗的前端開發人員出奇地稀缺和昂貴。

有些事情是您無法控制的，例如網絡延遲或移動連接速度，因此原始頁面速度可以實現的目標是有限的。 在 3G 連接上，600 毫秒到 1 秒之間的任何時間都被強製網絡開銷所消耗，您對此無能為力。 基於 2 秒的所需頁面加載時間，這給了我們 1 秒的時間來玩。 那不是很多。

不可否認，原始頁面速度非常重要，所有開發人員都應至少遵循標準的最佳實踐。

但是，本文不會討論如何使您的頁面加載得更快。 有很多關於這方面的文章，而且都有些技術含量。

本文將重點關注頁面速度的感知。
哪個更重要：頁面加載速度或用戶感知它加載的速度有多快？

當然，感知對用戶來說是最重要的。

網站速度：第一印象

讓我們專注於您網站的主頁。 它可能包含頂部導航、搜索欄、英雄橫幅，可能包含指向關鍵類別的鏈接、輪播和一些內容。 主頁往往內容繁重，在移動連接上快速加載所有這些內容將是一個巨大的挑戰。

這裡的關鍵是首先優先加載關鍵內容，然後是其他內容——讓用戶盡快看到重要的內容。

在他們處理這些關鍵信息時，您可以開始加載下一層內容。

在移動設備上，大部分內容將從首屏下方開始，因此應在首屏內容之後加載。 合併和縮小 JavaScript 是一種常見的做法。 這通常被視為最佳實踐，但它可能會阻止您將關鍵 JavaScript 的加載優先於不太關鍵的代碼。 相反，您可以考慮拆分縮小和合併的 JavaScript，並根據需要逐步加載它。 在加載搜索框之前，無需加載執行搜索所需的 JavaScript。 用戶在頁面加載後至少幾秒鐘內不會在搜索字段中輸入字符。

讓我們看看一個做得很好的網站。 亞馬遜已將資產和內容的交付分開，以確保盡快為用戶提供關鍵內容，然後按優先級順序逐步加載資產。

該測試是在 iPhone 6 模擬器上運行的，具有良好的 3G 連接並禁用緩存。 最初加載頁面後，我啟動了硬刷新。

在剛剛超過 600 毫秒的時間內，我開始在標題中加載我的名字。 您還會注意到，僅進行了 6 個網絡調用並加載了 5 個資源（3 個 css 文件和 2 個圖像）。

僅僅 50 毫秒後，我現在看到了標題的關鍵組成部分以及主角橫幅。 我已經對速度有了感知，因為關鍵內容正在非常迅速地傳遞給我，並且在加載其他內容時，我的眼睛和大腦需要處理一些東西。

僅 1 秒後，主導航已加載。 您會注意到在此階段沒有可見的滾動條。 這意味著當前沒有首屏下的內容。 沒有浪費寶貴的時間來加載用戶看不到的內容。 您還會注意到到目前為止只發出了 13 個請求。

在不到 2 秒的時間裡，我現在有了一個新的重要內容部分。

在不到 3 秒的時間裡，我現在認為頁面已經完全加載，而頁面實際上只用了不到 5 秒的時間來完全加載。 這表明我認為該站點已完全加載，而實際上它僅加載了 60%。

內容交付的實際時間因人而異，但這非常清楚地說明了亞馬遜如何優先加載移動內容，以確保盡快加載關鍵內容，並確保用戶認為網站開始快速加載。

現在讓我們看一個做得不太好的網站。 該測試使用與之前的 Amazon 測試完全相同的工具和網絡速度運行。 雖然 Charles Tyrwhitt 網站確實優先考慮了一些內容，但要接近亞馬遜的優化，還有很多工作要做。

我在將近 7.5 秒內沒有看到任何內容。 我立刻感覺到這個網站在我的移動設備上速度很慢。 儘管該站點優先考慮標題內容和英雄橫幅，但您可以看到此時已經發出了 90 多個請求，並且，正如我看到的滾動條，很明顯，內容一定是在首屏下方加載的。

8.5 秒後，我可以看到輪播開始加載。 請求的數量沒有改變，這表明大部分與內容相關的請求都是在頁面加載開始時發出的。

直到將近 22 秒，我才意識到該站點現在已完全加載。 該頁面實際上總共需要 28.4 秒才能完全加載。 這表明我認為該頁面實際上已加載 77% 時已完全加載。

很容易看出這兩種體驗之間的明顯區別。 雖然亞馬遜移動主頁的加載速度明顯快於 Charles Tyrwhitt 主頁，但我們已努力確保用戶認為它更快。 用戶開始在總頁面加載時間的 12.5% 內看到加載的內容，而 Charles Tyrwhitt 網站的用戶只看到在總頁面加載時間的 26% 內發生的事情。 在用戶看到進度之前，亞馬遜主頁發出了 6 個網絡請求，而 Charles Tyrwhitt 主頁發出了 90 個請求。

這並不是要過度批評 Charles Tyrwhitt，因為他們在構建網站的方式上絕不是獨一無二的。 許多領域都遵循公認的最佳實踐，但似乎可以做更多的工作來提高對速度的感知以及實際速度。

通過優先考慮 CSS 來提高網站速度

對於前端開發人員來說，將網站的大部分 css 放在少數文件中並始終使用外部而不是內聯 css 是相當普遍的。 這導致的問題是在向用戶顯示任何內容之前需要加載一個大的 css 文件。

解決此問題的方法是拆分您的 css 文件並按順序將它們與關鍵內容一起加載。 如果我們看一下亞馬遜的例子，他們會加載一個大小僅為 6.5k 的 css 文件作為他們最初的 6 個請求之一。 此文件包含在其主頁上設置關鍵內容樣式所需的 css。 事實上，用戶在亞馬遜移動主頁上看到內容之前請求的所有 css 文件的總大小不到 40k，而在 Charles Tyrwhitt 主頁上超過 500k。

這種做法使您可以非常快速地將關鍵內容交付給用戶，並有助於加強對速度的感知。

對 JavaScript 做同樣的事情

除了優先考慮 css 之外，您還應該考慮如何使用 JavaScript 來做到這一點。 幾乎所有電子商務網站都將嚴重依賴 JavaScript 來運行。 只要 JavaScript 沒有阻止關鍵內容的加載，就可以了。 如果我再次以 Charles Tyrwhitt 網站為例並在我的瀏覽器上禁用 JavaScript，我現在可以在 4.5 秒內看到內容加載。 這是我對該網站速度的看法發生了巨大變化，在關鍵內容之前加載的 JavaScript 對該內容沒有影響，因此沒有理由在該內容之後加載 JavaScript。

Web 開發人員可以從亞馬遜等網站關注其網站速度以及實際速度的感知方式中學到很多東西。 儘管他們的網站顯然非常快，但用戶認為它甚至更快，因為他們優先向用戶展示關鍵內容。

速度可能對您的轉化率產生的影響已經很多，零售商應該考慮在優化他們感知的網站性能以及實際網站速度方面進行投資。