问题标签 [cumulative-layout-shift]

我正在使用以下 CSS 在我的网站上创建一个瓷砖网格。

该代码工作正常，但是在加载页面时我得到了“布局转换”。如果我进入开发人员模式并限制带宽并加载页面，我首先会看到一列，然后是两列，然后是三列，依此类推，具体取决于屏幕的宽度。有没有办法避免页面加载时出现这种布局变化？网站是https://portfoliotoolbox.com

久违的浏览器，第一次发帖。

我正在重建一些页面以消除导入整个引导框架的需要。我已将 CSS 类和样式从我的原始版本复制到我的开发站点。在这一点上，一切看起来都差不多，我很难找出主要的 CLS 差异。

原文：https ://www.estonetech.com/category/tech-blog/ 手机CLS：0 桌面CLS：0.007

新：https ://staging-estonetechnology.kinsta.cloud/tech-blog/ 移动 CLS：0.123 桌面 CLS：0.763

我确定页面之间仍然存在一些细微差别，但我真的无法找到导致 CLS 发生巨大变化的原因。

任何人都可以帮忙吗？

我已经使用 chrome profiler 来识别我们网站上的布局变化，并发现 Google One Tap 横幅在移动设备上导致了显着的布局变化 (> 0.1)（显示布局变化的分析器图像）。我还添加了一个使用布局不稳定API 的性能观察器来识别导致 CLS 的组件，它也表示相同。

我曾尝试使用 更改一键式的位置data-prompt_parent_id，但这在开发人员指南中提到的移动 Web 浏览器上被忽略。

在 Google Chrome 上，当向用户视口上方的 DOM 添加元素时，视口中的内容不会发生变化，而在 Safari 上会发生变化（等于新元素的高度）。

在视口之外进行更新后，Safari 上的内容怎么可能不发生变化？

编辑（2021-06-02）：我发现这种行为称为滚动锚定，更多详细信息可以在https://github.com/WICG/ScrollAnchoring和https://developer.mozilla.org/en-US上找到/docs/Web/CSS/overflow-anchor/Guide_to_scroll_anchoring

在下面的演示视频中，一个项目被添加到列表顶部（每 4 秒）。添加项目时（以蓝色突出显示），视口中的内容（使用可滚动区域模拟）向下移动，导致布局移动。

• 源代码：https ://github.com/kevinfarrugia/poll-layout-instability
• 演示：https ://kevinfarrugia.github.io/poll-layout-instability/

我遇到 CLS 问题，但我不知道为什么

如果你看这张照片，你会看到我为所有加载后的元素保留了空间

那么，为什么 CLS 很差呢？

这怎么可能？

请帮帮我

我是 disco-polo.info 网站的发布者，超过 4 周以来，我一直在尝试纠正 LCP 和 CLS 指标的问题 - web.dev 或webpagetest.org 等测试通常显示 CLS 为 0.0 或0.002，然而，在控制台奶酪中，我有 0.14 级的集体 cls。

我对 LCP 也有类似的问题。如何可靠且正确地验证 LCP 和 CLS？

由于愿意获得更好的 Web Vitals 分数，我没有使用响应式广告。

但是，在Let Google optimize the size of your mobile ads选中后，Google 似乎仍会min-height通过将 CSS 属性修改为以下内容来更改/更新其在已定义容器中的广告尺寸：

有什么办法可以解决吗？

我不想取消选中它，因为收入会下降。

即使对于非常简单的限制，Google Search Console 也显示出较高的 CLS 值。例如，可以使用一个单词内容的页面：https ://poncy.ru/tst/cls.html （链接），该页面既没有CSS也没有JS，分析器显示Cumulative Layout Shift（CLS）桌面的值为 0.13。如何解决这个问题？正因为如此，谷歌搜索控制台用这个虚假指标标记了所有页面，这让我很紧张））。非常感谢。

源页面：

我有一个在线应用程序。它会触发一个很长的动画来改变容器的高度。然而，目的地高度是不可预测的。这会使所有较低的 DOM 节点都受到 CLS 分数的惩罚。仅供参考：CLS 仅在用户操作后原谅前 500 毫秒的布局转换（在这种情况下单击）。并且动画持续时间超过 15 秒。

因为它是不可预测的，所以我不能min-height像大多数文章建议的那样设置。有什么办法可以避免吗？

坦率地说，我认为这对用户体验没有任何负面影响，因为她/他会看到进度并知道动画完成后何时与页面交互。

我的网站https://propertymysore.com/使用来自 themeforest 的模板 FindHouse。

这是使用引导程序 4.2.1

当我运行 pagespeed 洞察时，我在移动设备中获得了 0.716 的 CLS 得分，在桌面设备中获得了 0.37 的高 CLS 分数。

我看到这导致我的移动页面速度下降到移动设备的 50 以下和桌面设备的 90 以下。

下拉菜单的折叠效果是罪魁祸首。

有人可以帮助我如何减少这种影响或加快将菜单折叠到最终位置的过程更快等以改善 CLS 并因此提高分数？