如何提高您的 Google PageSpeed Insights 分數

提高 pagespeed 見解轉化率的最簡單方法與改進標題或更改 CTA 按鈕的顏色無關。 相反，它是關於提供更快的用戶體驗。

谷歌的研究發現了轉化率和加載時間之間的聯繫。 它還表明您可能會因為滯後的點擊後登錄頁面而失去一半的潛在客戶。 幸運的是，您可以使用一種工具來確定是什麼導致它變慢。

谷歌對頁面速度的研究

在點擊 900,000 個廣告後，谷歌的研究人員發現，移動點擊後登陸頁面的平均加載時間為 22 秒。 這比大多數不耐煩的互聯網用戶在放棄頁面之前等待的時間長 7 倍——準確地說是 53%。

如果您的頁面加載時間超過 3 秒，則超過一半的潛在客戶在看到它之前就離開了。 好像這還不夠糟糕，研究發現，每過一秒，頁面就無法加載，更多的訪問者會跳出：

在 SOASTA 機器學習技術的幫助下，研究人員發現了加載時間、頁面重量（數據大小）和轉換率之間的相關性。 基本上，“較重”意味著較慢。 具體而言，當頁面上的元素（文本、圖像等）數量從 400 增加到 6,000 時，您轉化訪問者的機會會下降 95%。

但是，如果您的頁面加載緩慢，則查明問題並不總是那麼容易。 雖然文本的數量和圖像的數量一目了然，但諸如 JavaScript 過多和重定向過多之類的問題並不明顯。

幸運的是，您可以使用一個免費工具來準確找出導致頁面加載時間變慢的原因。

什麼是 Google PageSpeed Insights？

Google PageSpeed Insights 是一種工具，可讓您快速輕鬆地測試網頁的速度。

輸入一個 URL 並點擊“分析”將根據兩個參數快速為您提供有關導致該網頁變慢的詳細報告，並提供有關如何修復它的建議。

• 參數 1：達到倍數以上加載的時間。 這是用戶請求新頁面後頁面顯示首屏內容所需的時間。

• 參數 2：整頁加載時間。 這是瀏覽器在用戶請求後完全呈現頁面所需的時間。

根據谷歌的說法，它是這樣工作的：

Page Speed Insights 衡量移動設備和桌面設備頁面的性能。 它獲取 url 兩次，一次使用移動用戶代理，一次使用桌面用戶代理。

PageSpeed Insights 分數範圍為 0 到 100 分。 分數越高越好，分數為 85 或以上表示頁面表現良好。

但是，當人們期望頁面立即加載時，“好”就足夠了嗎？ 不是每一秒都很重要。 要獲得盡可能高的分數，您需要執行以下操作……

獲得較高的 Google PageSpeed Insights 分數

如果您在報告中看到大量紅色和黃色，那是因為您的頁面存在一些明顯的加載問題。

該工具會通知您這些問題，但錯誤消息可能有點難以理解。 以下是您可能會看到的內容以及解決方法：

1. 避免點擊後登陸頁面重定向

如果您的頁面沒有進行響應式設計，結果可能是多次重定向到針對不同設備優化的頁面。 根據谷歌的說法，一些常見的重定向模式：

• example.com 使用響應式網頁設計，不需要重定向 - 快速且最佳！
• example.com → m.example.com/home – 移動用戶的多次往返懲罰。
• example.com → www.example.com → m.example.com – 移動體驗非常慢。

每次必須重定向用戶時，頁面渲染都會停止——這會增加頁面加載時間的寶貴時間。 通過使用響應式設計構建頁面來完全避免重定向 - 無論您的潛在客戶使用何種設備，這種方法都可以確保優質的用戶體驗。

（所有 Instapage 模板都是響應式的，因此您的用戶永遠不必捏合縮放。）

2. 啟用壓縮

今天的瀏覽器能夠為互聯網用戶提供更小的替代版本的頁面。 啟用壓縮器 gzip 後，這些頁面的大小可以縮小 90%。

在他的網站 Better Explained 上，Khalid Azad 很好地描述了 gzip 如何優化 HTTP 請求和響應過程：

但是，當啟用壓縮時，該過程看起來更像這樣：

瀏覽器不是為用戶提供完整的頁面，而是可以獲取一個在很短的時間內加載的指數級較小的壓縮版本。 在此處了解有關使用 gzip 進行優化的更多信息。

3. 壓縮 CSS、HTML、JavaScript

“縮小”是指在不影響瀏覽器處理頁面的方式的情況下刪除不必要或冗餘的數據。 糟糕的編碼可能是這個問題的原因，它可以通過幾種不同的方式解決。

除了手動調查您網頁的源代碼之外，Google 建議您嘗試以下資源：

