cls改色膜（CLS提分小技巧大放送）

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

累计布局偏移CumulativeLayoutShift(CLS)是CoreWebVitals用来权衡网站视觉稳固性的三个指标之一。简而言之，如果页面的主要内容加载到页面上，然后由其他内容(比如图片)驱动，那么布局就会产生变更。

很多时候，当访客点击按钮或链接(如“浏览更多内容”按钮)时，版式产生转变，可能链接转移，浏览者更后点击了其他内容或广告。这无疑会损坏用户体验。

谷歌认可的更佳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得分而不会影响用户体验，而且还能改良站点延迟。