lighthouse - 灯塔检测不可见的布局变化？（令人难以置信的高 CLS）

Question

我正在优化 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 开发人员向他们展示这一点？

预先感谢您的帮助。

问候，

Answer 1

CLS 是可见的，它是字体。

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

怎么解决？

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

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

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

Answer 2

通过自托管字体而不是调用 Google Fonts API，您可能会获得一点性能，但字体不是这里的主要问题。Javascript 是。

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

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

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

这是我在 Chrome DevToolsPerformance面板中注意到的内容：

• 似乎有 5 个front-end.js脚本（和 1 个min-front.js）。它们是重复的吗？
• 您需要带有gsap和 ScrollTrigger 的动画吗？
• 不是lazyload.min.js和areimagesloaded.js做同样的事情吗？（我可能错了）
• 你要导入整个 lodash 库吗？如果是这样，请尝试仅导入您实际使用的函数。
• 您真的需要Intersection Observer的 polyfill吗？我认为现在所有现代浏览器都原生支持它。

CLS 基本上是页面上发生的所有意外布局变化的总和。从下图中的橙色虚线可以看出，4 个 .woff2 字体文件对 CLS 有贡献：一旦获取字体，就会发生第一次布局转换。

但正如我所说，我将专注于删除所有不必要的 Javascript。特别是，我会检查第三方 JS，比如来自 的choices.consentframework.com那个，它需要 1730 毫秒来加载，占内容大小的 25%（见下文）。

在 JavaScript 之后，专注于图像。

Chrome DevTools 中的 Performance 面板显示了很多对图像的请求。您是仅获取视口中的图像，还是页面上的所有图像？

这些图像大部分是 WebP 并且似乎已经优化，但也有一些 GIF，这对性能非常不利。这些 GIF 似乎是由https://www.viously.com/提供的（我猜它是一个广告服务器，这是我第一次看到它）。

最后但并非最不重要的一点是，仔细检查您的所有<img>和<video>拥有size和width属性设置。图像和视频被替换为具有固有尺寸的元素，忘记在 HTML 中设置图像大小是布局变化的常见原因。

有关如何优化 CLS 的更多提示，另请参阅Addy Osmani 的这篇文章。