Google 页面速度洞察和 CLS

Question

根据我的现场数据概览，CLS 值为 0.98 而什么时候，我看一下避免大布局变化的描述 - CLS 贡献是 0.004。

如何找出导致 CLS 的元素？

Answer 1

嗨，Shreya，您需要使用 Chrome 点击右侧的 3 个点，然后转到更多工具，然后在出现的屏幕中点击开发人员工具点击性能选项卡点击左侧的点，它会在录制时变为红色完成后，您会看到一个橙色条，上面写着 Layout shift 双击该条，它应该在此示例中的 Summery 选项卡中为您提供更多信息，它提供以下内容

1. 布局移位警告累积布局移位可能导致用户不佳 经验。
2. 得分1.000
3. 累计分数1.000
4. 最近有输入否
5. 移动位置：[0,0]，尺寸：[360x640]
6. 已移至位置：[0,0]，尺寸：[360x640]
7. 相关节点 li.velocity-animating::before