我有一个带有导航的nav元素。 默认显示nav 。 这背后的想法是菜单应该是可见的（如果用户已停用 JavaScript）。 但是，如果用户已激活JavaScript，则导航不应可见。 为此，我使用文档就绪处理程序 将 class js添加到html元素。 如果这个 class 在那里，我的 CS ...
在搜索控制台上，它说我的一些链接有错误的 CLS。 然而，我已经跟踪链接一段时间了，CLS 是完美的（根据 web-vitals 客户端跟踪它的方式，该值大 1000 倍）。 我正在使用这个官方库来跟踪指标。 还有什么我可以尝试的吗？ ...
https://codesandbox.io/s/stackoverflow2-bdiq2r 我真的不明白为什么不同尺寸的图像会导致布局偏移。 考虑到响应式布局的图像大小差异，我编写了代码。 问题真的很奇怪，当你使用那里的按钮滑动轮播时，整个轮播都在视口内，没有问题。 但是，当您在部分旋转木马位 ...
网址：tinyurl.com/36utmdnc 在 Google Search Console 中，我看到了数千个 Core Web Vitals 错误，尤其是桌面模式下的 CLS。 我进行了许多更改，例如删除所有广告、调整 CSS、HTML 和其他代码。 实际上，我已经进行了一年的更改，但在过去 ...
我有一个非常基本的页面，其中仅包含文本。 页面内容在过去几个月没有变化，“核心网络生命评估”部分的 CLS 分数为： 但是“诊断性能问题”部分的指标中的 CLS 分数是： Core Web Vitals 显示过去 28 天的数据收集。 “根据最近 28 天收集期间的 Core Web ...
当我在 DevTools 中测试页面时，CLS 没有问题。 但是，对于 pagespeed-insights，移动页面 CLS 似乎存在困难。 不针对实验室数据，仅针对真实数据： https://federhilfe.de/rotkehlchen-anlocken-im-garten-ans ...
假设我有一个名为“示例网站”的网站，里面有很多段落。 如下图所示 现在假设那里有一个 chrome 扩展，它在我的页面中注入了一些图像。 这些图像在没有任何动画的情况下插入，导致我的网页布局发生了非常糟糕的变化。 这是扩展程序插入图像后页面的样子。 所以这是我的问题， 此第三方扩展引 ...
我有一个基本页眉，它应用了最大宽度和边距（标准内容），以便将其水平放置在页面中间。 但是，当我运行灯塔报告时，它会显示水平偏移。 下面是我的 HTML、CSS 和班次的截图。 如果其他人以前遇到过这个问题并且知道如何应对这种水平移动，我将不胜感激。 谢谢。 截屏： HTML： C ...
我正在使用padding-bottom hack来防止内容在我的图像加载时跳来跳去，但它不适用于较小的图像。 以下代码适用于占据容器宽度的全部 60% 的图像： 看法： Styles： 但是如果我使用像 48x48 这样的图像，我的aspectRatio将为 1，而paddingPercent将为 ...
我尝试了宽高比和 padding-top 技巧，但有没有办法自动化所有这些？ ...
试图修复我网站的 CLS。 我将它通过 CLS 调试器，它发现这些 HTML 元素对页面的累积布局移位贡献最大： CLS分数 HTML 元件 0.3972 导航#site-nav 0.3972 div#content>section.cs-section.no-padding.paral ...
我们使用 Astra 主题和 Beaver 页面构建器插件在 WordPress 中开发了我们的网站。为了提高网站分数，我们使用了 WP-Rocket 插件进行优化。 现在 WP-Rocket 正在优化 CSS 和 JavaScript，并最终加载 CSS 和 JS 文件。 因此，由于海狸页面构建器 ...
我在 header 的页脚出现一些累积布局偏移 (CLS) 时遇到问题。 社交图标 + 文字“发现”出现在主徽标后面。 域名是www.minoar.com 这里的一些 CSS 是： 但是，我不确定如何解决此问题并将其设置为 static 到页脚。 我会很感激你的建议。 太感谢了！ ...
谷歌报告我的网站有一个很大的 CLS，所以我正在检查网站的加载方式。 我注意到 CSS 在打印出 HTML 之前加载。 这怎么可能？ 不是应该先加载HTML文件，再加载所有资源吗？ 在我的例子中，问题出在元素的顺序上，在我的 HTML 中： 首先是 header 然后是页脚然后是内容。 然后 CSS ...
我的页面有一些 CLS 问题。 这可能是因为我用 JS 隐藏了一些元素，这是我的问题： 对于 CLS 优化，是使用.toggle()还是将displayNoneClass添加到我想要隐藏的所有元素然后使用.classList.toggle("displayNoneClass") ？ ...
我正在尝试修复 Lighthouse 检查中提到的网站性能问题。 最高（很差）分数是 CLS 的。 为了解决网站中的 CLS 问题，我需要做的就是将加载在<body>底部的一些媒体查询样式移动到<head>中加载。 意味着，将样式从一个 CSS 文件移动到另一个。 在我进 ...
由于希望获得更好的 Web Vitals 分数，我没有使用响应式广告。 但是，在选中Let Google optimize the size of your mobile ads ，似乎 Google 仍会通过将 CSS 属性修改为以下内容来更改/更新其在min-height定义的容器中的广告尺寸 ...
在 Google Chrome 上，当向用户视口上方的 DOM 添加元素时，视口中的内容不会移动，而在 Safari 上它会移动（等于新元素的高度）。 在视口之外进行更新后，Safari 上的内容怎么可能不发生变化？ 编辑（2021-06-02） ：我发现这种行为称为滚动锚定，更多详细信息可以在ht ...
我已经使用 chrome profiler 来识别我们网站上的布局变化，并发现 Google One Tap 横幅在移动设备上导致了显着的布局变化 (> 0.1)（显示布局变化的分析器图像）。 我还使用layout-instability API 添加了一个 Performance Obse ...
我正在使用以下 CSS 在我的网站上创建瓷砖网格。 该代码工作正常，但是在加载页面时我得到了“布局转换”。 如果我 go 进入开发者模式并限制带宽并加载页面，我首先会看到一列，然后是两列，然后是三列，等等，具体取决于屏幕的宽度。 有没有办法避免页面加载时出现这种布局变化？ 网站是https://p ...