• 用於縮小 HTML 的 HTML 縮小器。
• CSSNano 和 CSSO 來縮小 CSS。
• UglifyJS2 和 Closure Compiler 來縮小 JavaScript。

當然，另一種選擇是利用 Google 的 AMP 和 AMP 廣告框架。 這兩個程序都允許開發人員使用精簡版的 HTML、CSS 和 JavaScript 構建頁面。 結果是頁面和廣告在幾分之一秒內加載。

4. 優先考慮首屏內容

儘管這看起來很奇怪，但頁面加載時間不僅僅與頁面加載的速度有關。 它還與“感知性能”有關。 KeyCDN 的 Brian Jackson 解釋說：

感知性能可以簡單地描述為“您的網站加載時感覺有多快？” 這可能與您的網站實際加載速度略有不同。 感知性能都是從用戶的角度來看的，而不是網站速度測試工具。

為了提高感知性能，優先加載對用戶很重要的內容至關重要。 例如，折疊上方的頁面文本應在第三方小部件之前加載。

但是，當代碼結構不正確時，結果可能會降低用戶心目中的感知性能。 如果頁面上要加載的最後一個元素是用戶點擊查看的元素，則頁面會感覺加載時間更長。

5.加快服務器響應時間

服務器響應時間——你的服務器開始為用戶加載頁面內容所需的時間——根據谷歌的說法，它可能會因多種因素而變慢：

• 數據庫查詢
• 慢速路由
• 構架
• 圖書館
• 資源 CPU 飢餓
• 內存不足

對於 Raelene Morey 的網站，糟糕的託管是一個主要的速度殺手。 她告誡讀者：

廉價的網絡主機提供 3.95 美元的月度計劃，包括無限的頁面瀏覽量和無限的空間，這似乎很划算，但權衡通常是網站速度緩慢，並且在高流量期間頻繁停機。

如果您希望您的網站閃電般快速並確保您的網站運行良好，您需要投資一個不錯的網絡主機。 如果您真的希望您的網站運行速度快，您可能需要查看不在共享服務器上的託管包。

在決定使用 WP Engine 之前，她測試了許多主機，這幫助她達到了 Google 推薦的低於 200 毫秒的服務器響應時間。 考慮做同樣的事情，或者將您當前的網絡託管包升級到更強大的計劃。

6. 消除阻塞渲染的 JavaScript

除其他外，JavaScript 支持一些強大的第三方工具和交互式頁面元素。 它的問題在於，它還會停止解析 HTML 代碼。

當您看到“消除阻止渲染的 JavaScript”的錯誤消息時，這意味著有一段 JavaScript 代碼暫停了頁面上折疊部分的加載過程。 尤其是第三方腳本可能會導致此問題。 三種方式解決：

• 對加載過程不重要的腳本應該被故意延遲——在頁面完全呈現後提取和執行。

• 異步加載的腳本應該用於同步加載的腳本。 同步腳本暫停頁面渲染過程，而異步腳本允許瀏覽器同時加載其他元素。

• 考慮內聯腳本——將小的外部 JavaScript 資源直接插入你的 HTML 文檔——以減少瀏覽器必鬚髮出的請求數量。

7.利用瀏覽器緩存

在為用戶完全加載頁面之前，它可能需要在服務器和瀏覽器之間進行多次請求。 就時間而言，每一項加起來。

緩存允許您的瀏覽器以某種方式“記住”最近加載的某些元素 - 標題、導航、徽標等。瀏覽器可以緩存的元素越多，在用戶創建時加載的元素就越少。請求，最終頁面加載速度越快。

Google 建議的最低緩存策略為一周，對於基本保持不變的元素，一年最好。

8.優化圖片

在一篇博客文章中，谷歌測試人員特別警告圖像對頁面速度構成的威脅。 “圖標、徽標和產品圖像等圖形元素很容易占頁面總重量的三分之二，”他們說。

當這種情況發生時，對頁面加載時間，特別是轉化率的影響是巨大的。 根據這項研究，轉化訪問者的頁麵包含的圖像比沒有轉化的頁面少 38%：

幸運的是，優化圖像很容易。 用 JPEG 圖像文件替換 PNG 可以輕鬆節省頁面大小和加載時間。 像 Google 的 Guetzli 和 Zopfli 這樣的圖像壓縮器也是如此。

但在使用這些圖像之前，先問問自己是否真的需要頁面中包含的所有圖像。 它們真的能增加價值，還是可以沒有它們？ 如果答案是後者，則將它們完全廢棄以節省數據和時間。

使用 Google PageSpeed Insights 查看您的位置

您的 Google PageSpeed Insights 得分是多少？ 你達到推薦的85+了嗎？

要達到該閾值，我們建議您查閱我們的指南以優化點擊後登錄頁面體驗：

然後，開始提供更好的用戶體驗並改進點擊後登錄頁面。

立即註冊 Instapage Enterprise 演示。