免费 & 开源

你的 AI 代理刚刚获得了 Core Web Vitals 超能力

将 Claude Code 连接到你的 CoreDash 字段数据。它能在数百万次页面加载中找出你最严重的瓶颈，在 Chrome 中追踪根本原因并编写修复代码。代理式 web 性能优化的结果不是一份报告，而是实际需要修改的那行代码。

2 分钟极速安装 开始 CoreDash 免费试用 »
claude --chrome
25+
RUM 维度查询
28 天
的真实用户数据
5 个代理
Claude, Cursor, Windsurf, VS Code, Gemini
0
个使用的 Lighthouse 分数

Trusted by market leaders · Client results

whowhatwearcomparemarktplaatshappyhorizonnestlenina careadevintaloopearplugsharvardmy work featured on web.devdpg mediamonarchsaturnworkivasnvvpnfotocasaperionaleteiakpnerasmusmcebay

AI 性能工具存在数据问题

大多数 AI 代理都在为 Lighthouse 优化。这是在模拟设备上的综合得分，Google 并不会用它来进行排名。一个有用的 web 性能 AI 代理会从 Google 所在的相同数据起步：使用廉价手机的真实用户、不稳定的网络连接，以及你的开发机器从未涉足过的大洲。

Lighthouse 不是你的排名信号

Google 根据过去 28 天内真实 Chrome 用户的 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 通过移动端模拟访问页面：快速 3G，4 倍 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 则几乎没什么效果。

这避免了性能优化工作中最常见的错误：修复了错误的问题。

lcp breakdown img hero loaddelay

五个步骤：从“东西有点慢”到代码修复

向它提一个问题。五个步骤后，你将获得一个由真实用户证据支持的修复方案。

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 报告。你甚至可以两者都要。

network waterfall discover gap

25+ 个维度：你的字段数据所涵盖的每一个角度

这些是代理查询的实际 CoreDash 维度。这不是概述。这是全貌。

LCP (Largest Contentful Paint)

LCP 元素 元素类型 优先级状态 TTFB 阶段 Load Delay Load Time Render Delay

INP (Interaction to Next Paint)

INP 目标 Input Delay Processing Presentation LOAF 脚本 加载状态

CLS (Cumulative Layout Shift)

偏移元素 偏移原因 偏移时机

细分

设备类型 国家/地区 浏览器 OS 网络连接 访客类型 页面路径

趋势

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。这是你唯一无法在实验室中模拟的指标。字段数据是唯一的信息来源。

脚本归因： 长动画帧 (LOAF) 指定确切的 JavaScript 文件和持续时间。加上发生交互时的页面加载状态。

典型修复： yield 给主线程，延迟评估，拆分事件处理程序，对大型 DOM 使用 content-visibility。

CLS: Cumulative Layout Shift

5 种原因模式： 没有尺寸的图片、字体交换、动态注入的内容、延迟加载的资源、布局属性上的 CSS 动画。

跨维度： 比较移动端与桌面端、新访客与老访客、快网络与慢网络，以缩小原因范围。

典型修复： 添加 width/height，font-display: optional，预留 min-height，使用 transform 代替 top/left。

inp and lcp bottlenecks
真实示例

根本原因声明是什么样的

不是“考虑优化你的图片”。这是实际的输出结果。足够具体，可供审查和合并。

根本原因：

/product/running-shoes-42 上的 LCP 图片 div.hero-banner > img.product-main 晚发现了 1,980ms，因为它缺少预加载提示并且没有 fetchpriority="high"。

CoreDash 证据：

移动端 LCP 为 3,820ms（差），p75。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。无依赖项。无构建步骤。所有内容都内联在单个文件中。

cwv suporpowers report crux yield
完整报告（带 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

People Inc

VP Engineering, People Inc

★★★★★

"Seven brands, seven different stacks. Every single one got faster. No compromises on what makes each property unique."

DPG Media

CTO, DPG Media

★★★★★

"He found bottlenecks in our component library that we'd missed for two years. Performance gains were visible within days."

Loop

VP Engineering, Loop

★★★★★

"Mobile load time down 800ms. 7% lift in checkout conversion. The ROI justified the investment immediately."

Miro

Product Lead, Miro

★★★★★

"Our dashboards were choking on main-thread work. 25% reduction in CPU usage. Users noticed immediately."

Expedia Group

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."

Zalando

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."

Adevinta

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.

Rituals

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."

Alza

Lead Developer, Alza

★★★★★

"Transferred knowledge to our engineering team. We can now diagnose and resolve performance issues independently."

Swift

Head of Engineering, Swift

★★★★★

"Layout shift on checkout eliminated entirely. Went from 0.4 to 0.02 CLS across mobile and desktop."

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-superpowers


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 客户端

端点：https://app.coredash.app/api/mcp
请求头：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 做不到的）。它能比较不同细分（移动端对比桌面端，印度对比美国）。并且，它使用比例推理来寻找瓶颈阶段，而不仅仅是查看绝对分数。

支持哪些 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 许可证，因此在商业用途上没有任何限制。

MIT 许可证

开源。无供应商锁定。

你可以检查和扩展的 Core Web Vitals 自动化工具。编排器、诊断模块、Chrome 追踪逻辑以及报告模板都在 GitHub 上。了解它是如何工作的。Fork 它。扩展它。为它做贡献。

开始你的免费试用 在 GitHub 上查看