Core Web Vitals 可视化工具

我们很自豪地推出  Core Web Vitals 可视化工具。

今天我们在 Chrome 网上应用店推出了免费的 Core Web Vitals 可视化工具。 

Core Web Vitals 可视化工具是一款 Chrome 插件，帮助用户追踪和可视化页面的 Core Web Vitals。这些指标包括 Largest Contentful Paint、First Input Delay、Cumulative Layout Shift、First Contentful Paint、Interaction to Next Paint 和 Time to First Byte。该插件会创建一个覆盖层，向用户显示哪些元素导致了视觉不稳定，以及哪些事件导致了输入延迟。此外，该插件会将 Core Web Vitals 分解为基本组成部分，让用户更详细地了解页面的性能表现。该插件可在 Chrome 网上应用店免费获取。

作为一名 Core Web Vitals 专家，我花了大量时间检查页面在我与之交互时如何反应和响应。 这对 Core Web Vitals 有什么影响？当我切换到移动端模拟或禁用浏览器缓存时，Core Web Vitals 会如何变化？

当然我使用 RUM 追踪。 它能在页面级别告诉我哪些指标通过和未通过 Core Web Vitals。 但它们为什么未通过？ 这只有当你与页面交互时才能真正弄清楚。

为了节省大量时间，我决定将这个冗长流程中的一小部分自动化，并创建一个 Chrome 插件来为我完成一些繁琐的工作。 结果就是 Core Web Vitals 可视化工具。 我决定将这个插件提供给所有人。 所以快去 Chrome 网上应用店看看吧。

Core Web Vitals 可视化工具有什么功能？

首先，它会根据你与页面的交互来记录 Core Web Vitals。 它追踪 Largest Contentful Paint、 First Input Delay、 Cumulative  Layout Shift、 First Contentful Paint、 Interaction to Next Paint 和 Time to First Byte。

接下来，它会创建一个覆盖层来可视化所有这些指标。这会告诉你 Largest Contentful Paint 的元素是什么、 哪些元素 导致了视觉不稳定、 以及如果你与页面进行了交互，哪个事件导致了 First Input Delay。

最后，当你点击任何指标时，Core Web Vitals 可视化工具 会将这些指标分解为最基本的组成部分。

为什么不使用 Lighthouse？

试试 Core Web Vitals 可视化工具吧！

前往 Chrome 网上应用店安装 Core Web Vitals 可视化工具。如果你喜欢的话，也许……可以留下评价。我会非常感激。