问题标签 [cumulative-layout-shift]

Lighthouse 中的累积布局偏移报告的数字很高：0.546

分析跟踪我注意到图像块最初没有占用所需的空间并将下面的内容向下推。见图片：

我对此感到惊讶，因为图像元素的容器 div 具有最小高度设置：

CSS

HTML

为了准备下一次 Core Web Vitals 更新，我正在努力减少我公司网站上的 CLS。当我在 Chrome 中运行 Lighthouse 审核时，我更新的页面得到了 0.05，低于 Google 推荐的最大值 0.1。

但是，当我的公司 SEO 专家进行审核时，她在同一页面上的得分 > 0.3。我认为这可能是一个速度问题，但限制我的互联网速度并没有改变我的结果（至少在 CLS 方面）。就此而言，她的审核将高级别父 div 元素称为导致高 CLS，而不是父 div 中的特定元素。

有什么理由为什么她的分数会比我在同一页上的分数差这么多？我应该注意在 Lighthouse 中进行 CLS 测试的任何已知问题吗？

我有一个网站indiabazaaronline.com，它在谷歌搜索控制台中显示累积布局移位（CLS）问题 >.25 错误。因此，我们最近失去了 50% 的自然展示次数和点击次数。我不知道这将如何解决。任何将导致解决此问题的线索或教程都将受到高度赞赏。我尝试删除粘性导航标题，但仍然存在相同的错误。

我们使用 Adsense 的“自动广告”并且通常对它非常满意。不幸的是，我们的移动 (!) 网站上的 CLS（累积布局转换）存在问题。我们现在已经对此进行了测试，问题肯定是由自动广告触发的。经过进一步测试，我们能够确定触发 CLS 的正是页面头部区域中的粘性锚定广告。重要提示：加载页面时不会发生移位，而是在锚广告出现在顶部后向下和向上滚动时发生。此时 Adsense 为我们页面上的所有元素添加一些样式属性，例如。“高度：自动！重要；” 有没有人也有这个问题？我们能做什么？我们不想继续没有粘性锚广告。重要提示：问题仅限移动设备！Google Adsense 是否正在为此努力？谢谢！

我正在尝试减少网站上的 CLS（累积布局偏移）。使用 Google 的 webvitals JS 库，我看到 CLS 的最大来源之一是下面，它的节点为“null”，导致布局转移。有谁知道如何解决这个问题？如果导致转移的节点为空，我将如何更新 CSS 或 HTML 以防止这种转移？

在我们的 PSI 数据中，我们看到一些页面的 CLS 数字非常惊人，我们无法重现或理解这些数字。事实上，这里有一个页面有 2.52 的示例，但我什至认为不可能超过 1.0 的分数，这将是屏幕上所有内容的完全转变，对吗？数据/chrome是否有问题，因为这不是一个孤立的事件……大约一个月前，我们的网站页面突然开始遭受可怕的CLS数据，我们在GSC的Core Web Vitals区域感到困惑。

查看 CLS...2.52 的现场数据，但实验室数据是 0.044。PSI 链接

如何在 header.php 文件中停止此全宽画布动画项的累积布局移位？下面代码中的垂直偏移来自哪里？

当我运行 Google Lighthouse 时，它​​说动画画布中存在累积变化。我不知道如何停止班次，但想保持一切正确的大小，并确保没有累积班次。如果您在 PC 上，您可以在此处看到页面顶部的动画：带有轻微移位的动画画布是否将带有动画的画布放在页面模板文件中更好，只需将其放在内容区域或放入headed.php 文件？

我们是向客户网站添加组件/UI 元素的第三方供应商。我们有时会根据上下文参数或作为 A/B 测试的一部分在运行时隐藏/更改此容器的大小。

在我们拥有所有上下文数据之前，网站所有者不可能知道元素的最终大小，因此无法在服务器端设置高度。

为了尽量减少对 CLS 的影响，网站所有者可以为容器设置初始高度，但这有两个问题：

1. 它并没有完全消除 CLS，只是略微降低了它
2. 它创建了一个糟糕的用户体验，页面加载了一个空白区域，然后消失/改变高度

消除此类元素的 CLS 影响的推荐方法是什么？

我们的网格视图产品存在 cls 问题。

我们发现，如果我们使用以下 css，这将停止 cls 问题：

不过，这有一个问题。在最大宽度设置为 1000 像素的大型桌面设备上，由 4 个产品组成的产品网格视图不会填满页面中间的整个内容部分。显然我们可以增加 max-width 来纠正这个问题，但这会导致 cls 问题。

一直在努力寻找解决此问题的方法，以便我们可以让产品在更大的桌面设备上填充屏幕内容，而不会出现累积布局 (CLS) 问题。

任何超过 1000px 的数字都会导致 cls 问题。1000px 及以下，不存在 cls 问题。

我正在优化 WordPress 网站的速度（目前仅在移动设备上），除了 CLS 之外都取得了成功。在优化 CSS 交付（使用 WP-Rocket）后，CLS 变得非常高，但我没有看到任何布局变化，即使我使用开发工具（性能测试）。（在移动）

这是示例：https ://trustmyscience.com/israel-a-pratiquement-eradique-la-covid-19/

1. 结果在这里，通过 CSS 交付优化

所以这似乎是一种无形的布局转变，Lighthouse 将其视为真正的布局转变。灯塔向我展示了问题来自于<div class="entry-content body-color clearfix link-color-wrap progresson">. 因此，它似乎与所有文章内容的某些“包装”有关，可能会因为某些 CSS 规则而转移到背景中（不可见）？

2. 这里，具有最高布局偏移的元素
3. 布局偏移最大的元素（详细）

当我停用 CSS 交付优化时，CLS 几乎回到 0（但 LCP 太高）。

4. 没有 CSS 交付优化的结果

由于 LCP 的重要性，我需要此 CSS 交付优化，但由于 Core Web Vitals 中引入 CLS，我现在还需要解决此问题，并且需要找到 Lighthouse 检测为 LS 的内容。另外，也许，灯塔需要对此进行更正？因为它不是可见的布局转变......

您对如何解决这个问题有任何想法吗？还是您认为我需要联系 LS 开发人员向他们展示这一点？

预先感谢您的帮助。

问候，