免费且开源

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

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

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

Trusted by market leaders · Client results

my work featured on web.devloopearplugssnvebaynestlewhowhatwearkpncompareworkivafotocasavpnsaturnerasmusmcharvardaleteiamarktplaatsadevintanina carehappyhorizonmonarchdpg mediaperion

AI 性能工具存在数据问题

大多数 AI 代理针对 Lighthouse 进行优化。这是在一个模拟设备上的综合得分，Google 并不会将其用于排名。一个真正有用的 web performance 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 报告在 div.hero > img.main 上发生 4.2 秒的 LCP，且 Load Delay 占总时间的 52% 时，代理确切地知道去哪里查看。这不是猜测。这是来自数百万次真实会话的测量结果。

该技能查询 25+ 个 CoreDash 维度：LCP 元素、元素类型、优先级状态、阶段明细、INP 交互目标、LOAF 脚本、CLS 偏移元素、设备类型、访问者类型、网络速度、7 天趋势。

Chrome 告诉代理为什么慢

CWV Superpowers 使用移动端模拟访问页面：快速 3G、4 倍 CPU 节流。它只追踪 CoreDash 识别出的瓶颈阶段。

Load Delay 是瓶颈？代理会检查网络瀑布流中的发现间隙。Render Delay？它会查找阻塞脚本和字体加载延迟。

结果：胶片幻灯片截图、网络瀑布流以及解释您字段数据所暴露的根本原因的针对性证据。

比例推理，而非绝对阈值

Lighthouse 告诉您 "Render Delay 是 350 毫秒"。这是个问题吗？不知道。CWV Superpowers 将消耗最大时间百分比的阶段识别为瓶颈。

INP 是 350 毫秒。Input Delay 70 毫秒 (20%)，Processing 80 毫秒 (23%)，Presentation 200 毫秒 (57%)。Presentation 是瓶颈，即使孤立地看 200 毫秒似乎没什么问题。修复它才能取得实质性进展。而优化 Input Delay 几乎毫无效果。

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

五个步骤：从"某些地方很慢"到代码修复

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

1. 发现 (Discovery)

扫描您的 CoreDash 数据，寻找最糟糕的页面和指标。优先处理评级差、移动端、高流量的页面，以及掩盖了大量差评长尾的 p75 分数。

2. 诊断 (Diagnosis)

将指标分解为多个阶段。LCP：TTFB、Load Delay、Load Time、Render Delay。INP：Input Delay、Processing、Presentation。按百分比命名瓶颈。

3. Chrome 追踪 (Chrome Trace)

使用移动端模拟访问页面。仅追踪步骤 2 中的瓶颈阶段。捕获网络瀑布流、胶片幻灯片以及阻塞资源证据。

4. 根本原因 (Root Cause)

将这两种证据来源合并为一条声明：元素、原因、CoreDash 指标以及 Chrome 确认的内容。毫不含糊。

5. 修复或报告 (Fix or Report)

由您选择。应用带有文件、行号、元素、修改前/后对比的代码修复。或者生成一个包含图表和证据的独立 HTML 报告。或两者兼而有之。

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)

偏移元素 偏移原因 偏移时间

细分 (Segments)

设备类型 国家/地区 浏览器 操作系统 连接情况 访问者类型 页面路径

趋势 (Trends)

7 天变化量 28 天基线 回归检测

诊断：针对每个 Core Web Vitals 的阶段级明细

不仅是分数。使用来自 CoreDash 的真实用户归因，将每个指标分解为各个阶段。

使用 AI 修复 LCP：Largest Contentful Paint 诊断

4 个阶段明细： TTFB、Load Delay、Load Time、Render Delay。识别哪个阶段消耗了总时间的最大份额。

元素归因： 确切的 LCP 元素、其类型（图像、文本、背景图像、视频）以及优先级状态（fetchpriority、延迟加载）。

典型修复： 添加 preload 提示、从 hero 中移除延迟加载、优化图像格式、修复阻塞渲染的脚本。

使用 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、最小高度保留、使用 transform 而不是 top/left。

真实案例

根本原因声明长什么样

不是“考虑优化您的图像”。这是实际的输出结果。具体到足以进行审查和合并。

根本原因 (Root cause)：

/product/running-shoes-42 上的 LCP 图像 div.hero-banner > img.product-main 被延迟了 1,980 毫秒才被发现，因为它缺少 preload 提示并且没有 fetchpriority="high"。

CoreDash 证据：

移动端上的 LCP 为 3,820 毫秒（差），p75。Load Delay 是瓶颈，为 1,980 毫秒（占总时间的 52%）。优先级状态：3（未预加载）。趋势：在 7 天内恶化了 +340 毫秒。

Chrome 证据：

网络瀑布流显示 HTML 第一个字节与图像请求之间存在 1,940 毫秒的间隙。图像仅在 CSS 中被引用，对 preload 扫描器不可见。

修复方案：

将 <link rel="preload" href="/images/hero.jpg" as="image" fetchpriority="high"> 添加到 templates/product.html 第 12 行。在第 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,940 毫秒的发现间隙（Chrome 瀑布流）。

修复方案： 2 行代码的修改，包含修改前/后对比差异。

比较：CWV Superpowers 如何脱颖而出

不同的工具解决不同的问题。以下是每种工具实际发挥的作用。

能力 (Capability) 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 报告 (RUM-Only Report)

相同的指标卡片和阶段明细，外加元素归因和根本原因分析。没有胶片幻灯片或瀑布流，但诊断质量是完全相同的，因为字段数据是事实来源。

与任何 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."

Loop

VP Engineering, Loop

★★★★★

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

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

Alza

Lead Developer, Alza

★★★★★

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

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.

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

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

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

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

# 1. Add CoreDash MCP server
claude mcp add --transport http coredash \
  https://app.coredash.app/api/mcp \
  --header "Authorization: Bearer cdk_YOUR_API_KEY"

# 2. Install CWV Superpowers
/plugin marketplace add corewebvitals/cwv-superpowers
/plugin install cwv-superpowers@cwv-superpower

# 3. Start with Chrome (optional, recommended)
claude --chrome

# 4. Go
Find my biggest CWV issue and fix it.

从 CoreDash → Project Settings → API Keys (MCP) 获取您的 API 密钥。只显示一次。作为 SHA-256 哈希存储。只读。

Cursor

# Install the plugin
/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 performance 端点，适用于所有代理。

常见问题 (FAQ)

我需要运行 Chrome 才能使用 CWV Superpowers 吗？

不需要。Chrome 追踪是可选的。如果没有它，您将获得完整的字段数据诊断、阶段明细、元素归因以及仅基于 CoreDash 数据的代码修复建议。Chrome 增加了胶片幻灯片截图、网络瀑布流以及对根本原因的视觉确认。这两种模式都会生成报告。

这与在我的 AI 代理中运行 Lighthouse 有何不同？

Lighthouse 在您的机器上运行单次综合加载。CWV Superpowers 使用来自 CoreDash 的 28 天真实用户数据：真实的设备、真实的网络、真实的交互。它根据真实用户的点击来测量 INP（这是 Lighthouse 无法做到的）。它会比较不同细分群体（移动端与桌面端，印度与美国）。而且它使用比例推理来寻找瓶颈阶段，而不仅仅是查看绝对分数。

支持哪些 AI 编码代理？

任何支持 MCP (Model Context Protocol) 服务器的 web performance AI 编码代理。Claude Code 拥有一个包含自动化 5 步工作流的专用技能。Cursor、VS Code (Copilot agent 模式)、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 上查看