CLS
CLS 页面布局偏移
大体意思是页面加载时某个模块被其他模块或者本身偏移了当初的位置 比如文字 按钮 图片没固定高度等
指标是偏移量 `<0.1`
检测方法：通过 chrome 中 Lighthouse 和 performance 进行排查, 查看“Web Vitals”轨道中的“Experience”轨道或布局转换 (LS) 符号，以查找转换发生的时间。
解决方案:
- 图片设置宽高
- mui 组件只使用 Box 结合 tailwind 的 hidden flex 以及 md: lg:等响应式，因为其他组件使用后 会比 tailwindcss 加载慢 导致布局偏移
- 在网页字体加载期间，所有文本都保持可见状态，使用 font-display: swap 设置特殊字体在未下载前使用系统字体,也就是先使用系统字体显示文字 这可能会影响 CLS 所以需要检测下实际的 CLS 偏移量
- 异步加载的组件 如果在首评的话 先使用 loading sketon 进行占位