累积版面偏移答案

【问题标题】：Cumulative layout shift累积版面偏移
【发布时间】：2020-06-03 12:08:23
【问题描述】：

我正试图找出是什么导致我的网站未能通过 Google 在移动设备上的新核心价值 CLS 测试。

测试显示在测试结果细分中未发现任何元素，但显示需要改进，网站的所有 22 个 URL 显示结果为 0.14，通过率为 0.10 或更低。

我感到困惑的是，它在实验室测试中显示为没有 CLS，而在每天更新但落后 1 天的现场测试中显示为 0.14。

我尝试使用 Google 开发工具向我展示正在发生变化并导致其失败的元素，但我也找不到任何东西。

我想问的是，我如何才能找到正在发生变化并导致问题的元素？

【问题讨论】：

【解决方案1】：

在 Chrome 中，您可以使用开发者工具 > 更多工具 > 渲染 > 布局移位区域。它将以蓝色突出显示移动区域。

记得测试桌面和移动视图。

【讨论】：

【解决方案2】：

我遇到了完全相同的问题，但没有找到解决方案...实验室测试和现场测试都可以，但 Search Console 告诉我网站很差。

【讨论】：

【解决方案3】：

好吧，它可以跟踪任何 CSS 动画有时甚至是背景动画（我们不得不禁用）我认为谷歌应该解决这个问题

【讨论】：