如何針對 Core Web Vitals (Adsense) 優化您的網站

提高 Core Web Vitals 的競賽並非易事。 如果您依靠像 Google AdSense 這樣的廣告程序來通過您的網站獲利，那就更難了。

運行 Google AdSense 的網站未通過 Core Web Vitals 測試的可能性是沒有使用 Google AdSense 的同一網站的 10 倍。 這主要是由於 Google AdSense 添加到您的網站的第三方請求和資產的數量。 這些資產中的大多數都是未經優化的、龐大的和非用戶友好的。

在 AdSense 和廣告平台之外，如果您有很多未經優化的圖片、JavaScript 和 CSS，尤其是在首屏，那麼您也很可能無法通過 Core Web Vitals 測試。

如果您一直在努力通過 Core Web Vitals 測試並提高您的搜索引擎排名潛力，您將在本文中找到實用的解決方案。

什麼是核心網絡生命力？

Core Web Vitals 是由 Google Lighthouse 提供支持的指標，用於確定網站如何提供良好的頁面體驗。 雖然運行測試時有許多指標，但最重要的指標是最大內容繪製 (LCP)、首次輸入延遲 (FID) 和累積佈局偏移 (CLS)。

谷歌宣布，從 2021 年 5 月起，這些指標將成為其排名信號的一部分，用於確定網頁在搜索結果中的位置。

總之，您可以說 Core Web Vitals 並不是要讓網站管理員感到恐懼，而是一種改善網站頁面體驗的手段。

最大內容繪製 (LCP) ：LCP 測量網頁上最大的可見圖像或文本塊加載所需的時間。 如果最大的可見文本或圖像加載速度很快，則認為其餘圖像和文本將快速加載。 通過所需的加載時間為2.5 秒。

首次輸入延遲 (FID) ：FID 測量網頁交互性。 這取決於用戶單擊您的站點後瀏覽器開始處理事件處理程序所需的時間。 這被廣泛稱為您網站的第一印象。 通過所需的時間是100 毫秒。

Cumulative Layout Shift (CLS) ：CLS 測量網頁上發生的佈局偏移。 當網頁加載然後突然出現或消失並且頁面必須調整為更大或更小時，這種轉變就是衡量標準。 這對用戶體驗來說很糟糕，我同意。 您應該通過的分數是0.1 。

如何針對 Core Web Vitals 優化您的網站

請按照以下步驟優化您的網站：

1.從一個快速的網絡主機開始

如果您有一個響應時間很糟糕的網絡主機，那麼我將在此處列出的所有其他內容都可能不會產生預期的結果。 服務器響應請求的速度越快越好。

為什麼具有快速首字節時間 (TTFB) 的網絡主機很重要？ 有些人會爭辯說 TTFB 無關緊要，但確實如此。 這是其他一切的基礎。 如果您的用戶位於互聯網速度較慢的城市，那麼您的網絡託管服務商的響應速度將意味著一切。 如果您的用戶主要來自擁有超快互聯網的城市，那麼任何網絡主機都可以表現良好。

嘗試測試您的虛擬主機將如何響應 3G 或 2G 而不是 4G。 因為如果您有很多用戶通過 3G 或 2G 進行連接，那麼它就會增加您的 Core Web Vitals 分數。 因此，每一毫秒都很重要。 在 FID 中獲得 100 毫秒和獲得 101 毫秒之間的區別在於，在 100 毫秒時，你通過了，但在 101 毫秒時你失敗了。 所以，如果有人告訴你 1 毫秒無關緊要，那他可能就錯了。

選擇網絡主機時，請始終確保數據中心更靠近您的大多數網站用戶。 您可以通過查看分析來找到他們的位置。 您的大多數用戶來自哪裡？ 選擇離他們更近的數據中心。 越近越好。

我個人注意到，在更改虛擬主機後，網站的 Core Web Vitals 字段數據發生了顯著變化。 我什麼也沒做。

如果您正在尋找一個快速的網絡主機，那裡有很多完全由附屬機構驅動而沒有誠意的建議。 如果您正在運行 WordPress 並且負擔得起，我強烈推薦 Kinsta。 它們是 WordPress 的最佳選擇。 如果您需要更便宜的東西或者您沒有使用 WordPress，那麼 Cloudways 也非常有效。

2.使用輕量級和速度優化的主題

這個技巧對非編碼人員甚至對時間較少的編碼人員特別有用。 特別是如果您使用有很多選項的 WordPress，請確保您使用輕量級和速度優化的主題。

因為主題就像你網站的骨架，如果骨架壞了，身體就會壞掉。 僅此而已。

