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

问题描述

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

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

1. Results here,with CSS delivery optimization

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

2. Here,the element with the highest layout shift
3. The element with the highest layout shift (detail)

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

4. Results WITHOUT CSS delivery optimization

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

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

预先感谢您的帮助。

问候，

解决方法

CLS 是可见的，它是字体。

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

如何解决？

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

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

这将解决 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。

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

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

JavaScript 之后，专注于图像。

Chrome DevTools 中的性能面板显示了大量对图像的请求。您是只获取视口中的图像，还是页面上的所有图像？

这些图片中的大多数是 WebP 并且似乎已经优化过，但也有一些 GIF，它们是 really bad for performance。这些 GIF 似乎是由 https://www.viously.com/ 提供的（我猜是广告服务器，我还是第一次看到）。

最后但并非最不重要的一点，请仔细检查您的所有 <img> 和 <video> 是否都设置了 size 和 width 属性。图像和视频replaced elements具有内在尺寸，忘记在 HTML 中设置图像尺寸是布局变化的常见原因。

另请参阅 this article by Addy Osmani，了解有关如何优化 CLS 的更多提示。