Google 的 Core Web Vitals 以及您需要做些什麼來避免流量丟失

去年網站流量突然下降？ Google 的 Core Web Vitals 更新可能是罪魁禍首。

在 2021 年夏季搜索引擎更新之後，許多網站的搜索流量急劇下降。 這是他們從未見過的流量，讓手心出汗的營銷經理們四處尋找想法。

聽起來有點熟？ 如果這描述了您的體驗，或者您想保護您的網絡流量免受未來核心網絡生命 (CWV) 更新的影響，請繼續閱讀。

本文基於我們最受歡迎的網絡研討會之一。 查看視頻並下載幻燈片：

Google 的 Core Web Vitals 更新如何改變了 SEO 遊戲

說到SEO，有很多事情是你無法控制的。 你無法控制谷歌。 您無法控制訪問您網站的用戶或訪問的頁面。

但是，您可以控製網站的架構、工程和速度。

什麼是核心網絡生命力？

Core Web Vitals (CWV) 是 Google 衡量搜索引擎認為對網站性能、速度和響應能力重要程度的一種方式。 有三個要素：

1. 最大內容繪製 (LCP) - 加載頁面需要多長時間？ 通常以秒為單位，或者，如果您的網站異常緩慢，則以數十秒為單位。
2. 首次輸入延遲 (FID) - 網站響應用戶點擊或交互需要多長時間？ 通常以毫秒為單位。
3. Cumulative Layout Shift (CLS) - 網站在加載時會發生多少變化？ 通常以秒為單位。

谷歌以兩種方式衡量這些元素。 實驗室數據，您可以在其中將網頁輸入到軟件或測試工具中（稍後會詳細介紹）。 和字段數據，它基於您網站上的真實用戶操作。

Google 不會擁有或使用每個頁面的字段數據，但會根據流量確定其衡量的內容。 量越大，就越有可能有實際的現場數據。 而且，谷歌可能會在整個網站上匯總這些數據。 這種聚集會導致很多惡化。 為什麼？ 如果您有很多來自連接不良的人的訪問者，例如具有 3G 連接的手機或世界上還沒有光纖的地方，那麼這種流量可能會扭曲數據。 因此，對於 Google 來說，您的網站可能看起來很慢，即使對於其他用戶來說這很好，並且實驗室數據顯示您擁有一個高性能的網站。

為什麼 CWV 很重要？

這是一個受到 CWV 更新打擊並在三個月內失去一半流量的網站示例。 哎喲。 此數據來自 Google Search Console（稍後會詳細介紹）。

谷歌懲罰慢站點，因為用戶不喜歡慢站點。 谷歌試圖用 CWV 做的是讓網絡更加以用戶為中心，這是一件好事。 當你賣東西時，用戶體驗很重要。 加載時間每增加一秒，轉化率就會下降最多 5 秒，然後下降4.42%。 簡而言之，如果您的網站加載時間為 6 秒，而您的競爭對手的網站加載時間為 1 秒，那麼他們將看到比您更好的轉化率。

在涉及 SEO 遊戲時，Core Web Vitals 更新只是優先考慮了這些因素。 如果你想繼續玩，你必須接受規則已經改變。 然後，適應。

如何衡量您網站的核心網絡生命力

看到問題是解決問題的第一步。 不幸的是，沒有一種工具可以解決您測量和優化 CWV 的所有問題。

您正在嘗試做的是測試修改您網站上的某些內容是否會對流量產生任何影響，對嗎？ 所以你做出改變，等待真實用戶數據積累一兩個月以上（實驗室數據只能預測這麼多），然後等待谷歌通知。

你需要從不同的角度來看待問題，才能得到全貌。 這意味著多種工具。 經過多次試驗和錯誤，這是我們推薦的工具包：

1.谷歌搜索控制台

Google Search Console **** 是一個免費工具，如果您想要整個網站的 CWV 的真實數據，您絕對必須使用它。 有多少頁面得分高？ 有多少需要改進？ 有多少成績不好？ 綠色，黃色，紅色。 這是您在此級別上獲得 Google 自己的報告的唯一地方。

您可以通過單擊“重新驗證”要求 Google 正式審核您的網站，Google 將在數週內收集或審核現場數據。 他們說最多需要28天。

