你的 AI Agent 刚刚获得了 Core Web Vitals 超能力
将 Claude Code 连接到你的 CoreDash field data。它在数百万次页面加载中找出你最严重的瓶颈，在 Chrome 中追踪根本原因，并编写修复代码。Agent 驱动的 web 性能优化不是一份报告，而是需要修改的具体代码行。
2 分钟完成安装 开始免费试用 CoreDash »Trusted by market leaders · Client results
AI 性能工具存在数据问题
大多数 AI Agent 都针对 Lighthouse 优化。这只是模拟设备上的合成得分，Google 并不用它来排名。真正有用的 web 性能 AI Agent 会从 Google 使用的同源数据开始：真实用户。他们使用廉价手机，网络时断时续，身处你的开发机从未涉足的大洲。
Lighthouse 不是你的排名信号
Google 使用来自真实 Chrome 用户过去 28 天的 CrUX field data 进行排名。Lighthouse 满分但 field data 不及格的情况比比皆是。在实际环境中，52% 的移动端网站至少有一项 Core Web Vitals 未达标。
盲目的 Agent 做出盲目的修复
没有真实用户数据，AI Agent 不知道哪个页面慢，哪个元素是瓶颈，也不知道它的修复是否有效。它仅仅优化了一个模拟环境就草草收工。你的真实用户可不买账。
手动排查耗费数小时
细分数据。提出假设。运行追踪。确认问题。编写修复代码。一位资深性能工程师处理一个问题需要 2 到 4 小时。再乘以你网站上每一个缓慢的页面。
INP 根本无法在实验室中模拟 Interaction to Next Paint 测量真实用户如何与你的页面交互。没有任何合成工具能够复制真实用户行为：他们点击哪里，滚动多快，拿着什么设备。Lighthouse 甚至不报告 INP。如果你的 AI Agent 运行 Lighthouse，它对你最严重的交互问题一无所知。field data 是唯一的数据源。
两大事实来源：field data 结合浏览器证据
CWV Superpowers 将 CoreDash 的真实用户数据与针对性的 Chrome trace 结合起来。field data 告诉它哪里慢。Chrome 告诉它为什么慢。
CoreDash 告诉 Agent 哪里慢
CoreDash 追踪每个真实用户的每次页面加载。每个指标都归因于导致问题的确切元素。没有采样，没有上限。
当 CoreDash 报告 LCP 为 4.2 秒，且 div.hero > img.main 上的 Load Delay 消耗了 52% 的总时间时，Agent 确切知道该去哪里找问题。这不是猜测。这是来自数百万次真实会话的测量数据。
该技能查询 25 个以上的 CoreDash 维度：LCP 元素、元素类型、优先级状态、阶段明细、INP 交互目标、LOAF 脚本、CLS 偏移元素、设备类型、访问者类型、网络速度、7 天趋势。
Chrome 告诉 Agent 为什么慢
CWV Superpowers 使用移动端模拟访问页面：Fast 3G 网络，4 倍 CPU 节流。它仅追踪 CoreDash 识别出的瓶颈阶段。
Load Delay 是瓶颈？Agent 会检查网络瀑布图寻找发现时机的间隙。Render Delay 是瓶颈？它会寻找 render blocking 脚本和字体加载延迟。
结果：胶片截图、网络瀑布图，以及能够解释 field data 所暴露根本原因的针对性证据。
比例推理，而非绝对阈值
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、加载时间、Render Delay。INP：Input Delay、Processing、Presentation。按百分比指出瓶颈。
3. Chrome Trace
使用移动端模拟访问页面。仅追踪第 2 步找出的瓶颈阶段。捕获网络瀑布图、胶片截图和阻塞资源的证据。
4. 根本原因
将两种证据来源组合成一个结论：元素、原因、CoreDash 指标，以及 Chrome 证实的内容。没有任何模棱两可。
5. 修复或报告
由你选择。应用代码修复，包括文件、行号、元素、修改前后的对比。生成包含图表和证据且完全独立的 HTML 报告。或者两者兼具。
25+ 维度：你的 field data 涵盖的每个角度
这些是 Agent 查询的实际 CoreDash 维度。这不是摘要。这是全貌。
LCP (Largest Contentful Paint)
LCP 元素 元素类型 优先级状态 TTFB 阶段 Load Delay 加载时间 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、加载时间、Render Delay。识别出哪个阶段消耗了最大比例的总时间。
元素归因：确切的 LCP 元素、它的类型（图片、文本、背景图片、视频），以及优先级状态（fetchpriority、lazy loading）。
典型修复：添加 preload 提示，移除 hero 元素的 lazy loading，优化图片格式，修复 render blocking 脚本。
用 AI 修复 INP：Interaction to Next Paint 诊断
3 个阶段明细：Input Delay、Processing、Presentation。这是你唯一无法在实验室模拟的指标。field data 是唯一的数据源。
脚本归因：Long Animation Frames (LOAF) 会指明确切的 JavaScript 文件和持续时间。外加发生交互时的页面加载状态。
典型修复：yield 给 main thread，延迟执行，拆分事件处理程序，对大型 DOM 使用 content-visibility。
CLS：Cumulative Layout Shift
5 种原因模式：没有尺寸的图片，字体切换，动态注入的内容，延迟加载的资源，布局属性上的 CSS 动画。
跨维度：对比 mobile 与 desktop、新访问者与回访者、快网络与慢网络，以缩小原因范围。
典型修复：添加 width/height，font-display: optional，保留 min-height，使用 transform 代替 top/left。
根本原因陈述长什么样
不是“考虑优化你的图片”。这就是实际的输出。具体到足以直接审查和合并。
根本原因：
/product/running-shoes-42 上的 LCP 图片 div.hero-banner > img.product-main 被发现晚了 1,980ms，因为它缺少 preload 提示且没有 fetchpriority="high"。
CoreDash 证据：
mobile 端 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 天 field data） | 单次实验室会话 | 模拟的单次加载 |
| INP 测量 | ✓ 真实交互 | ✗ 没有真实用户 | ✗ 未测量 |
| 阶段明细 | ✓ LCP、INP、CLS 阶段 | ~ 手动分析 | ✗ 仅有分数 |
| 元素归因 | ✓ 确切元素 + 优先级 | ~ 如果你知道去哪找 | ~ 通用建议 |
| 比例推理 | ✓ 按百分比计算瓶颈 | ✗ 绝对值 | ✗ 绝对值 |
| 细分对比 | ✓ 设备、国家、浏览器 | ✗ 单一配置 | ✗ 单一配置 |
| 趋势检测 | ✓ 7 天增量 | ✗ 时间点 | ✗ 时间点 |
| Chrome tracing | ✓ 按阶段定向 | ✓ 完全访问 | ✗ 无浏览器 |
| 代码修复 | ✓ 文件 + 行号 + diff | ~ 依赖 Agent | ~ 通用建议 |
注意：Chrome DevTools MCP 是互补的。在 field data 找出瓶颈后，CWV Superpowers 会使用它进行针对性追踪。它们结合使用效果最佳。
报告：发送到 Slack，附加到 Jira
独立的 HTML。无依赖项。无构建步骤。一切都在内联的单个文件中。
完整报告（含 Chrome）
带有颜色编码的指标卡片，阶段明细图表，关键时刻（first paint、LCP、加载完成）的胶片截图，网络瀑布图 SVG，根本原因分析，以及包含修改前后代码的推荐修复方案。
仅 RUM 报告
同样的指标卡片和阶段明细，外加元素归因和根本原因分析。没有胶片截图或瀑布图，但诊断质量完全一样，因为 field data 才是事实来源。
支持所有 MCP 客户端
Claude Code：具备自动化工作流的完整技能。包括发现、诊断、Chrome tracing、代码修复和报告。强烈推荐。
Cursor：通过插件安装 CoreDash MCP。在你的编辑器内提供完整的诊断和代码修复。
VS Code, Windsurf, Gemini CLI：任何支持 HTTP MCP 服务器的客户端都可以连接到 CoreDash。提供相同的 field data 和归因。
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."
CTO, DPG Media
"He found bottlenecks in our component library that we'd missed for two years. Performance gains were visible within days."
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."
VP Engineering, Loop
"Mobile load time down 800ms. 7% lift in checkout conversion. The ROI justified the investment immediately."
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.
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."
Head of Engineering, Swift
"Layout shift on checkout eliminated entirely. Went from 0.4 to 0.02 CLS across mobile and desktop."
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."
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."
2 分钟完成运行
终端里的自动化 Core Web Vitals 诊断。你需要一个有数据流入的 CoreDash 账户。免费层就足够了。
Claude Code
claude mcp add --transport http coredash https://app.coredash.app/api/mcp
/plugin marketplace add corewebvitals/cwv-superpowers
/plugin install cwv-superpowers@cwv-superpowers
claude --chrome
找出我最严重的 CWV 问题并修复它。 首次连接时，运行 /mcp，选择 coredash，然后选择 Authenticate。你的浏览器会打开 CoreDash 登录页，选择一个项目并授权，Claude Code 就会存储一个短期 OAuth token，它会自动刷新（1 小时访问，30 天刷新）且随时可撤销。无需粘贴 key。
倾向于在无头环境或 CI 中使用 API key？可以在命令中添加 --header "Authorization: Bearer cdk_YOUR_API_KEY"，你可以在 CoreDash → Project Settings → API Keys (MCP) 中生成。仅显示一次。以 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 Agent 模式）、Windsurf、Gemini CLI、Claude Desktop 以及任何 HTTP MCP 客户端。一个 MCP web 性能端点，接入所有 Agent。
常见问题
使用 CWV Superpowers 需要运行 Chrome 吗？
不需要。Chrome tracing 是可选的。没有它，你依然可以基于 CoreDash 数据获得完整的 field data 诊断、阶段明细、元素归因以及代码修复建议。Chrome 提供了胶片截图、网络瀑布图以及对根本原因的视觉确认。两种模式都会生成报告。
这跟在我的 AI Agent 里跑 Lighthouse 有什么区别？
Lighthouse 在你的机器上运行单次合成加载。CWV Superpowers 使用 CoreDash 提供的一连 28 天真实用户数据：真实的设备、真实的网络、真实的交互。它从真实用户点击中测量 INP（Lighthouse 做不到）。它会对比各种细分维度（mobile 与 desktop、印度与美国）。而且它使用比例推理来找到瓶颈阶段，绝不仅仅是看绝对分数。
支持哪些 AI 编程 Agent？
任何支持 MCP (Model Context Protocol) 服务器的性能优化 AI 编程 Agent 都能用。Claude Code 有一个专用的技能，包含自动化的 5 步工作流。Cursor、VS Code（Copilot Agent 模式）、Windsurf、Gemini CLI 和 Claude Desktop 则通过 CoreDash HTTP MCP 端点连接。所有客户端获取到的 field data 和归因结果都是完全一样的。
CoreDash 免费吗？
CoreDash 提供可与 CWV Superpowers 配合使用的免费层。你的网站必须要有数据流入（添加 CoreDash script 标签）。免费层没有采样限制，也没有页面浏览量上限。MCP 访问所需的 API key 在所有套餐中都可用。
我能将它用于客户网站吗？
可以。对于每个 CoreDash 项目，你可以创建无数量限制的 专用 MVP API Key 。在每个客户网站上添加 CoreDash，生成只读的 API key 并配置你的 MCP 客户端。Agent 只会看到该项目的数据。CWV Superpowers 采用 MIT 许可证，所以它对商业使用没有任何限制。
开源。没有锁定。
你可以检查和扩展的 Core Web Vitals 自动化工具。编排器、诊断模块、Chrome tracing 逻辑和报告模板全都在 GitHub 上。去看看它是怎么工作的。Fork 它。扩展它。贡献代码。
开始你的免费试用 在 GitHub 上查看