谷歌浏览器查看Core Web Vitals核心运行指标指南

你是否希望掌握网页在真实用户访问时的性能表现？例如，页面加载速度是否足够快，内容布局是否稳定无跳动？谷歌浏览器内置的开发者工具，能够帮助你直接获取这些核心用户体验指标，即我们通常所说的Core Web Vitals。其中，LCP（最大内容绘制）和CLS（累计布局偏移）是两个至关重要的数据点。

无需安装任何额外插件，通过Chrome DevTools自身就提供了四种原生方法来获取这些数据。接下来，我们将详细解析这几种途径，你可以根据不同的分析需求进行选择。

使用Lighthouse面板生成包含LCP与CLS的审计报告

如果你需要一份结构化的、模拟移动端环境的完整性能报告，Lighthouse是最直接的工具。它会执行一次自动化测试，并提供包含LCP、INP、CLS实测值及评分的详细结果。

操作步骤如下：

1. 打开待分析的网页，按下 F12 或 Ctrl+Shift+I（Windows/Linux系统）/ Cmd+Option+I（macOS系统）启动开发者工具。

2. 在顶部导航栏找到并点击 Lighthouse 标签页。

3. 在配置区域，为聚焦性能分析，建议仅勾选 Performance 类别，并确保设备类型设置为 Mobile。

4. 点击 Generate report 按钮，等待约30至60秒完成测试。

5. 报告生成后，滚动至 Metrics 区域。在此，你可以清晰地看到 Largest Contentful Paint (LCP) 和 Cumulative Layout Shift (CLS) 的具体数值。数值旁通常配有颜色评分图标：绿色表示“良好”，黄色表示“有待改进”，红色则代表“较差”，直观易懂。

通过chrome://net-internals实时捕获LCP与CLS原始事件

此方法较为深入，它直接调用Chrome底层的网络事件日志，能够获取未经实验室环境模拟的真实加载与布局偏移时间戳。特别适用于验证已上线页面在真实访问时的即时表现。

具体操作如下：

1. 确保待监控的网页标签页处于活跃状态。在地址栏输入 chrome://net-internals/#events 并回车。

2. 进入页面后，在左侧的过滤器（Filter）中输入 loading。右侧事件列表将筛选出包含 largestContentfulPaint 和 layoutShift 的原始条目。

3. 点击任意一条 largestContentfulPaint 事件以展开详情。在 params 字段中找到 startTime 的值（单位为毫秒），此即LCP发生的时间点。

4. 对于CLS，需对所有 layoutShift 事件执行类似操作。提取每条记录中 value 字段的数值，并将所有值累加，所得总和即为当前页面会话的CLS值。

利用Performance面板录制并筛选LCP与CLS相关帧数据

当你需要对性能问题进行深度归因分析时，Performance面板是得力助手。它能提供毫秒级的渲染帧追踪，精确指出是哪个资源的加载拖慢了LCP，或是哪次布局重排导致了CLS。

使用方法如下：

1. 打开开发者工具，切换至 Performance 标签页。

2. 点击左上角的圆形录制按钮，或直接使用快捷键 Ctrl+E（Windows/Linux）/ Cmd+E（macOS）开始录制。

3. 刷新当前页面，待其完全加载后，最好能进行至少一次用户交互（如点击按钮、滚动页面），然后再次点击录制按钮停止。

4. 在生成的录制结果中，找到 Timings 轨道，其中会有一个标记为 LargestContentfulPaint 的事件点，其时间戳即为LCP数值。

5. 同时，在 Layout Shifts 子轨道中，你可以看到所有被红色标记的布局偏移事件。每个事件的 value 即为单次偏移分数，将所有事件的该值相加，即得到整个录制过程中的CLS总值。

在Console中调用Web Vitals API直接读取运行时指标

最后这种方法非常灵活，它通过JavaScript API直接在页面上下文中实时获取LCP和CLS的计算结果。它反映的是当前会话中已发生的实际体验数据，不依赖于任何模拟或录制过程。

所有操作均在控制台中完成：

1. 打开开发者工具，切换至 Console 面板。

2. 要获取LCP，可粘贴并执行以下代码：

function getLCP() { const observer = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { console.log('LCP:', entry.startTime, 'ms'); } }); observer.observe({entryTypes: ['largest-contentful-paint']}); } getLCP();

3. 要获取CLS，则粘贴并执行另一段代码：

function getCLS() { let clsValue = 0; const observer = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { clsValue += entry.value; console.log('CLS so far:', clsValue); } }); observer.observe({entryTypes: ['layout-shift']}); } getCLS();

4. 执行代码后，刷新页面。你将在控制台中看到，每次LCP事件触发时，都会打印出对应的时间戳；而每次发生布局偏移（layout-shift），控制台也会实时打印出累积至当前的CLS值。最终稳定下来的累积值，即为本次会话的最终CLS分数。