CLS提分小技巧大放送

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得分而不会影响用户体验，而且还能改善站点延迟。