使用 Chrome 开发者工具获取网站的 LCP 数据

发布时间 2023-11-13 11:57:46作者: JerryWang_汪子熙

Largest Contentful Paint(LCP)是一个重要的、用户感知性能的测量指标,它报告了在页面加载过程中,视口内最大可见元素呈现的时间。理想的 LCP 时间小于 2.5 秒。

那么,我们如何使用 Chrome 浏览器来度量一个网站的 LCP 呢?下面是一个详细的步骤说明。

首先,你需要打开你想要测试的网站。然后,右键点击页面,选择 检查 选项,或者你可以使用快捷键 Ctrl + Shift + I(Windows / Linux)或 Cmd + Option + I(Mac)来打开 Chrome 的开发者工具。

在 Chrome 开发者工具面板中,选择 Performance 标签。Performance 面板提供了一种测量和分析网站性能的方式,包括 LCP。

Performance 面板中,你会看到一个灰色的 Record 按钮,它看起来像一个圆圈。点击这个按钮,Chrome 就会开始记录你的网站性能。这时,你可以刷新页面,以便让 Chrome 测量从页面加载开始的所有性能指标。

当页面刷新完成后,点击 Performance 面板中的 Stop 按钮,让 Chrome 停止记录。然后,Chrome 会在 Performance 面板中生成一个性能记录。

在这个性能记录中,你可以看到一个名为 Timings 的区域,其中包括了各种性能指标的度量,包括 FCP(First Contentful Paint)、LCP(Largest Contentful Paint)、DCL(DOMContentLoaded)等。每一种指标都以一条横线表示,线的颜色和指标的颜色对应。

找到颜色为绿色的 LCP 线,将鼠标指针放在这条线上,就可以看到 LCP 的具体时间。

以上就是使用 Chrome 浏览器度量网站 LCP 的方法。这是一个直观且强大的工具,可以帮助我们更好地理解和改进网站性能。但是,需要注意的是,由于网络条件、设备性能等因素的影响,同一个网站在不同的环境下的 LCP 时间可能会有所不同。因此,当我们在优化网站性能时,应该尽量在多种条件下进行测试,以确保我们的网站可以在各种环境下都提供良好的用户体验。