移動頁面速度如何降低您的轉化率

谷歌最近的一項研究表明，糟糕的點擊後著陸頁設計很可能會花費你至少一半的 PPC 預算。

這家搜索引擎巨頭的數據表明，如果網頁在 3 秒內未加載，超過二分之一的移動互聯網用戶將放棄網頁。 截至 2017 年 2 月，平均移動點擊後登陸頁面需要22 秒才能加載。

如果您停下來算一算，您可能會意識到加載緩慢的頁面對您的底線是多麼有害。

如果您每月生成 5,000 名移動點擊後登錄頁面訪問者並轉化其中的 5%，那麼您將在一年內錯失 1,500 次轉化。 如果加載時間超過 3 秒，則有一半的訪問者（假設為每月 2,500 人）甚至在他們跳出之前都沒有看到您的整個點擊後登錄頁面。 更糟糕的是，每次他們這樣做時，您的 PPC 預算都會被耗盡。

但也許您的頁面不會在 3 秒內加載。 也許它會在 5 秒、6 秒或 10 秒內加載。 如果是這樣的話，來自谷歌的數據表明你損失的更多。

新的移動頁面速度基準

您的頁面如何與網絡上的其他頁面疊加？ 為了建立一些新的加載速度基準，谷歌在 2017 年初分析了 126 個國家/地區的 900,000 個廣告的移動點擊後著陸頁。

他們的發現證實了他們的假設：移動頁面因元素過多而“臃腫”。

其中，汽車、零售和科技行業的頁面平均加載時間最長。 然而，無論哪個行業，一些令人震驚的數據顯示，移動點擊後登陸頁面總體上仍有很多不足之處。

例如，70% 的分析頁面需要 7 秒才能加載折疊上方的內容。 在相同的頁面上，加載折疊上方和下方的視覺內容總共需要 10 多秒。

在 SOASTA 的一些高級算法的幫助下，谷歌的另一項研究將頁面加載速度與更有意義的關鍵性能指標（如轉化率和跳出率）聯繫起來。 在一篇博客文章中，研究人員詳細說明：

我們構建了兩種機器學習模型：一種用於預測轉化率，一種用於預測跳出率。 每個模型都使用來自大量移動電子商務網站樣本的真實數據，將 93 個不同頁面指標的影響從圖像格式關聯到許多腳本。 簡而言之，這兩種模型都在尋找哪些移動網站因素會導致購物者購買或反彈。 轉換模型的預測準確率為 93%，反彈模型的準確率更高，為 96%。

機器學習模型發現，隨著頁面加載時間從 1 秒增加到 3 秒，移動訪問者跳出的概率增加了 32%。 從那裡，圖形顯示，事情變得更糟：

研究表明，除了跳出率之外，緩慢的頁面加載時間也會降低轉化率。 那麼罪魁禍首是什麼？

研究人員發現了一些主要的移動設計缺陷。

最大的移動點擊後登陸頁面速度殺手

速度不僅是轉化率和付費廣告預算的貶低者； 這也是谷歌搜索引擎排名因素之一。 如果您的頁面加載速度沒有超過推薦的 3 秒，那麼您就是在浪費金錢並且沒有被發現。 以下任何問題都可能是原因。

1.頁面元素過多

今天，平均網頁的數據大小與經典視頻遊戲“毀滅戰士”相同：

在 2.3MB 時，它變成了一堆不必要的元素。 它的設計師有 BSO——“閃亮的物體綜合症”——軟件工程師 Ronan Cremin 建議道：

隨著網絡經歷了它尷尬的青少年時期，我們讓蠕動的特征占據了主導地位，最終雜亂無章地讓我們變得更好。 新的 JavaScript 畫廊模塊？ 當然，為什麼不呢？ 哦，新的網絡字體在這裡看起來不錯，但為什麼不添加另一個分析工具呢？ 我應該費心調整這張 6,000 像素的圖像嗎？ 不，讓瀏覽器來做，對我有用。

谷歌發現，正如 Cremin 所說，“特徵”會對加載速度產生巨大的負面影響。 現在，平均頁麵包含存儲在數十台服務器上的成百上千個元素——標題、圖像、按鈕。 當這些元素未經優化時，結果可能是“不可預測”和“不穩定”的加載體驗。

研究人員甚至將頁面上的元素數量確定為最準確的轉化預測指標。 他們聲稱，少即是多。 當頁面元素從 400 增加到 6,000 時，轉化訪問者的機率會下降 95%。

數據顯示，互聯網的頂級設計師自 2014 年以來就知道這一點。 雖然大多數網站的平均頁面大小穩步增長，但前 10 名已經出現轉機：

對他們來說，頁面“權重”（數據大小）在過去幾年中一直在下降。 似乎所有其他人都是 featuritus 的受害者。

據谷歌稱，他們測試的頁面中有 70% 超過 1MB，36% 為 2MB，12% 超過 4MB。 因此，訪客幾乎沒有機會停留很長時間。 通過快速 3G 連接（世界上大多數蜂窩連接的速度），加載 1.49MB 大約需要 7 秒。

解決問題

對於權重很大的頁面，最好的解決方案是預防。 幸運的是，預防就像設置谷歌所說的“性能預算”一樣簡單。 在開始構建頁面之前，確定您希望它加載的速度（“預算”）。 然後，在預算範圍內設計頁面。

