CLS对网页体验有什么影响?


累计布局偏移Cumulative Layout Shift(CLS)是Core Web Vitals用来衡量网站视觉稳定性的三个指标之一。简而言之,如果页面的主要内容加载到页面上,然后由其他内容(比如图片)驱动,那么布局就会发生变化。


很多时候,当访客点击按钮或链接(如“阅读更多内容”按钮)时,版式发生改变,可能链接转移,访问者最后点击了其他内容或广告。这无疑会破坏用户体验。


谷歌认可的最佳CLS标准<0.1?


Google把影响评分描述为受手机内容影响的部分。若将一半(50%)屏幕内容移至一半(25%),则屏幕受到75%的影响。它表示效果分数是0.75,而且距离分数是0.25,因为内容移动了视口的25%。最后的结果是0.75*0.25=0.1875。


按照谷歌官方的说法,超过0.1的CLS分数将影响用户体验,应该降低。也就是说,当CLS指标小于0.1时,有助于确保页面具有用户体验。


CLS提分小技巧大放送:

1、创建硬编码的单一尺寸广告


发布者可以在页面顶部创建单一大小的广告位置,只适用于硬编码的广告。使用这种占位符可以确保布局没有改变,但是以每个广告位置都只有一个大小为代价。


2、推迟发布加载广告


一个发布者应该考虑一个最佳做法,那就是延迟加载广告,在实际需要之前不要载入广告。举例来说,如果一个页面有三个视窗,那么第三个视窗上的广告将不会被载入,直到访客到达第二个视窗。


但是这个缺点是没有考虑到用户的行为,如果滚动速度比较快,超过占位符,则广告载入太迟,延迟加载的广告仍然会导致布局偏差。另外,要注意延迟加载会破坏可视性。


3、利用实时数据优化用户体验


利用实时数据为每一个访客优化个性化广告体验。有了数以百计的匿名数据点,发布者可以个性化应该放置什么样的广告,以及在页面上的时间和地点。这样做不仅可以提高CLS得分而不会影响用户体验,而且还能改善站点延迟。