问题标签 [cumulative-layout-shift]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
lighthouse - Lighthouse - 低 CLS 分数使 LCP 分数更高
我正在尝试修复 Lighthouse 检查中提到的网站性能问题。
最高（很差）分数是 CLS 的。
为了解决网站中的 CLS 问题，我需要做的就是将一些加载在底部的媒体查询样式移动<body>到<head>.
意味着，将样式从一个 CSS 文件移动到另一个。
在我进行这些更改后，CLS 分数降低为0！这是完美的。
但是由于某种原因，一旦我这样做，LCP 分数就会乘以 3！
没有新的请求，没有额外的 CSS，没有额外的 JS。它仍然发生。
有人遇到过这个问题吗？我真的不知道该怎么办。
非常感谢。
javascript - Toggle() 或 ClassList.toggle()
我的页面有一些 CLS 问题。这可能是因为我用 JS 隐藏了一些元素，这是我的问题：
对于 CLS 优化，使用.toggle()或添加displayNoneClass到我想要隐藏然后使用的所有元素是否更好.classList.toggle("displayNoneClass")？
html - 设置![]()
宽度和高度以改进 CLS 会导致纵横比问题
我正在尝试通过按照 Google Page Speed官方指南修改我的图像来改进我网站上的 CLS 。我有一个固有大小为 500 x 281 像素的 JPG 图像，因此我添加了以下 HTML 作为测试：
问题在于图像的实际纵横比现在取决于视口和容器——这意味着纵横比变得不正确。我的期望是，以上将确保图像的宽度为容器的 100% 并解决 CLS 问题，同时保持正确的纵横比。
我还尝试了以下替代方法（在此示例中使用内联样式）：
这似乎具有实现预期结果并从 Google Page Speed 中删除 CLS 请求以在图像上添加显式高度/宽度的效果。但是，由于某种原因，CLS 在使用这个与不使用任何样式时变得更糟，我不明白。
html - 为什么 CSS 在页面加载时未应用于图像并导致 CLS 问题？
在我正在处理的网站 ( https://obkio.com/ ) 上，我们在主页上遇到了 CLS 问题。顶部蓝色部分的背景图像应该占据屏幕的整个宽度，但在加载时不会持续几秒钟。我们看到左右边距（如果您将网络速度限制为“慢 3G”，问题会更加明显）。
看起来图像是在应用 css 之前加载的。
我想知道如何解决这个问题。我已经尝试直接在我的 HTML 中添加样式，但它不起作用。
像那样：
html - HTML 未一次加载
谷歌报告我的网站有一个很大的 CLS，所以我正在检查网站的加载方式。我注意到在打印出 HTML 之前加载了 CSS。这怎么可能？不是应该先加载HTML文档，再加载所有资源吗？
在我的情况下，问题在于元素的顺序，在我的 HTML 中：
- 首先是标题
- 然后是页脚
- 然后是内容。
然后 CSS 将页脚定位到底部（这完全是因为 z-indexes 和固定的页脚位置）。
我设置了网络和 CPU 限制，我在检查器中看到 HTML 文档正在加载和添加新的 HTML 元素，而网站已经在设置样式。这是正常行为吗？我的网站使用 Smarty 生成 HTML，它可能是连接的吗？
css - 页眉中的累积布局移位 (CLS)
我在页眉的页脚中出现一些累积布局偏移 (CLS) 时遇到问题。社交图标 + 文字“发现”出现在主徽标后面。
这里的一些 CSS 是：
但是我不知道如何解决这个问题并使其成为页脚的静态。我会很感激你的建议。太感谢了！
html - 修复 Div 中的累积布局偏移
我正在尝试优化我的网站以防止累积布局移位，并且大部分都已修复。然而，Chrome 开发者工具抱怨以下代码块受到 CLS 的影响：
此代码中是否还有另一个可能导致布局偏移？我的图像分辨率已设置，我没有看到任何可能导致弹出效果的内容。
wordpress - 如何解决 WordPress 中消除渲染阻塞后产生的布局移位问题（CLS）？
我们使用 Astra 主题和海狸页面构建器插件在 WordPress 中开发了我们的网站。为了提高网站得分，我们使用了 WP-Rocket 插件进行优化。现在 WP-Rocket 正在优化 CSS 和 JavaScript 并最终加载 CSS 和 JS 文件。因此，由于海狸页面构建器样式（布局 CSS）加载较晚，并且在页面速度洞察力中产生了 CLS 问题。有什么方法可以在第一次加载时加载这些布局 CSS 文件。
注意：对于每个页面，这些布局 CSS 文件由海狸页面构建器自动生成。
html - 累积布局移动 HTML 元素
试图修复我网站的 CLS。我通过 CLS 调试器对其进行了调试，发现这些 HTML 元素对页面的累积布局移位贡献最大：
| CLS分数 | HTML 元素 |
|---|---|
| 0.3972 | 导航#site-nav |
| 0.3972 | div#content>section.cs-section.no-padding.parallax.cs-section-cover-bg.rocket-lazyload>div.container-fluid>div.row>div.col-md-12>section.cs-部分 |
| 0.3972 | div#content>section.cs-section.sm-padding |
| 0.3972 | div#content>section.cs-section.no-padding.parallax.rocket-lazyload |
| 0.3972 | div#content>section.cs-section.custom-padding.cs-text-white |
既然我知道这些因素导致了问题，那么最好的行动方案是什么，以使它们不会转移？我应该单独针对其中的每一个并指定宽度/高度吗？如何定位 cs.sections？
responsive-design - AdSense 与累积版式转换 (CLS)
知道如何在加载包含 AdSense 的页面时防止奇怪的累积布局偏移 (CLS) 吗？
网站采用响应式设计并使用 AdSense 响应式广告单元。在实施响应式设计和使用响应式广告之前，没有任何问题，因为每个广告位置都定义了固定的宽度和高度。
在网络上实时观看https://cs.renault-club.cz/poradna 在 YouTube 视频上观看https://www.youtube.com/watch?v=1pT4fWAtKfU