是的，你沒聽錯。 數據需要一個月才能刷新。 這是一個非常緩慢的反饋循環。

2.點擊

Clickio 提供了最接近您可以獲得的 Core Web Vitals 上的實時數據。 它要求您在您的網站上放置一個跟踪器，具有諷刺意味的是，這會增加一些頁面重量，但只要您根據從中獲得的數據採取行動，它就足夠有用了。

Clickio 將為您提供隨時間變化的反饋。 上個月我們在特定國家/地區提供給移動設備的所有網站頁面的累積佈局轉換是多少？ 本季度，有多少用戶從我們桌面設備上的博客頁面獲得了超過四秒的最大內容繪製？ 您可以通過多種方式對數據進行切片和切塊，以獲得所需的信息。

健康警告：該工具顯示 Clickio 對 Google 數據的解釋。 它不會向您展示 Google 看到的內容。 這是我們發現的用於解決潛在 CWV 問題的最佳領先指標，無需等待數月才能獲得任何反饋，並且它提供了大量的粒度，例如逐國數據。 但這不是實際的 Google 數據。 而且它是實時數據，您必須留出一些時間來積累足夠的有意義的數據，然後才能確定您所做的更改是否有效。 它不是即時的，但您也不必等待整整一個月才能刷新。

3.谷歌分析

谷歌分析將獲取一些具有代表性的數據點，並在此基礎上告訴你頁面性能統計數據，隨著時間的推移，你可以看到流量下降或上升的地方。 如果您的訪問者不多，那麼這些數據可能對您沒有多大用處，但它是隨著時間的推移跟踪此信息並突出顯示需要您注意的慢頁面的好方法。

4.谷歌數據工作室

Google Data Studio 會顯示您網站中每個 Core Web Vitals 的性能百分比。 從本質上講，它是隨時間變化的歷史。 改進，理想情況下。

如果它是實時的，這將是驚人的。 如果您可以滾動查看過去 28 天，工作完成，您就會知道您所做的事情正在產生影響。 不幸的是， Google 會在下個月中旬拖欠本月更新。 這是一個比 Google Search Console 更慢的反饋循環。 因此，它是追溯數據的快照。 用於監控進度，但速度較慢。

5. Web.dev - 燈塔

Web.dev 是 Google 擁有的網站，提供了一個名為 Lighthouse 的開源工具。 該工具為您提供各個頁面上的實驗室數據。 您輸入一個 URL，它會告訴您性能可訪問性、最佳實踐、SEO 分數等 - 如果您在應用程序上單擊“查看樹形圖”，您可以看到更多數據。

數據存在一定的波動性，因為數據可能會根據您的瀏覽器、一天中的時間、緩存或其他類型的“互聯網天氣”而有所變化。 但是，它仍然很不錯。

6. Web.dev - PageSpeed Insights

Google PageSpeed Insights 是您獲取頁面級字段數據的地方。 同樣，您輸入一個 URL，它將為您提供 LCP、CLS、FID 等的字段數據。 但是，您需要一定量的頁面流量才能獲得體面的現場數據。

7.GTmetrix

GTmetrix解構一個網頁並說明每個文件有多大，正在加載多少東西，它是如何構建的等等。 對於開發人員來說，這是一個很好的 QA 頁面工具，可以檢查他們是否添加了巨大的圖像文件或會減慢加載時間的臃腫小部件。

我們建議將此工具和 web.dev 工具結合使用，以逐頁衡量哪些更改有效。

8.調試熊

DebugBear 獲取有關 Core Web Vitals 和其他一些指標的頁面和報告列表。 它作為健康監控工具而不是診斷工具很有用。 您可以使用它來監控20 個左右的“煤礦中的金絲雀”頁面。 因此，如果任何活動增加了您網站的重量，那麼您可以在此處查看。

如何優化您的網站以改善 Core Web Vitals

現在，讓我們談談您可以做哪些活動來改進 Core Web Vitals。 你會從上面的工具中獲得很多關於問題所在的信息，所以這些只是我們為自己和客戶所做的一些事情，我們知道這些事情會產生影響。

1. 重新託管您的網站

這不是重建或重新設計您的網站。 它只是將它移動到其他地方。 通常，我們看到從 WordPress 遷移到 HubSpot 的網站的性能提高了大約 30% 。

