核心网页指标工具

我仍然认为谷歌设计的 核心网页指标 非常聪明。当我刚开始关注性能时，一切都围绕着：减少请求！缓存内容！缩小文件大小！虽然这些都与网页性能密切相关，但它们是抽象地相关的。用户体验的实际网页性能包括诸如我需要等待多长时间才能看到页面上的内容？要多长时间才能真正与页面交互，例如在表单中输入内容或点击链接？在我尝试执行操作时，内容是否会令人讨厌地跳动？这就是核心网页指标很聪明的原因：它们衡量这些方面。

Chrome 开发者工具中的 Lighthouse 选项卡现在包含了这些指标

值得关注这些指标，因为 请记住，除了这些数字一旦用户访问您的网站就能直接为他们带来好处之外，它们还可能影响用户访问您的网站的可能性。核心网页指标正被纳入 SEO 和之前仅限于 AMP 页面的新轮播要求中。

跟踪一次性审核中的这些数字很有用，但更有用的是随着时间的推移观察它们，以防止性能下降。诸如 Calibre 之类的性能工具涵盖了这些指标。New Relic 也已支持。SpeedCurve 跟踪这些指标。

累积布局偏移 (CLS) 是一个棘手的问题。例如，网站在文章顶部有一个广告。对该广告的请求是异步的，因此广告很可能延迟加载并向下推文章内容。这不仅令人烦恼，而且会严重影响性能指标，最终也会影响 SEO。

Nic Jansma 的 “实践中的累积布局偏移” 提供了深入的探讨。

CLS 不仅仅是“页面是否发生偏移”。它有一个分数，如上图所示。我认为 0 是一个不错的目标，因为没有哪种版本的 CLS 对任何人都是好的。这其中有很多细微差别，例如“合成地”跟踪它（例如，在无头浏览器中，特别是对于性能工具）以及在您实际网站上的真实用户身上跟踪它（称为 RUM 或真实用户指标）。两者都有用。

如果您需要解决 CLS 问题，这可能很棘手。SpeedCurve 有 一些新的工具 可以提供帮助

对于每次布局偏移，我们都会显示偏移前后胶片帧。然后，我们会在移动的元素周围绘制一个红色框，突出显示导致偏移的确切元素。每次偏移的布局偏移分数也有助于您了解该偏移的影响以及它如何累加到总分。

我希望这将使根除和修复问题变得很容易。尤其是那些棘手的。我以前不知道，但 CLS 可能由更细微的原因导致，Mark Zeman 在帖子中指出了这一点。例如

• 仅水平移动的图片轮播可能会触发 CLS。这让人感觉很糟糕，因为这正是它们应该做的，但显然，您可以通过仅使用 CSS transform 移动轮播来解决这个问题。
• 如果某个区域非常大，则移动它风险更大。如果它只移动了一点点，它就会对 CLS 产生很大影响。
• 未设置样式文本闪现 (FOUT) 是导致 CLS 的原因之一。即使这出于其他原因对性能有益！真是矛盾！这是一个很好的借口来使用 完美的字体回退。

棘手但重要的事情。我确实需要将性能测试集成到我的 CI/CD 中， 这将非常有帮助。感觉网页性能越来越像网页开发的一个完整的事业分支。前端网页开发者确实需要了解这些内容并在一定程度上提供帮助，但我们已经 有很多事情要做。