不得不佩服一下google和w3c标准委员会的想象力。这个指标是非常难以注意到并量化的一个指标。大部分用户和开发人员虽然经常会碰到这个指标所描述的事件，但很少会特别关注。
什么是非预期布局偏移 CSL？
在刚打开一个页面，正在加载的过程，相信不少用户都已经开始迫不及待的在页面上开始阅读，寻找自己需要的信息。这时，由于顶部的一个图片不小心加载完成了，在这个图片下的页面的内容都会顺序的往下移动。你正在看的内容，很有可能就突然往下跳动很远甚至跳到屏幕以外。发生这种事情，虽然不至于让一个兴趣盎然的读者放弃阅读，但也绝对不是一个友好体验。毕竟不是在玩打地鼠游戏。
简而言之，CLS是网页正处于Loading时，网页上的元素却意外的移动。
经常被位移的元素包括：文字、图像、视频、联系表单或是按钮等内容元素。很少有人会喜欢这种位移，所以CLS所显示的数字越小越好，因为页面的移动会导致不良的使用者体验，而基本上所有较差的CLS分数都可以利用编码进行解决。
CLS如何产生的？
造成CLS的原因有很多，这里列举4个常见的原因：
- 没有宽度和高度定义的img
- 没有宽度和高度定义的广告或其它类似的iframe
- JS动态加载并插入到页面中的内容
- 加载的网页字体导致FOIT或FOUT(FOIT是指网页加载时当字型加载太慢，字跑不出，当加载完成后跳出的字型会闪一下。FOUT是指非预期样式的文字闪烁出现，同样发生在字型加载太慢时浏览器先套用了其他字型当作替代，而在加载完成后跳回原先所设定的文字发生一闪的状况。)
其实，最简单有效粗暴的减少CLS的办法就是给所有的图片、视频、iframe加上宽度和高度。这样可以避免90%以上的额CLS。这里要说一下，即使使用了起飞页或者虎翼这种现代化的建站工具，如果不进行设置，还是有可能产生CLS。不过概率比较小而已。
强调一下，据未经证实的小道消息说该指标将成为2021年GOOGLE的排名因素。如果您非常在意站点排名，还是特别需要优化一下。