如果您堅持使用 WordPress，則將您的網站轉移到像 WP Engine 這樣真正了解性能的專門託管公司會產生很大的不同。

通過在 HubSpot（或 WP Engine）上重新託管您的網站，您將受益於：

• 緩存 - 這使網站在第一次訪問後加載得更快。 一個通用的 WordPress 網站需要一個緩存插件，但 HubSpot 已經內置了它。
• 內容交付網絡 (CDN) 例如 Akamai - 即使您的網站託管在其他地方，它也會從本地服務器向用戶交付文件。
• CloudFlare DNS - 基本上，這有助於加快域名服務器端的速度。

2.關閉HubSpot的社交分享代碼

如果您已經在 HubSpot 上，那麼最快的勝利就是在您的博客上關閉 HubSpot 的社交分享代碼。 HubSpot 讓這些按鈕默認處於打開狀態，這很煩人。 這將從您博客的每個頁面中刪除大約450 KB 的 JavaScript 代碼。

在 GTmetrix 和 web.dev 中對頁面速度和加載時間進行前後快照。 這真的很令人滿意。

3. 壓縮圖片

當您第一次啟動您的網站時，您的開發人員很可能已經避免使用大量圖片。 我們希望。 我們希望他們對圖像使用延遲加載，就像一般原則一樣。

但後來，善意的營銷人員會突然將特色圖片添加到博客和頁面中。 巴姆。 您的網站因 40MB 的圖像文件而變慢，該文件可能會為大型噴氣式飛機的側面增光添彩。

將圖像壓縮到 <250KB，最好是 <100KB。 將圖像轉換為 jpg，或盡可能使用 svg。 對徽標要格外小心，尤其是頁腳中的徽標，因為這些徽標位於您網站的每個頁面上。

同樣，如果你有 HubSpot，Articulate 製作了一個名為 Fizz+Ginger 的工具來壓縮 HubSpot 中博客文章和網站頁面上的圖像。

4. 避免嵌入

這是我們網站頁面的屏幕截圖，其中包含嵌入式演示文稿、嵌入式 YouTube 視頻、彈出窗口、圖像和一些實時社交媒體。 所有這些東西加起來只有六兆字節……東西。 盡可能多地去除這些內容會使頁面加載速度更快。 例如，我們用鏈接的縮略圖替換了嵌入式視頻。

5. 簡化您的營銷工具

營銷工具增加了頁面權重。 諸如監控頁面使用情況的 Hot Jar 或 Lucky Orange 之類的東西，或跟踪號召性用語，或 Google 跟踪代碼管理器 - 在您的網站上安裝這些工具很有用，但它們是有成本的。 成本就是性能。 因此，您必須謹慎而明智地使用它們。

6.打開AMP

Google 有一個標準，稱為加速移動頁面或 AMP。 使用 AMP，您可以獲得閃電般的快速加載時間。 如果用戶在 Google 瀏覽器上點擊搜索結果，它將為他們提供來自 Google 服務器的 AMP 版本的頁面。

但是，在此過程中，您無法控制誰為該頁面提供服務以及它的外觀。 他們在樣式方面將其剝離到最低限度。 這是一個權衡。

7.優化你的代碼

這是網站優化的漫長而艱難的過程。 您不能只是即插即用。 你需要優化你的代碼。 為此，您必須擁有一支由專家開發人員組成的優質團隊，他們將實施以下內容：

• 最小化 Javascript 和 CSS
• 延遲加載 Javascript
• 默認延遲加載
• 自我放大（例如不在移動設備上顯示博客特色圖片）
• 開發管道中的良好編碼實踐
• 最少使用插件和外部代碼

用戶體驗是未來網站的衡量標準

在接下來的幾年裡，Core Web Vitals 的重要性只會越來越大。 企業現在需要調整他們的網站以適應性能和用戶體驗，以避免在下一次重大更新中受到懲罰。

當然，我們很樂意提供我們的 SEO 和網站開發服務，以幫助您到達您需要去的地方。 我們已經了解了很多關於 Core Web Vitals 的知識，並將這些知識嵌入到我們的流程中，使我們的網站高度優化和輕量級。

聯繫我們以獲得您的用戶希望您擁有的網站。