每月有超过 5 万名来自世界各地的开发人员访问 DavidWalshBlog，学习 JavaScript 技巧并修复代码中的问题。不幸的是，他们中的一些人在网站上的体验很慢。
David 通过Request Metrics跟踪其 Core Web Vitals 的性能和整体性能。最近，我们注意到他的 CLS 性能得分对于桌面和移动用户来说都呈相当缓慢的趋势。
等等，CLS 是什么？
累积布局偏移(CLS) 是核心 Web 重要性能指标之一。它不直接测量加载时间，而是测量加载时页面移动的程度。您肯定已经看到过这一点并且对此感到恼火。这些转变让用户感觉网站速度很慢。
CLS 和核心 Web 生命线的其余部分非常重要。不仅因为它们衡量用户体验，还因为它们影响搜索中网站的页面排名。对于博主、媒体网站、电子商务商店以及几乎每个拥有网站的人来说，搜索流量就是生命。
如果我们能够解决网站的 CLS 问题，我们将为读者提供更快的体验，并提高搜索排名，以便 David 可以帮助更多的人。听起来像是一个很大的激励，让我们弄清楚一下。
谷歌灯塔崩溃
为了发现性能问题，许多开发人员会使用像 Google Lighthouse 这样的工具。我在 David 的网站上运行了一份 Lighthouse 报告，这就是我得到的结果。
满分！我们收拾好东西回家吧。
问题在于Google Lighthouse 是一个谎言。真正的用户不会有这样的表现。该分数仅代表一次测试，来自我在美国的闪电般快速的计算机，在快速宽带连接上。
David 的真实用户来自世界各地，在一天中的任何时间使用不同的设备和网络。他们的表演体验远非完美。这就是为什么我们需要真正的用户监控性能，否则我们可能永远不知道存在问题。
CLS的问题在哪里？
大卫已经写作很长时间了，他的网站上有数百篇帖子。请求指标跟踪每页的 CLS 分数，以便我们可以将问题归零。
流量最大的页面是根页面，并且具有良好的 CLS。但他的许多帖子，比如Play Grand Poo World和Pornhub Interview 的CLS 分数都令人不安。我们还可以跟踪负责 CLS 的元素，对于大多数帖子来说，其main > article > p 。这意味着文章的第一段正在发生变化。它为什么要这么做呢？
这些 CLS 分数最差的帖子有什么共同点？图片。图像是导致 CLS 问题的一个非常常见的原因，因为浏览器在下载图像之前并不总是知道图像有多大。浏览器假设它是 0x0，直到获得图像，然后移动它周围的所有内容以腾出空间。
包含大量图像的帖子会随着每张图像的下载而移动多次，并且文章也会移动以便为新内容腾出空间。
正确使用 CLS 图像
为了避免使用图像时布局发生变化，我们需要向浏览器提供图像大小的提示。下载完成后，浏览器将使用这些提示在图像布局中保留空间。
<img src =“/路径/到/图像”宽度=“300”高度=“100”/>
请注意，宽度和高度被指定为它们自己的属性，而不是样式标签的一部分。这些属性设置图像的基本尺寸以及要使用的纵横比。您仍然可以在此处使用 CSS 放大或缩小图像。
另请注意，没有指定px单位。
WordPress 中的图像尺寸
DavidWalsh.name 托管在 WordPress 上，其中有一些内置工具可以执行此操作。我们可以利用wp_image_src_get_dimensions来获取他正在使用的图像的尺寸并将它们添加到标记中。
证明它有效
大卫几天前对图像进行了更改，我们已经看到了改进。 CLS 下跌 20% 至 0.123。现在我们已经非常接近 CLS 的“Good”范围了。
关于字体还有一些问题需要解决，但这将是另一个时间和另一篇文章的故事。
如果您希望提高网站的实际性能，或者担心因核心 Web 重要问题而失去 SEO 能力，请查看请求指标。它提供了跟踪您表现的工具和实际解决问题的可行提示。
而且它是免费的，所以它有它的用途。
DavidWalshBlog 上的“修复累积布局偏移问题”一文首先出现在David Walsh 博客上。
原文： https://davidwalsh.name/fixing-cumulative-layout-shift-problems-on-davidwalshblog