CLS：布局转变

测试用户耐心的滚动：CLS

没有什么体验比您正在尝试阅读的文本突然向下滚动或按钮在您即将单击时改变其位置更糟糕的了。 Google 使用累积布局偏移 (CLS) 指标来衡量这种不稳定性，并认为小于 0.1 为“良好”。

为什么会出现 CLS？

• 未指定尺寸的图片和视频。
• 延迟加载字体（FOIT/FOUT 问题）。
• 动态添加的广告空间或
• 由于延迟加载 CSS 文件而导致样式发生变化。

解决方案

• 向所有 和 标记添加 width 和 height 值。
• 使用 CSS 中的 aspect-ratio 属性预留空间
• 使用时font-display: swap 对于字体上传，将后备字体的尺寸与主字体对齐。
• 为广告空间创建固定高度的容器。