
实时测量、可视化和调试 Core Web Vitals。 CrUX 历史、LCP/CLS/INP 故障和性能实验
核心网络生命可视化工具
在任意页面上打开弹出窗口。立即查看您的 LCP、CLS、INP、FCP 和 TTFB 分数(以颜色编码)。没有单独的工具。不得将 URL 复制粘贴到 PageSpeed Insights 中。
它显示了什么
实时分数由 web-vitals 库提供支持,Chrome 内部使用的也是这个库。绿色意味着好。橙色意味着有工作要做。红色意味着它正在伤害你。
LCP - 绿色叠加标记页面上的 LCP 元素。完整的时序细分:TTFB、资源加载延迟、资源加载持续时间、元素渲染延迟。对于图像:预加载状态、获取优先级、第一方与第三方来源、自然尺寸与渲染尺寸、估计预加载节省。
CLS - 粉红色覆盖标记每个布局移位源。单击任意班次即可查看重播之前/之后的动画。归因显示最大的转变目标和分数。
INP - 分为输入延迟、处理持续时间和呈现延迟。显示交互类型、目标元素和交互时的页面加载状态。
FCP 和 TTFB - -FCP 分为“第一个字节时间”和“第一个字节到 FCP”。 TTFB 分为缓存、DNS、连接、请求和等待。
CrUX 历史
任何网站或网址的 25 周 Chrome 用户体验报告数据。在 P75 分数和良好/需要改进/较差分布之间切换。在移动设备和桌面设备之间切换。趋势线显示每个指标是否朝着正确的方向发展。
渲染阻塞资源
每个渲染阻塞样式表和脚本都列出了单个文件计时和总阻塞持续时间。
性能实验
在不接触代码的情况下测试修复。禁用 JS、推迟所有 JS 或阻止第三方 JS。延迟加载图像、取消背景图像的优先级、禁用 Web 字体或第三方 CSS。在清除缓存的情况下运行任何实验,以测量真正的冷负载影响。
网络节流
通过 CPU 节流模拟慢速 3G。清除缓存并重新加载以测量冷性能。
为开发者打造
最小权限。没有数据收集。一切都在本地运行。所有生命体征都记录到控制台以进行调试。
一键链接到当前页面的 CrUX 仪表板、PageSpeed Insights 和 W3C HTML 验证器。
变化:
1.19 新信号扫描和小修复
1.18 固定INP归因逻辑
1.17 重新设计实验和新的审核选项卡,修复了一些 UI 逻辑
1.16 添加了内容审核、重构实验和较小的布局改进
1.15 小修复
1.14 添加了 Treo.sh 链接,删除了废弃的 Looker Studio 报告,添加了关键的 lcp 子部分、rtt。导航类型和 lcp 类型
1.13 添加了 CrUX Vis 链接,更好地应对丢失的 CrUX 数据和小的大修复。
1.12 更好的消息传递+改进的元素计时,更好的控制台日志记录
1.11 删除了 FID,Web Vitals 现在基于即将推出的 Web Vitals 库 v4、新的细分详细信息、改进的 CSS 可视化、小错误修复、代码清理。
1.10 将 INP 提升为核心 Web Vitals,并将 FID 降级为感兴趣的指标!
1.9 CrUX 历史记录 API,小修复,更多 CLS 信息
1.8 更好的指标更新、更好的日志记录、微小的改进
1.7 将 INP 期间发生的并可能干扰 INP 的事件、长任务和长动画帧记录到控制台。
1.6 更好的 INP 分解,较小的代码改进。
1.5 代码改进、布局改进、添加页面实验(延迟 javascript、禁用 javascript、禁用第三方脚本、延迟加载图像、延迟背景图像和禁用 webfonts)。
1.4 左侧菜单,有关渲染阻塞资源的更多信息以及 PSI、CrUX 仪表板和 W3C 的直接链接。
1.2 添加了大量 LCP 信息,如预加载、获取优先级、渲染故障、第一方或第三方等。