歐萊雅的 Hakan Nizam 說：“如果它是設計標準的一部分，那麼快速交付東西會更有效率。” “這將釋放開發人員的帶寬。 它將允許開發人員專注於影響轉化率的其他因素。 速度對話應該得到解決，以便轉向其他差異化因素。”

在 Google 的一篇博文中，Jason Cohen 將預算比作其他創意限制：

將速度作為設計過程的一部分與考慮其他創意媒介的局限性沒有什麼不同。 設計師不會為黑白印刷出版物製作四色廣告，也不會為 15 秒的廣告位製作 30 秒的視頻。 如果我們不在媒體的限制範圍內進行設計，結果將是糟糕的體驗。

儘管移動端已超過桌面端互聯網流量，但該渠道在大多數用戶體驗指標上仍落後於桌面端。 設計師需要停止將移動視為事後的想法。 它是它自己的媒介，用戶體驗應該反映這一點。

當然，“預算”技術假設您從頭開始。 如果您正在嘗試優化已經很緩慢的點擊後登錄頁面，研究人員建議對您的元素進行審核並監控您的第三方腳本，以發現哪些對其權重貢獻最大。 然後，縮小規模以進行相應的優化。

2. 圖片太多

在他們的研究中，一張特別的圖片引起了谷歌測試人員的注意。 它的重量高達 16MB。 一遍又一遍，他們不斷地找到陷入頁面的圖像。

“圖標、徽標和產品圖像等圖形元素很容易占頁面總重量的三分之二（換句話說，數百千字節），”研究人員警告說。

在機器學習模塊的幫助下，他們發現第二個最準確的轉化預測指標是頁面上的圖像數量。 與無法成功轉換訪問者的頁面相比，可以展示圖像的頁面減少了 38%。

解決問題

讓您的頁面大幅提升速度的最簡單方法之一是快速優化圖像。 盡你所能……

• 減少不必要的圖像

您真的需要展示產品的六個不同角度嗎？ 那張庫存照片真的為您的點擊後登錄頁面增加了價值嗎？ 您是否需要對圖像中的文本進行編碼，還是可以將您選擇的字體與 Google Fonts 或 Adob​​e Typekit 集成？ 如果答案是否定的，請考慮從您的設計中剪下一些圖像。

• 減小必要圖像的大小

如果您確實需要所有這些圖像，一些不同的工具和策略可以幫助您節省帶寬。 首先，了解您的圖像文件格式。 用 JPEG 替換 PNG 可以為您節省大量大小，進而節省速度。 另一方面，它也會降低圖像的質量。 有關如何決定使用哪種格式的更多信息，請查看這篇文章。

其次，考慮使用工具。 研究人員聲稱，在圖像壓縮器的幫助下，30% 的頁面可以節省 250KB 的數據。 Google 的 Guetzli 和 Zopfli 是值得一試的兩個。

3. JavaScript 使用，整頁加載時間

在向用戶顯示圖像和按鈕等元素之前，瀏覽器需要接收和解釋構建頁面的 HTML 代碼。 研究人員發現，所需的時間被稱為“DOM 就緒時間”——這是最準確的頁面反彈預測指標。

Google 的數據顯示，退回的用戶會話的 DOM 就緒時間比未退回的會話慢 55%。 這種意義的減速通常是由 JavaScript 引起的——一種停止解析 HTML 代碼的代碼——在許多第三方分析工具、廣告和社交小部件中使用。

Daniel An 和 Pat Meenan 將經濟放緩比作一家無組織的餐廳：

想像一下，您在餐廳，您的服務員已準備好為您送餐，但首先必須等待從另一家餐廳送來的鹽和胡椒粉。

但是 JavaScript 並不是唯一一種降低移動頁面速度的代碼。 CSS、HTML 以及處理圖像和字體等元素所需的無數請求會導致整頁加載時間滯後——跳出率的第二個最準確預測指標。 用戶跳出的平均網頁比他們沒有跳出的平均頁面慢 2.5 秒。

解決問題

為了改善移動瀏覽體驗，Google 開發了 AMP 和 AMP 廣告程序。 這兩個框架都為開發人員提供了以閃電般的速度提供移動體驗所需的工具。 它們包括：

• AMP HTML：這是我們公認的超文本標記語言（用於構建大多數網頁基礎的標籤、數字和字母系統）的精簡、基本版本。

• AMP JavaScript： Google 的 AMP 版本的流行代碼限制使用第三方和作者編寫的 JavaScript。

• AMP CDN：這允許開發人員在 Google 的服務器上存儲他們網頁的緩存版本。 該緩存版本是頁面的數字快照，在一個地方包含所有數據。 因此，它可以更快地提供給用戶。

該框架的元素共同構成了使用比平均數據少 10 倍的頁面和加載速度快 6 倍的廣告的基礎。

前往此處了解有關 AMP 入門的更多信息。

你的移動頁面速度是多少？

您的點擊後登錄頁面是否針對移動設備進行了優化？ 它們是否沒有無用的圖像、笨重的元素和繁重的 JavaScript？

通過 Google 提供的適合移動設備的測試進行了解，然後在創建下一個頁面之前查看我們的優化點擊後登錄頁面體驗的指南：