问题标签 [cls]

我一直在努力改进网站上的 CLS。

所以我尝试添加一个父容器，以便图像将调整为该容器的大小。见下文：

和 HTML：

但它不起作用，我不确定我做错了什么。

今年 5 月将有一个 Google 更新，其中 CLS（累积布局转移）成为重要的排名因素。在我们的网站上，我们嵌入了一些 iframe（主要是实时代码等）。在某些时候，我们为这些 iframe 使用了固定的高度和宽度值，但这不是最佳解决方案，因为这些 iframe 的内容会定期更改。当它是一个显示体育赛事比赛日数据的 iframe 时，要么当日只有一场比赛时出现大量空白，要么当日有 9 场比赛时被截断。所以我们用 pym 脚本实现了一个 iframe 调整大小的解决方案。这使该网站看起来更好，并提高了可用性。一些 iframe 甚至更具交互性，并且具有选项卡导航等。当前的 iframe 调整大小也适用于此 - 然后也会调整高度。而且由于这是由用户交互引起的，因此 Google 不应该对此进行惩罚。嵌入和实现工作如下：http://blog.apps.npr.org/pym.js/

我做了一些研究，但不幸的是找不到保持可用性但摆脱 CLS 的解决方案。有没有人有一些提示、有用的链接或如何解决这个问题的想法？

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

当我运行所有测试时，我有一个网站似乎与所有用户指标匹配。但是在 Google Search Console 上，它在 CLS 上显示了很高的结果，我找不到它的原因。我使用的所有工具都显示我的 CLS 为 0。

我完全迷茫和困惑，因为我找不到 CLS 结果升高的原因。

我正在测试的网页是：

https://www.99contratos.com.br/contrato-locacao-residencial.php

我非常感谢所有帮助/提示/解释。

亲切的问候

我们在 20 天前实施了 CLS 优化，从那时起实际值（实验室数据）是完美的。现场数据的 CLS 则不同。它正在改善，但非常非常缓慢。如果它是在 28 天期间计算的，那么我们可能会看到明显更好的值。
我们从 1.06 的 CLS 开始，现在是 0.68。我计算机上的实验室数据显示 CLS 为 0.001 有什么方法可以验证现场数据计算吗？还是我没有看到其他任何原因？谢谢。

需要你的意见。一直在努力让网络生命体征进入绿色区域。并在灯塔的手动测试中获得好成绩。例如，我的页面在我执行的数十次测试中获得 CLS=0（桌面）。然而，谷歌搜索控制台最近对大多数 0.5 及以上页面的验证报告 :( 每当我手动运行时，我无法让 CLS 超过 0，所以我不知道去哪里找。

与 LCP 情况类似——在移动设备上测试 1.7 秒，在搜索控制台 4.2 秒（（（（（（

有没有人面临同样的问题？有什么线索吗？提示？

我对最新的核心网络生命力有疑问。它在具有大量页面的 HTML 静态网站上究竟是如何工作的？我做了一些测试，但我得到的结果真的很奇怪。这些结果是与整个网站相关还是仅与该页面相关，在我的情况下是首页？我还删除了很多元素来测试它，但结果并没有改变。

还有一件事让我感到困惑.. 一方面，谷歌建议避免轮班，但是当有 Adsense（这也是谷歌的产品）时，必须有轮班。那么，你是如何处理的呢？

晚上好，

我们对我们的网站进行了一些调整以改进 cls，效果很好。唯一的是显示价格的价格容器，现在位于容器底部，当产品标题较短时，在产品标题和显示价格的价格容器之间留下大量空白。在较长的产品标题上，它还不错。

由于每种产品的垂直空白间隔不同，因此想知道将价格容器放在产品标题下方的最佳方法。价格容器使用相对位置，产品标题使用绝对位置。我们唯一可以做到这一点的方法是将两个元素都设置为相对位置，但这会导致较高的 cls 分数。

任何帮助/建议将不胜感激。

亲切的问候，

安德鲁

我是Ninja Slider响应式图像滑块脚本 (CSS/Javascript) 的付费用户，它一直运行良好。不幸的是，谷歌现在警告说，它会导致在响应式布局中放置一个不可接受的大 CLS（累积布局移位）。我很乐观地看到 Stackoverflow 上的某个人已经调整了这段代码——或者类似的代码——并且可以提供帮助。

这个滑块在我的连接上加载得足够快，以至于我什至很难看到这种转变，但我同意任何转变都可能很麻烦，我想相应地修复它。本质上，我想修改代码，以便它快速勾勒出一个动态框，该框的大小是在加载图像之前将加载的图像大小，因此如果用户滚动过去并在第一张图像之前开始阅读，则以下文本不会向下移动在滑块加载中。

在 Google 的默认优化累积布局转换建议中，该公司建议添加图像的宽度和高度——就像在响应前的日子里一样——并像这样添加height: auto到imgCSS 中的代码中：

这适用于直接在动态布局中显示的图像，但不适用于滑块代码中的图像，因为图像不是作为img标签呈现，而是作为a href无序列表中列表项中的链接（标签）呈现。

尽管如此，我还是尽职尽责地尝试在div 和类height: auto中添加我认为可能相关的适用 CSS 文件。这并没有破坏任何东西，但也没有解决问题。默认 CSS 代码在此处。#ninja_sliderslider-inner

根据要求，我相信这是相关代码，但我可能是错的，查看完整代码可能很有用：

}

}

StackOverflow 上的这篇文章是我能够挖掘的唯一相关文章，答案表明display: none使用 CSS 类添加“块”可以解决问题。

根据我对display:none 工作原理的理解，我认为这只会阻止滑块出现，但我仍然尝试将其添加到ninja_sliderdiv 以及slider_inner类ul和li元素中。那没起效。我的代码与默认代码类似，但如果实时实现有帮助，请点击此处。

我在看什么？如何更改滑块代码以快速显示一个将很快容纳图像的框，以便随后放置的文本将保留在原位并且在图像加载时不会被按下？谢谢你。

将 amp-ad 和 amp-fx-collection 与属性（例如 fly-in-left 和 fly-in-right）一起使用是否会影响 CLS？