← 返回功能
Pro

Core Web Vitals

Core Web Vitals 显示 Google 排名的三个指标 - LCP、CLS 和 INP - 在您正在查看的页面上实时测量,根据 Google 的阈值进行评级,并追溯到每个数字背后的确切元素。

Core Web Vitals 决定了你的页面排名的一部分,但是通常的衡量它们的方法很尴尬。实验室工具对无人体验过的综合负载进行评分。 Search Console 晚了四个星期才报告真实用户,并将其分组到 URL 存储桶中。两者都不会告诉您当前页面上的哪个元素有问题。

该工具可以测量您在使用时实际查看的页面。 LCP、CLS 和 INP 都会获得一个图块,其中包含其值、根据 Google 公布的阈值进行的“良好”、“需要工作”或“差”评级,以及一个显示您所处位置的栏。 FCP 和 TTFB 与它们并列以供参考,因为由缓慢的服务器引起的缓慢的 LCP 与由较重的图像引起的问题是不同的。

这些定义与 Chrome 向 CrUX 报告的内容相匹配,如果您打算将数字与 Search Console 进行比较,这一点很重要。 CLS 使用会话窗口(窗口在一秒间隙或五秒后结束,最差的窗口获胜),而不是天真地将每个班次加在一起。 INP 是交互延迟的第 98 个百分位数,对于正常访问来说这只是最慢的交互。 LCP 在您第一次交互时停止变化,就像 Chrome 所做的那样。

最有用的是,每个数字都有归属。该面板命名最大的绘制元素、移动的元素和最慢的交互,“显示”按钮滚动到其中任何一个元素并在页面上勾勒出它的轮廓。您并不知道 CLS 是 0.31,而是看到了将您的内容推低的横幅。复制报告将整个内容作为票据文本提供给您。

实时预览
example.com/products
Core Web Vitals 现场测量
LCP好的
1.84 s
CLS贫穷的
0.312
INP需要工作
248 ms
FCP 1.12 s
TTFB 410 ms
最大元素
1.84 s section.hero > img.banner 展示
最大的布局变化
0.241 div.promo-banner 展示
0.071 ul.product-grid > li:nth-of-type(3) 展示
核心功能

实时 LCP、CLS 和 INP

当您使用页面时,三个排名指标会更新:滚动移动 CLS、单击并键入 move INP。根据 Google 的阈值,每个项目都被评为“良好”、“需要改进”或“差”。

告诉你哪个元素

命名最大的绘制元素、移动的元素和最慢的交互。按“显示”滚动到其中任何一个并直接在页面上概述它。

Chrome 自己的定义

CLS 使用间隔为 1 秒、上限为 5 秒的会话窗口,INP 是交互延迟的第 98 个百分位,LCP 在第一次交互时冻结 - 因此您的数字与 Search Console 一致。

FCP 和 TTFB 用于上下文

“首次内容绘制”和“首个字节时间”位于三巨头旁边,因此您可以在开始优化错误的内容之前将缓慢的服务器与沉重的英雄图像区分开来。

互动细目

列出与事件类型和涉及的元素最慢的交互,因此可以找到而不是猜测缓慢的下拉列表或过滤器。

可复制的报告

一键单击即可将每个指标、评级和违规选择器复制为纯文本 - 可以粘贴到票证、拉取请求或客户电子邮件中。

使用场景

在发货前检查页面

在新模板上线之前确认 LCP、CLS 和 INP 处于绿色状态,而不是一个月后从 Search Console 中查找。

追踪 Search Console 警告

Search Console 告诉您一组网址未通过 CLS;用这个工具打开其中一个,看看到底是哪个元素发生了移动。

寻找跳跃的元素

滚动页面并观看 CLS 爬升,然后按“显示”以勾勒出正在移动您的内容的延迟加载广告、横幅或网络字体的轮廓。

诊断缓慢的界面

单击过滤器、菜单和模式,然后阅读最慢交互列表以查找哪个控件花费了数百毫秒。

证明优化有效

记录数字,部署修复,然后再次测量同一页面并并排比较两个报告。

使用方法
1

打开Core Web Vitals

单击 DevSuite Pro 坞站中的 Core Web Vitals 图标。使用页面已记录的任何内容立即显示公制图块。

2

重新装入干净的 LCP

LCP 仅在页面加载开始时才有意义,因此当您想要可靠的读数时,请在面板打开的情况下重新加载。

3

正常使用页面

滚动整个页面以练习 CLS,然后单击、点击并键入以生成 INP 测量结果。瓷砖会随着您的移动而更新。

4

找到罪魁祸首

按 LCP 元素、布局移动源或缓慢交互旁边的“显示”。页面滚动到它并概述它,因此对于哪个元素负责没有任何歧义。

5

复制报告

单击复制报告以获取每个指标、评级和选择器的纯文本摘要。按“重置”以从头开始重新启动 CLS 和 INP。

准备好开始了吗?

免费安装 DevSuite Pro,为您的浏览器解锁 71+ 个开发者工具。

添加到 Chrome 添加到 Edge 添加到 Firefox