您應該在主題中尋找一長串最佳實踐。 一些最常見的不良做法是過度依賴 JQuery、在不需要時加載過多的 CSS/JS、過大的主題大小等等。 您始終可以使用 Yellow labs 之類的工具來測試演示。

如果您使用的是 WordPress，您可以查看最快的 WordPress 主題列表。

3.優化您的圖像

圖像很酷。 他們使內容如此吸引人。 但是，如果未進行優化，它們可能會成為負擔。 擁有像 3 MB 這樣的大圖像肯定會影響您的速度。 如果在滾動之前訪問您的網站時可以看到這些圖像，它們肯定會影響您的 LCP 指標。

事實上，未經優化的圖像會增加頁面的大小。 頁面越大，加載時間越長。

我個人更喜歡在上傳之前優化每張圖片。 我不使用任何外部服務進行圖像優化。 但是，如果您使用 WordPress 或類似的 CMS，則有插件和解決方案可以自動優化圖像。 無論您使用什麼，也有云解決方案。

4.刪除或減小背景圖像的大小

背景圖像通常非常大。 它會減慢您的加載時間，因為必須先加載它才能顯示有意義的內容。

您可以完全刪除背景圖像以擁有更快的網站。 如果它們如此重要，則考慮將它們優化到盡可能小的尺寸或使用圖案而不是圖像。

5.使用瀏覽器緩存

如果您有很多忠實的讀者，那麼您應該考慮瀏覽器緩存。 當用戶第一次訪問您的網站時，瀏覽器會緩存該網站。 對於其他每次訪問，它將立即加載。 從第二次訪問向上，這可以大大提高 FID 和 LCP。

對於 WordPress 用戶，大多數緩存插件都可以幫助您實現這一目標。

6. 縮小 JavaScript 並推遲未使用的 JavaScript

雖然 JavaScript 很神奇，但它經常是渲染阻塞。 這意味著它會影響您的加載時間並最終影響您的 FID。

嘗試通過刪除空格和註釋來縮小 JavaScript 以減小文件大小。 此外，請確保您推遲了非關鍵 JavaScript。 這應該會改善您的 FID。

對於 WordPress 用戶，有像 Autoptimize、WP Rocket 等插件可以為您做到這一點。

7. 設置 AdSense 尺寸屬性

如果您在自己的網站上運行 AdSense，並且遇到了 CLS，那麼這可以解決您的所有問題。 它對我有用，也應該對你有用。

如果您有一個靠近用戶訪問時可見的標題的廣告單元，則一個問題是廣告可能不會立即加載。 它可能會在頁面已經加載後加載，並且當它加載時，佈局會發生變化。 這對於自適應廣告單元很常見。 發生這種情況後，就不可能通過 CLS 指標。

處理此問題的最佳方法是稍微修改一下您的 AdSense 代碼。 不用擔心，這是非常合法的。 只需指定廣告的尺寸屬性，尤其是高度。 完成此操作後，您將不會再注意到廣告加載時的佈局變化。

下面是我在博客標題下方使用的響應式廣告單元示例。 我已將我的發布商 ID 和廣告位替換為 XXXXXX。 注意到我添加了高度屬性（最小高度：300px）。 我這樣做的那一刻，所有 CLS 問題都一去不復返了。

 <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- Header ad --> <ins class="adsbygoogle" data-ad-client="ca-pub-xxxxxxxxxxxxxx" data-ad-slot="xxxxxxxxxx" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>

這樣做是為了在頁面上保留該大小。 因此，無論何時出現廣告，佈局都不會發生變化，因為您已經設置了尺寸。

8.為您的圖像和其他媒體設置大小屬性

就像廣告一樣，圖片和其他媒體在加載到您的網站時可能會導致佈局變化。 您可能只是在閱讀某些內容，然後加載了圖像，然後突然出現佈局變化，您正在閱讀的內容不在視野範圍內，您看到的只是其他內容，或者您​​甚至錯誤地單擊了其他內容。

您可以通過為媒體文件設置大小屬性來避免所有這些。 您的 CLS 指標會很高興您這樣做。

9. 延遲加載圖片。

您可能已經在 PageSpeed Insight 上看到了延遲離屏圖像的建議。 它的簡單含義是延遲加載圖像。

延遲加載的作用是減少頁面大小，並減少用戶訪問時頁面的加載時間。 這對 CWV 指標有好處。

這將特別有助於改善 LCP。

10. 通過縮小和生成關鍵 CSS 來優化 CSS

CSS 使網站看起來很酷，但是大型 CSS 文件可能是一個大問題，因為它會延遲向用戶呈現頁面。

