页面老是跳来跳去，用户想点一个按钮，结果内容一挪，点到了别的东西上，这个体验特别烦。这就是 CLS 要解决的问题。
CLS 差是怎么造成的。第一，图片没有写尺寸。浏览器不知道这张图多大，就给了它零高度，等图片下载完了再撑开，下面的内容就被顶下去了。解决很简单，给 img 写上宽高属性。第二，广告位没有预留空间。广告加载慢，加载出来后把内容挤走了。要给广告位固定尺寸。第三，动态插入的内容。比如页面加载完之后用 JS 插进来一个提示条，它一插进来，下面的内容就全挪了。这种要提前预留空间，或者用覆盖式的展示。第四，字体切换导致的跳动。用了自定义字体，先用系统字体显示，加载好后换成自定义的，两次字体宽度不一样，文字就跳了。这个要靠字体的优化来解决。第五，用了那种从上方滑入的动画，把内容往下推。
那怎么检查。用工具跑一下，它会标出页面上哪些元素发生了偏移，偏移了多少。你照着清单一个个改。
改的时候有个优先级。偏移量大的、影响用户操作的要先改。比如正文突然往下跳一大截，或者按钮位置变动，这些最影响体验。
我自己修 CLS 的经验是，绝大多数的偏移都来自图片没写尺寸。把这一条做好，CLS 通常能改善一大半。剩下的是广告和动态内容，那些要具体问题具体处理。
CLS 这个指标，修起来其实不难，但你要先找到是哪些元素在跳。找到就成功了八成。工具能帮你定位，别自己瞎猜。
—— 来自 图趣网 - 优秀网站分类目录 的分享
