用途
该技能用于审计与「最小化累积布局偏移（CLS）」相关的性能问题，适用于排查页面加载缓慢、资源过重或渲染延迟的场景。CLS 衡量的是视觉稳定性，布局偏移会导致意外点击、阅读中断和用户挫败感，良好的 CLS 分数能确保内容停留在用户预期的位置。
主要能力
技能提供以下快速参考要点：
- CLS 衡量视觉稳定性，目标分数应低于 0.1。
- 始终为图片和嵌入内容设置 width/height。
- 为广告、横幅和动态内容预留空间。
- 使用 transform 动画，而不是会改变布局的属性。
技能围绕四个环节展开：
- 检查：使用 Lighthouse 或 PageSpeed Insights 测量 CLS，确认分数低于 0.1 以获得良好的视觉稳定性。
- 修复：为图片/嵌入内容预留带尺寸的空间，使用字体显示策略，避免在已有内容上方注入内容。
- 解释：说明 CLS 如何衡量视觉稳定性，以及为什么意外的布局偏移会让用户感到挫败并导致意外点击。
- 代码审查：审查影响「最小化累积布局偏移」的路由、资源和加载行为，标记出增加不必要网络、CPU 或布局成本的具体文件、请求或渲染步骤，并描述用于确认问题的测量方法。
使用方式
在审计页面性能、排查与 CLS 相关的加载或渲染问题时使用该技能。完整实现细节、代码示例和框架特定指导见 references/rule.md。规则页面为 https://frontendchecklist.io/rules/performance/cumulative-layout-shift。
适用场景
适用于前端性能审计、页面视觉稳定性检查、代码审查中识别布局偏移来源，以及优化图片、嵌入内容、广告和动态内容的加载行为。
限制
资料未提供具体的框架实现代码、安装命令或更详细的配置说明，相关内容需参考 references/rule.md。