您在這裡

AdSense與CLS(累積布局偏移)

James Qi 在 2022年6月14日 - 12:20 發表

Google的Core Web Vitals(網站核心指标)指标推出後我們也一直在關注,但最主要是關注LCP(Largest Contentful Paint 顯示最大内容元素所需時間),對于FID(First Input Delay 首次輸入延遲/封鎖時間總計)和CLS(Cumulative Layout Shift 累計版面配置轉移)沒有非常在意。

最近在查看幾個主要網站的Google Search Console中頁面體驗的時候,發現體驗好的頁面占比非常低,主要原因就是Core Web Vitals太低,其中CLS這個指标也比較突出,很多頁面超過了0.25,影響總體得分和表現,于是詳細查看了一些資料:

這個CLS指的是浏覽者在觀看頁面的中途突然出現頁面整體向下移動的情況,這個時候如果正好在點擊頁面中某個元素(例如“取消”按鈕)可能造成點擊到錯誤的地方(例如“确定”按鈕),這種幾率雖然小,但發生時用戶體驗是很不好的。所以我們需要對這種頁面布局偏移的情況進行測量評估并盡量改善。下圖中CLS測量值在0.1以下是合格的,0.1-0.25是需要改善,0.25以上為差。

結合我們網站的情況:圖片都添加了尺寸,引起頁面偏移的因素隻有廣告的延遲加載,這從以前自己浏覽我們網站的體驗來看,也是有這樣的情況:随着廣告的加載頁面内容突然都向下移動,所以我們決定對異步廣告預留出相應的尺寸空間,應該就可以解決這個CLS問題。

具體辦法就是在廣告代碼外用一個div包含,修改css設置,對adsense廣告給出最低高度:

#ad-header {
  min-height: 280px;
}
@media screen and (min-width: 40em) {
  #ad-header {
    min-height: 200px;
  }
}
...
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
...
<div id="ad-header">
  <ins class="adsbygoogle"
    style="display:block"
    data-ad-client="ca-pub-***"
    data-ad-slot="***"
    data-ad-format="auto"
    data-full-width-responsive="true">
  </ins>
  <script type="text/javascript">
    (adsbygoogle = window.adsbygoogle || []).push({});
  </script>
</div>

我們同事今天就類似這樣修改了網站的css文件,而頁面html都不需要修改,就達到了防止廣告引起頁面偏移的問題。👌

可以使用Chrome浏覽器的Lighthouse來生成報告進行驗證,我們修改css後在手機端和桌面端進行多次測試,CLS都下降到0.1以下,效果非常明顯。✌️

有幾點需要注意:

  • 這個辦法對固定廣告代碼有用,對adsense自動廣告也可以設置,隻是找css規律麻煩一些
  • 對于有多種廣告尺寸可能的代碼位,可以挑選出現幾率比較高的尺寸來設置,折中考慮
    • 如果尺寸設置過高,會讓部分比較低的廣告上下留有空白,不太美觀
    • 如果尺寸設置過低,會讓部分比較高的廣告依然引起頁面偏移,但偏移量稍小一點
  • 對于有多個廣告位的頁面,可以所有廣告位都預留尺寸,也可以隻把對CLS影響大的頂部廣告預留尺寸
  • 設置後可以去Google Search Console的Core Web Vitals中修複有問題的CLS頁面,以便較快提升CWV分數


2022年7月28日補充:修改了對應地方以後,經過1個多月的觀察,CLS問題基本上都解決了,Google Search Console中變為綠色Good的網頁越來越多了。✌️

自由标簽:

發表新回應

Plain text

  • 不允許使用 HTML 標籤。
  • 自動將網址與電子郵件地址轉變為連結。
  • 自動斷行和分段。