你的 AI 代理刚刚获得了 Core Web Vitals 超能力
将 Claude Code 连接到你的 CoreDash 现场数据。它能在数百万次页面加载中找出你最严重的瓶颈，在 Chrome 中追踪根本原因，并编写修复代码。代理式 web 性能——不是一份报告，而是实际需要修改的代码行。
2 分钟内安装 开始免费 CoreDash 试用 »Trusted by market leaders · Client results
AI 性能工具存在数据问题
大多数 AI 代理针对 Lighthouse 进行优化。这是在模拟设备上的综合得分，Google 并不将其用于排名。一个有用的 web 性能 AI 代理应从与 Google 相同的数据开始：使用廉价手机、网络连接不稳定、身处你的开发机器从未见过的各大洲的真实用户。
Lighthouse 不是你的排名信号
Google 的排名基于真实 Chrome 用户过去 28 天的 CrUX 现场数据。完美的 Lighthouse 得分和不及格的现场得分总是同时发生。52% 的移动网站在现场数据中至少有一项 Core Web Vitals 不及格。
盲目的代理进行盲目的修复
没有真实用户数据，AI 代理就不知道哪个页面慢，哪个元素是瓶颈，或者它的修复是否有帮助。它只优化模拟结果就完事了。而你的实际用户并不买账。
手动排查需要耗费数小时
对数据进行分段。提出假设。运行追踪。确认。起草修复方案。一位高级性能工程师在每个问题上花费 2 到 4 个小时。再乘以你网站上每个缓慢的页面。
INP 完全无法在实验室中模拟 Interaction to Next Paint 衡量真实用户如何与你的页面交互。没有综合工具可以复制真实用户的行为：他们点击哪里，滚动多快，持有何种设备。Lighthouse 甚至不报告 INP。如果你的 AI 代理运行 Lighthouse，它对你最严重的交互问题将视而不见。现场数据是唯一的数据源。
两大事实来源：现场数据与浏览器证据相遇
CWV Superpowers 将 CoreDash 真实用户数据与针对性的 Chrome 追踪结合起来。现场数据告诉它什么变慢了。Chrome 告诉它为什么。
CoreDash 告诉代理什么变慢了
CoreDash 追踪每一位真实用户的每一次页面加载。每一个指标都归因于导致问题的确切元素。没有采样，没有上限。
当 CoreDash 报告 LCP 为 4.2 秒，且 div.hero > img.main 的 Load Delay 消耗了总时间的 52% 时，代理就会确切知道去哪里查看。这不是猜测。这是来自数百万次真实会话的测量结果。
该技能查询超过 25 个 CoreDash 维度：LCP 元素、元素类型、优先级状态、阶段细分、INP 交互目标、LOAF 脚本、CLS 偏移元素、设备类型、访问者类型、网络速度、7 天趋势。
Chrome 告诉代理为什么会变慢
CWV Superpowers 带着移动端模拟访问页面：Fast 3G，4x CPU 节流。它仅追踪 CoreDash 识别出的瓶颈阶段。
Load Delay 是瓶颈吗？代理会检查网络瀑布图中的发现延迟。如果是 Render Delay 呢？它会寻找阻塞脚本和字体加载延迟。
结果就是：幻灯片截图、网络瀑布图以及能够解释你的现场数据暴露出的根本原因的针对性证据。
基于比例的推理，而非绝对阈值
Lighthouse 告诉你 "Render Delay 是 350ms"。这就是问题所在吗？不知道。CWV Superpowers 将消耗总时间最大百分比的阶段识别为瓶颈。
INP 为 350ms。Input Delay 为 70ms（20%），Processing 为 80ms（23%），Presentation 为 200ms（57%）。Presentation 才是瓶颈，即使单独看 200ms 似乎没问题。修复它才能取得显著成效。优化 Input Delay 几乎毫无作用。
这防止了性能优化工作中最常见的错误：修复了错误的东西。
五个步骤：从“有点慢”到代码修复
向它提问。五个步骤之后，你就得到了有真实用户证据支持的修复方案。
1. 发现
扫描你的 CoreDash 数据以找出表现最差的页面和指标。优先处理评分差、移动端、高流量的页面，以及掩盖了长尾糟糕表现的 p75 分数。
2. 诊断
将指标拆解为不同阶段。LCP：TTFB、Load Delay、Load Time、Render Delay。INP：Input Delay、Processing、Presentation。通过百分比来指明瓶颈。
3. Chrome 追踪
使用移动端模拟访问页面。仅追踪第 2 步中发现的瓶颈阶段。捕获网络瀑布图、幻灯片截图和阻塞资源证据。
4. 根本原因
将两种证据来源组合成一句话：元素、原因、CoreDash 指标以及 Chrome 确认的内容。绝不含糊其辞。
5. 修复或报告
由你选择。应用包含文件、行号、元素、修改前后的代码修复方案。生成包含图表和证据的独立 HTML 报告。或者两者兼顾。
25+ 个维度：现场数据涵盖的每一个角度
这些是代理查询的实际 CoreDash 维度。这不是摘要。这是完整的画面。
LCP (Largest Contentful Paint)
LCP 元素 元素类型 优先级状态 TTFB 阶段 Load Delay Load Time Render DelayINP (Interaction to Next Paint)
INP 目标 Input Delay Processing Presentation LOAF 脚本 加载状态CLS (Cumulative Layout Shift)
发生偏移的元素 偏移原因 偏移发生时间细分
设备类型 国家/地区 浏览器 操作系统 网络连接 访问者类型 页面路径趋势
7 天变化量 28 天基准线 回退检测诊断：每一个 Core Web Vitals 的阶段级拆解
不仅仅是分数。利用来自 CoreDash 的真实用户归因，将每一个指标拆解为不同阶段。
用 AI 修复 LCP：Largest Contentful Paint 诊断
4 个阶段细分： TTFB、Load Delay、Load Time、Render Delay。识别出消耗总时间最大份额的阶段。
元素归因： 确切的 LCP 元素、其类型（图片、文本、背景图片、视频），以及优先级状态（fetchpriority、懒加载）。
典型的修复： 添加预加载提示、移除首屏图像的懒加载、优化图片格式、修复阻塞渲染的脚本。
用 AI 修复 INP：Interaction to Next Paint 诊断
3 个阶段细分： Input Delay、Processing、Presentation。这是你唯一无法在实验室中模拟的指标。现场数据是唯一的数据源。
脚本归因： Long Animation Frames (LOAF) 指定确切的 JavaScript 文件和持续时间。加上交互发生时的页面加载状态。
典型的修复： 交出主线程控制权 (yield)、推迟执行、拆分事件处理程序、针对大型 DOM 使用 content-visibility。
CLS：Cumulative Layout Shift
5 种诱因模式： 未指定尺寸的图片、字体交换、动态注入的内容、延迟加载的资源、作用于布局属性的 CSS 动画。
跨维度分析： 比较移动端与桌面端、新访客与重复访客、快网络与慢网络，以缩小原因范围。
典型的修复： 添加宽度/高度属性、使用 font-display: optional、通过 min-height 预留高度、使用 transform 代替 top/left。
一份根本原因声明应该是什么样子
不是“考虑优化你的图片”。这才是实际的输出结果。足够具体，随时可以接受审查并合并。
根本原因：
位于 /product/running-shoes-42 上的 LCP 图片 div.hero-banner > img.product-main 发现晚了 1,980ms，因为它缺少预加载提示且没有设置 fetchpriority="high"。
CoreDash 证据：
在移动设备上，p75 的 LCP 为 3,820ms（较差）。Load Delay 是瓶颈，耗时 1,980ms（占总时间的 52%）。优先级状态：3（未预加载）。趋势：过去 7 天恶化了 +340ms。
Chrome 证据：
网络瀑布图显示在 HTML 首字节和图像请求之间存在 1,940ms 的延迟。图片仅在 CSS 中被引用，对于预加载扫描器不可见。
修复：
在 templates/product.html 的第 12 行添加 <link rel="preload" href="/images/hero.jpg" as="image" fetchpriority="high">。在第 47 行的 img 元素上设置 fetchpriority="high"。
普通的 AI 建议：
“考虑为你的 LCP 图片添加 fetchpriority，并确保正确预加载关键资源。”
CWV Superpowers：
元素： div.hero-banner > img.product-main
文件： templates/product.html，第 47 行
证据： 52% 的 LCP 时间花费在 Load Delay 上 (CoreDash p75)。1,940ms 的发现延迟 (Chrome 瀑布图)。
修复： 带有修改前后差异对比的 2 行代码变更。
对比：CWV Superpowers 表现如何
不同的工具解决不同的问题。这是它们各自实际能做的事情。
| 能力 | CoreDash + CWV Superpowers | Chrome DevTools MCP | PSI / Lighthouse MCP |
|---|---|---|---|
| 数据源 | 真实用户（28 天现场数据） | 单次实验室会话 | 模拟的单次加载 |
| INP 测量 | ✓ 真实交互 | ✗ 无真实用户 | ✗ 未测量 |
| 阶段拆解 | ✓ LCP、INP、CLS 阶段 | ~ 手动分析 | ✗ 仅有分数 |
| 元素归因 | ✓ 确切元素 + 优先级 | ~ 前提是你知道去哪里找 | ~ 一般性建议 |
| 基于比例的推理 | ✓ 以百分比标明瓶颈 | ✗ 绝对值 | ✗ 绝对值 |
| 细分对比 | ✓ 设备、国家/地区、浏览器 | ✗ 单一配置 | ✗ 单一配置 |
| 趋势检测 | ✓ 7 天变化量 | ✗ 特定时间点 | ✗ 特定时间点 |
| Chrome 追踪 | ✓ 针对特定阶段 | ✓ 完全访问 | ✗ 无浏览器 |
| 代码修复 | ✓ 文件 + 行号 + 差异 | ~ 取决于代理 | ~ 一般性建议 |
注意： Chrome DevTools MCP 是相互补充的。在现场数据识别出瓶颈后，CWV Superpowers 会使用它进行有针对性的追踪。它们一起工作时效果最佳。
报告：直接扔进 Slack 里，或者附加到 Jira 上
自包含的 HTML。没有依赖项。没有构建步骤。一个内联了所有内容的文件。
完整报告（附带 Chrome）
用颜色编码的指标卡片、阶段细分图表、关键时刻（首次绘制、LCP、加载完毕）的幻灯片截图、网络瀑布图 SVG、根本原因分析，以及推荐的包含修改前/后代码的修复方案。
仅 RUM 报告
相同的指标卡片和阶段细分，加上元素归因和根本原因分析。没有幻灯片截图或网络瀑布图，但诊断质量是完全一样的，因为现场数据才是事实来源。
兼容任何 MCP 客户端
Claude Code： 具有自动化工作流的完整技能。发现、诊断、Chrome 追踪、代码修复和报告。推荐使用。
Cursor： 结合 CoreDash MCP 进行插件安装。在你的编辑器内完成完整的诊断和代码修复。
VS Code, Windsurf, Gemini CLI： 任何支持 HTTP MCP 服务器的客户端都可以连接到 CoreDash。相同的现场数据，相同的归因。
Client Success
Don't just take my word for it
Product Lead, Miro
"Our dashboards were choking on main-thread work. 25% reduction in CPU usage. Users noticed immediately."
VP Product, Expedia Group
"We had 80+ third-party scripts and were failing CWV on every major property. Arjen got us passing without touching our ad revenue."
Lead Developer, Alza
"Transferred knowledge to our engineering team. We can now diagnose and resolve performance issues independently."
VP Engineering, People Inc
"Seven brands, seven different stacks. Every single one got faster. No compromises on what makes each property unique."
VP Engineering, Loop
"Mobile load time down 800ms. 7% lift in checkout conversion. The ROI justified the investment immediately."
Head of Digital, Rituals
"We used to break performance every other sprint. He set up budgets in our pipeline. Haven't had a regression since."
CTO, DPG Media
"He found bottlenecks in our component library that we'd missed for two years. Performance gains were visible within days."
Head of Platform, Adevinta
45% reduction in blocking time across 15 marketplaces. INP from 440ms to 64ms on Fotocasa alone. Google wrote up the results on web.dev.
Head of Engineering, Swift
"Layout shift on checkout eliminated entirely. Went from 0.4 to 0.02 CLS across mobile and desktop."
Engineering Manager, Zalando
"Every other audit we've had gave us a list of problems. This one told us exactly what to fix first and why."
2 分钟内运行起来
在你的终端中进行自动化的 Core Web Vitals 诊断。你需要一个有数据流入的 CoreDash 账户。免费套餐就可以工作。
Claude Code
claude mcp add --transport http coredash \
https://app.coredash.app/api/mcp \
--header "Authorization: Bearer cdk_YOUR_API_KEY"
/plugin marketplace add corewebvitals/cwv-superpowers
/plugin install cwv-superpowers@cwv-superpower
claude --chrome
找出我最严重的 CWV 问题并修复它。 从 CoreDash → Project Settings → API Keys (MCP) 获取你的 API 密钥。只显示一次。以 SHA-256 哈希形式存储。只读访问。
Cursor
/plugin-add cwv-superpowers
将 CoreDash 添加到 .cursor/mcp.json：
{
"mcpServers": {
"coredash": {
"url": "https://app.coredash.app/api/mcp",
"headers": {
"Authorization": "Bearer cdk_YOUR_API_KEY"
}
}
}
} 其他 MCP 客户端
服务端点 (Endpoint)：https://app.coredash.app/api/mcp
请求头 (Header)：Authorization: Bearer cdk_YOUR_API_KEY
兼容 VS Code（Copilot 代理模式）、Windsurf、Gemini CLI、Claude Desktop 以及任何 HTTP MCP 客户端。一个 MCP web 性能端点，支持所有代理。
常见问题
我需要运行 Chrome 才能使用 CWV Superpowers 吗？
不需要。Chrome 追踪是可选的。即使没有它，你也可以单独基于 CoreDash 数据获得完整的现场数据诊断、阶段细分、元素归因以及代码修复建议。Chrome 会添加幻灯片截图、网络瀑布图以及对根本原因的视觉确认。这两种模式都可以生成报告。
这与在我的 AI 代理中运行 Lighthouse 有何不同？
Lighthouse 只在你的机器上运行一次单一的综合加载。CWV Superpowers 使用来自 CoreDash 的 28 天真实用户数据：真实的设备、真实的网络、真实的交互。它根据真实用户的点击来测量 INP（这是 Lighthouse 无法做到的）。它会对比各种细分数据（移动端 vs 桌面端，印度 vs 美国）。并且它使用基于比例的推理来找出瓶颈阶段，而不仅仅是看绝对分数。
支持哪些 AI 编码代理？
任何支持 MCP (Model Context Protocol) 服务器的 web 性能 AI 编码代理都可以。Claude Code 拥有具备自动化 5 步工作流的专属技能。Cursor、VS Code（Copilot 代理模式）、Windsurf、Gemini CLI 和 Claude Desktop 可通过 CoreDash HTTP MCP 端点进行连接。所有客户端上的现场数据和归因都是完全相同的。
CoreDash 是免费的吗？
CoreDash 有一个可与 CWV Superpowers 一起使用的免费套餐。你需要让数据从你的网站流入（添加 CoreDash 的 script 标签）。免费套餐没有采样限制，也没有页面浏览量上限。所有套餐都可以获取用于 MCP 访问的 API 密钥。
我可以将它用于客户网站吗？
可以。对于每一个 CoreDash 项目，你可以创建无限个专用的 MVP API 密钥。将 CoreDash 添加到每一个客户网站，生成一个只读 API 密钥并配置你的 MCP 客户端。代理只能看到该项目的数据。CWV Superpowers 采用 MIT 许可证，所以它在商业用途上没有任何限制。
开源。无锁定。
你可以检查和扩展的 Core Web Vitals 自动化工具。编排器、诊断模块、Chrome 追踪逻辑和报告模板都可以在 GitHub 上找到。阅读它的工作原理。复刻它。扩展它。贡献代码。
开始你的免费试用 在 GitHub 上查看