灯塔检测隐形布局变化？难以置信的高CLS

如何解决灯塔检测隐形布局变化？难以置信的高CLS

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

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

Results here,with CSS delivery optimization

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

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

Results WITHOUT CSS delivery optimization

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

您知道如何解决这个问题吗？或者你认为我需要联系 LS 开发者向他们展示这个吗？

预先感谢您的帮助。

问候，

解决方法

CLS 是可见的，它是字体。

您没有注意到，当您访问页面时，文本会被调整大小吗？这是 CLS 的常见原因。

如何解决？

在本地提供您的字体。不要使用任何插件，如 OMGF。手动完成。

下载字体。选择 2 种字体，一种用于正文，另一种用于标题。您不需要粗体、斜体或粗体+斜体字体。这些将由用户的浏览器应用。
转换为 woff2（只有 woff2 就足够了，没有遇到任何问题）
将其上传到您的服务器
添加字体 CSS 以声明字体
使用 CSS 元素应用字体
如果您使用任何 WP 主题或构建器，请禁用 Google 字体
预加载字体

这将解决 CLS 问题，也将减少总阻塞时间。

您可能通过自托管字体而不是调用 Google Fonts API 来提高性能，但字体不是这里的主要问题。 Javascript 是。

这个网站有很多Javascript，所以主线程忙着下载、解析和执行。

我使用 Moto 4G 配置文件运行了 Lighthouse（启用了清除存储和模拟节流）和 WebPageTest。

正如您从 Chrome DevTools 和 WebPageTest 中看到的那样，花费在主线程上的大约 56% 的处理时间是由于脚本编写的。你真的需要所有的 Javascript 吗？

这是我在 Chrome DevTools Performance 面板中注意到的：

似乎有 5 个 front-end.js 脚本（和 1 个 min-front.js）。它们是重复的吗？
您是否需要带有 gsap 和 ScrollTrigger 的动画？
lazyload.min.js 和 areimagesloaded.js 不是在做同样的事情吗？（我可能错了）
您要导入整个 lodash 库吗？如果是这样，请尝试导入 just the functions you are actually using。
您真的需要 Intersection Observer 的 polyfill 吗？我认为所有现代浏览器都support it natively nowadays。