當用戶訪問您的網站時，瀏覽器通常會延遲向用戶呈現您的網頁，直到它已加載、解析並執行您網頁標題中引用的所有 CSS。 如果你有一個大的 CSS 文件，這可能是一個大問題。 它會減慢您的網站速度。

關鍵 CSS 可以通過僅加載頁面加載所需的 CSS 來提供幫助。 而其餘的 CSS 可以異步加載。

通過刪除空格和註釋以減小文件大小來縮小 CSS 也會有所幫助。

您還可以刪除未使用的 CSS。 如果您使用的服務正在推送未使用的 CSS，則刪除它們是安全的。

如果您使用 WordPress，有 WP Rocket、LiteSpeed Cache、FlyingPress 等插件可以幫助您實現這一目標。

11. 實現 AdSense 智能加載

如果 AdSense 負責降低您的網站速度，這種方法幾乎可以完全消除所有挑戰。

這是關於以一種智能的方式加載 AdSense。 在用戶執行滾動或點擊等操作之前，不會加載 AdSense。 這將大大縮短加載時間以及受 AdSense 影響的任何核心網絡生命週期。

有許多 WordPress 插件可以幫助您做到這一點，WP Rocket 和 Flying Scripts 就是一個例子。 據我所知，這種方法不違反 Google AdSense 政策。

注意：雖然此方法有助於提高感知速度和網頁得分，但它可能會影響您的 AdSense 收入。 我建議您進行實驗以確定是否值得

12. 如果可以，請使用 System Stack 字體

字體會在任何網站上增加額外的加載時間。 對於沒有圖像的網頁，您的文本塊可能會影響您的 LCP 評級。 在這種情況下，您的 LCP 分數將直接受您的字體影響。

雖然 Google Font 和 Font Awesome 繼續改進，但使用系統堆棧字體提供了顯著的改進。 雖然根據設備的不同並不那麼奇特。

13. 使用 CDN

如果您有來自世界各地的用戶，那麼使用 CDN 可以幫助您提高速度並間接提高您的 Core Web Vitals 指標。

簡單來說，CDN 會製作您網站的許多副本，並將它們存儲在世界不同地區的各種入網點 (POP) 中。 當有人請求您的網站時，它會從最近的位置為您的網站提供服務。

例如，如果您的網站託管在美國，並且您有來自英國的訪問者，那麼 CDN 不會從美國獲取您的網站，而是從英國為您的網站提供服務。 這樣做的效果將是快速交付。 速度。

您可以在那裡查看最好的 CDN。

14.設置DNS預取

如果您依賴 CDN 等外部服務來交付網站，那麼您可能需要設置 DNS 預取以最大程度地減少 DNS 查找造成的延遲。

DNS 預取將在調用 DNS 之前對其進行預取。 這樣它在最終被調用時立即加載。

15.優化第三方腳本

檢查以確保您在您的網站上使用的某些服務沒有添加可能會降低您的網站速度的第三方腳本。

您可以用第三方請求替換解決方案，用更好的解決方案減慢您的網站速度。

對於另一個第三方腳本 Google AdSense，您無能為力。 最佳做法是在一個頁面上最多使用 3 個廣告。 避免匹配內容，因為它會帶來低收入但會增加加載時間。

16. 從首屏移除 AdSense

該建議基於實驗。 如果您在搜索控制台報告中的所有指標（LCP 除外）都很好，請首先確保您的圖像和字體都經過優化。 如果它們經過優化並且您仍然未能通過 LCP，那麼 AdSense 可能會負責。

如果您負擔得起，請將 AdSense 從首屏移除一個月，看看問題是否會消失。

如果您不想刪除它，您可以手動或借助 Flying Scripts 等插件延遲它。

17. 切換到 AMP

AMP 表示加速移動頁面。 AMP 的想法是優化網頁以在移動設備上更快地加載。 當然，AMP 開源項目是由 Google 發起的。

雖然 AMP 最初旨在加速移動頁面，但它也可以加速桌面頁面。

根據我們的觀察，AMP 頁面始終比移動或桌面頁面快，有時快 100% 以上。

如果您網站的唯一獲利策略是 Google AdSense，那麼您可以考慮將您的所有網站都切換到 AMP。 我個人注意到，在我擁有的博客上，AMP 頁面上的 AdSense 有時比移動設備和桌面設備的轉化率更高！

結論

Core Web Vitals 可以幫助您為用戶改進您的網站，而不僅僅是為 Google。 擁有良好的實驗室數據測試分數但糟糕的現場數據分數是很常見的。

這是由於您的用戶的構成。 如果您的大多數用戶來自互聯網速度較慢的地方，那麼您可能在優化方面做得很好，但在現場數據方面仍然失敗。