谷歌頁面體驗：排名更新

已發表: 2021-04-08

本文於2020年5月首發，2021年4月更新。

谷歌的研究和行業研究表明，用戶更喜歡具有良好頁面體驗的網站。 谷歌一直在考慮在排名結果中要考慮哪些因素，例如頁面加載速度和移動友好性。 即將到來的頁面體驗更新考慮了將用戶放在首位和中心的許多因素。 這些“核心網絡生命力”將幫助 Google 為搜索者提供最好的內容。

頁面體驗和核心網絡生命力

Core Web Vitals 是一組指標，可幫助網站所有者衡量用戶體驗維度，例如加載時間、交互性和內容加載時的穩定性。 谷歌現在提供了即將進行的搜索排名更改的詳細信息，該更改將包含這些頁面體驗指標。

正在引入一個新信號，谷歌表示“將核心 Web Vitals 與我們現有的頁面體驗信號相結合，以提供用戶在網頁上的體驗質量的整體圖景”。

這些更改將於 2021 年 6 月推出。

此外，隨著用戶期望的發展以及 Google 衡量更多方面的能力增加，每年都會納入更多的頁面體驗信號。

頁面體驗排名

那麼這背後的想法是什麼？ 從本質上講，良好的體驗可以讓人們實現他們想要的，而糟糕的體驗可能會阻止人們找到他們正在尋找的信息。 谷歌希望繼續成為人們搜索信息的首選之地，因此它需要提供最佳的搜索體驗。

通過將頁面體驗與所有其他信號相結合，目的是讓使用網站的人們更容易找到他們正在尋找的東西。

頂級頁面指標

頁面體驗的三個主要組成部分是：

  • 頁面加載速度有多快？
  • 頁面對用戶的反應有多快？
  • 頁面的穩定性如何（加載時元素是否會跳來跳去）？

現在我們可以通過一些頂級指標來解讀它們的含義。 （前 3 個是所謂的“核心網絡生命力”。）

核心網絡生命力

  • 最大內容繪製 (LCP) - 該指標尋找最大的圖像或文本塊。 它測量將該項目加載到視口中所需的時間。 這可能是主圖或一大段文字。 （理想情況下，這應該小於或等於 2.5 秒。）

  • 累積佈局偏移 (CLS) - 該指標衡量視覺穩定性。 換句話說，它測量了頁面加載時內容髮生了多少變化，從而使閱讀或查看內容變得困難。 （您希望它小於或等於 0.1。）

  • 首次輸入延遲 (FID) - 這是指頁面響應用戶的速度（例如，在單擊按鈕之後）。 小於或等於 100 毫秒是這個的理想選擇。

作為衡量頁面有效性的有用指標，以下指標也值得牢記：

  • 首次內容繪製 (FCP) - 此指標衡量首屏文本加載所需的時間。 這是您無需滾動即可看到的內容。 字體過多和字體文件過大都會影響這個分數。 從外部資源加載字體也會變慢。

  • 速度指數 (SI) - 該指標記錄視覺變化超過折疊停止的時間。 這意味著視頻和英雄圖像都會影響速度指數得分。

  • 交互時間 (TTI) - 此指標衡量頁面準備好供用戶輸入所需的時間。 延遲加載的應用程序和跟踪或分析腳本將影響此指標。

  • 總阻塞時間 (TBT) - 此指標類似於 TTI，但它衡量頁面上的總阻塞時間。 這是指用戶無法單擊元素或滾動頁面。

重要的是要記住，這些核心網絡生命力絕不是評判您網站的唯一方式。 在評估您的網頁時，Google 會考慮很多很多因素。 雖然這裡的重點肯定是用戶體驗，但谷歌表示，擁有出色的內容仍然是更重要的考慮因素：它會尋求對具有最佳整體信息的頁面進行排名，即使頁面體驗不是最好的。

谷歌沒有說明每個因素的權重有多少，但他們已經確認“良好的頁面體驗不會超越擁有出色的相關內容”。 但是，如果所有其他因素都相同，則頁面體驗可能是您的知名度的決定因素。

搜索控制台更新

Google 在 Search Console 中添加了一個名為“Core Web Vitals”的新部分，該部分會報告您的網站在這些新的“頁面體驗”指標方面的表現。 該報告將告訴您需要改進的地方以及如何實施這些改進。

Google 更新了 Lighthouse 和 PageSpeed Insights 等工具，使網站所有者能夠更好地衡量自己的性能並改善訪問者的頁面體驗。 我們關於網站速度審核的文章很好地概述了您可以使用的不同工具，以及它們在評估您的網站方面的優勢和局限性。

如何為核心 Web Vitals 做準備（並非全部適用於 Shopify 商店）

1 最大含量塗料 (LCP)

潛在問題：服務器響應時間慢

解決方案

a) 緩存資產 - 如果您的 HTML 是靜態的，緩存它可以防止在不需要時重新創建它，從而減少資源使用。

b) 將用戶路由到 CDN - 內容分發網絡使用世界各地許多地方的服務器，這消除了用戶由於遠離單個服務器而遇到站點速度較慢的問題。

潛在問題：資源加載時間緩慢

解決方案

a) 使用 tinypng 優化和壓縮您的圖像 - 它可以在不犧牲質量的情況下減小文件的大小，因此它們可以更快地加載但仍然看起來不錯。

b) 使用圖像 CDN - 這將減少圖像負載，提供為每個請求它的設備量身定制的圖像，並從網絡邊緣發送圖像。

潛在問題：客戶端渲染

解決方案

a) 縮小你的 JavaScript 並推遲未使用的 JavaScript

b) 如果可能，使用服務器端渲染

潛在問題：JavaScript 和 CSS

解決方案

a) 縮小 CSS - CSS 文件通常包含字符以使其更易於閱讀，但瀏覽器不需要這些字符。 縮小它們會刪除它們並將其清除，因此它將縮短呈現頁面所需的時間。

b) 下載並向用戶提供最少量的必要 JavaScript。 減少阻塞 JavaScript 的數量意味著更快的渲染和更好的 LCP。

2 累積佈局偏移 (CLS)

潛在問題：意外的佈局變化

解決方案

a) 在視頻和圖像等資產上包含大小屬性，以便瀏覽器在加載之前為對象分配適當的空間量。

b) 確保動態注入的內容僅插入現有內容下方，以免觸發意外的佈局變化。

3 首次輸入延遲 (FID)

潛在問題：瀏覽器沒有快速響應用戶（可能是因為它仍在執行 JavaScript）

解決方案

a) 將長時間運行的代碼分解成更小的任務。 長任務使頁面在處理任務時無響應。 將這些拆分成更易於管理的塊有助於減少輸入延遲。

b) 通過推遲未使用的 JS 進一步減少 JavaScript 執行時間。 如果瀏覽器不需要代碼來呈現頁面，請推遲它——這意味著頁面可以更快地為用戶交互做好準備。

如果您需要支持以確保您的 SEO、內容或網站遵守最新指南，請與我們聯繫，我們的 Shopify 設計、開發和 SEO 專家將很樂意討論我們如何提供幫助。