如果您的 Core Web Vitals 需要改進，首先要做什麼？

已發表: 2021-03-09

自 2021 年 5 月更新頁面體驗時，Google 將在用於評估用戶體驗質量的算法中添加三個新信號：Core Web Vitals。
自該公告發布以來，頭腦和鍵盤正在熱身以破譯這些指標，弄清楚如何滿足搜索引擎的期望，並試圖找出是否會對搜索結果的排名產生影響。

就像用戶在內容和 SEO 方面需要優先考慮一樣……如果您首先為用戶提高網站性能怎麼辦？ 讓我們看一下 Google 將考慮的指標，以及您的用戶體驗和轉化率必須獲得什麼。

速度：用戶的主要 UX 標準，以及 Google 的信號

谷歌在其速度問題報告中透露，如果一個頁面在 3 秒後沒有加載，53% 的訪問者會離開它。 在另一項研究中，搜索引擎表明，僅通過節省 0.1 秒的加載時間，轉化率就可以增加 8% 。 總而言之，速度問題遠遠超出了導航的舒適度：這也是商業問題。

UX 金字塔：按用戶重要性排序的標準

加載時間可以從不同的角度觀察：顯示速度、交互性、服務器響應時間……為了衡量 UX 質量，谷歌選擇了三個指標，稱為“webperf”（用於 Web 性能）：

  • 最大的內容塗料（LCP）。 它表示在大小方面最重要的元素出現在頁面上的時刻。 Google 建議 LCP 小於 2.5 秒。
  • 第一輸入延遲 (FID)。 它評估交互性。 Google 建議 FID 小於 100 毫秒。
  • 累積版式偏移 (CLS)。 它以分數的形式衡量元素的視覺穩定性。 Google 建議 CLS 小於 0.1。

這些信號是 Google 算法中已經考慮的其他 UX 指標的補充：

  • 移動友好：移動優化頁面是首選，並且由於移動優先索引，Googlebot 首先抓取頁面的移動版本。
  • 安全瀏覽：網站不得包含任何惡意或誤導性內容。
  • HTTPS ：網站必須提供安全連接。
  • 沒有廣告或侵入性插頁式廣告：互聯網用戶必須能夠訪問他們所尋求的內容，而不會被降低其體驗的侵入式彈出窗口、窗口或插頁式廣告打斷。

如何衡量核心網絡生命力

首先，要測量 Core Web Vitals 並檢查您的頁面是否符合 Google 推薦的閾值，這裡有一些免費工具：

  • Search Console，其核心 Web Vitals 選項卡允許您按 Google 創建的類似頁面組分析速度，
  • Lighthouse，觀察LCP，CLS，以及Total Blocking Time，相當於FID，
  • PageSpeed Insights，通過觀察從真實用戶收集的數據並基於模擬瀏覽收集的數據來衡量性能，
  • Web Vitals Chrome 擴展程序，用於在網頁上實時觀察 Core Web Vitals，
  • Chrome 用戶體驗報告，它提供了根據從真實用戶收集的數據創建自定義跟踪表的能力，
  • WebPageTest，webperf 社區的一個參考工具，通過定義不同的瀏覽條件來測試一個頁面的速度。

然而，正如 Google 的搜索倡導者 John Mueller 指出的那樣，要讓 Google 快速考慮您的網站，所有三個指標都很重要。 不要指望能夠提升三個核心網絡生命中的一個而將其他的放在一邊。 用戶體驗必須從三個方面都令人滿意：顯示、交互性和穩定性。

此外，如果您計劃將訪問您的站點限制為僅快速連接和設備以優化您的分數……請注意，這也不是一個好主意。

那麼你如何開始呢？ 如果在測量它們之後，您意識到您的 Core Web Vitals 需要改進，那麼可以採取以下措施。

[案例研究] 管理 Google 的機器人抓取

1001Pneus 擁有超過 26,000 個產品參考，需要一個可靠的工具來監控他們的 SEO 性能，並確保 Google 將其抓取預算用於正確的類別和頁面。 了解如何使用 OnCrawl 成功管理電子商務網站的抓取預算。
閱讀案例研究

改善 Core Web Vitals 的首要行動

優化最大內容繪製

如果您的最大內容繪製超過了 Google 建議的 2.5 秒：

  • 優化您的服務器響應時間，
  • 優先考慮或消除阻礙頁面呈現的 JavaScript 和 CSS，
  • 減小資源（圖像、動畫、字體……）的大小，
  • 如果您進行客戶端渲染，請監控 JS 包的大小，並儘可能多地押注服務器端渲染。

優化第一個輸入延遲

如果您的 FID 超過了 Google 推薦的 100 毫秒，那麼第一個反應就是減小 JavaScript 文件的大小，並優先考慮它們以獲得更好的交互性。 這很重要，因為只要瀏覽器忙於分析和執行 JS，它就無法響應交互。 要提高頁面的交互性：

  • 分割長任務（任何一段佔用瀏覽器超過 50 毫秒的代碼），並將它們分割成更小的異步任務，
  • 最小化你的 JavaScript；
  • 推遲對頁面的顯示和操作不是必需的第三方腳本，
  • 使用 Web Worker 在後台的單獨線程上運行 JavaScript，
  • 減少未使用的 polyfill。

優化累積佈局移位

如果您的 Cumulative Layout Shift 分數超過 Google 推薦的 0.1 分：

  • 為您的所有媒體和廣告（圖片、視頻、iframe……）定義尺寸，以便在顯示之前在頁面上為它們保留一個靜態空間，
  • 避免在頁面上已經顯示的元素上方動態添加內容（它們可能會向下移動內容），
  • 避免導致頁面佈局發生變化的動畫，
  • 避免使用會引起 FOIT / FOUT 的字體。

這些技巧解決了遇到的最常見問題，但正如 Web 性能中經常出現的情況一樣，導致速度下降的原因可能是多方面的，也可能是其他實現的意外副作用。
為了幫助您準確診斷 Core Web Vital 分數不佳的原因並解決它們，請致電專家！
他們將能夠準確地審核您網站的技術方面，並提出彼此智能協作的解決方案。
您準備好迎接完美的用戶體驗和起飛的轉換了嗎？