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,影響總體得分和表現,于是詳細查看了一些資料:
- Google Developer: 減少與廣告相關的布局偏移
- Google Developer: Minimize layout shift(最小化布局偏移)
- web.dev: Cumulative Layout Shift 累積布局偏移 (CLS)
- web.dev: 優化 Cumulative Layout Shift 累積布局偏移
- 博文:Google Adsense: Reducing Cumulative Layout Shift (CLS)
這個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的網頁越來越多了。✌️
评论