谷歌最近推出的chrome-devtools-mcp服务结合cursor、Codex、Claude Code对一些简单网站性能优化，几乎可以实现性能分析到自动优化一条龙服务。

一、安装 chrome-devtools-mcp

这里演示 Cursor 的安装方式:

方法一：自动安装

Chrome DevTools MCP 提供了 Cursor 的自动安装按钮，点击即可完成
https://github.com/ChromeDevTools/chrome-devtools-mcp
lel5kGANPqnxJNyAOUXUxYTEJWC76O1x.webp

方法二：手动配置 MCP 服务

配置路径：
Cursor 左上角菜单 File -> Cursor Settings -> MCP -> New MCP Server

操作步骤：
点击 Cursor 左上角菜单 File，出现如下界面：Et8NviwK3U2n5sPmouuz5QwTeqra3LHb.webp
点击 Cursor Settings，在左侧菜单栏找到 MC，然后点击 New MCP Server：
nPavm75y8QERjrXed3PcxB5UgtRKxSfv.webp
在弹出的 MCP 配置界面中，按如下填写（args参数默认不配置，如果有需要可以根据官方github中说明配置）：

{
    "chrome-devtools": {
      "command": "npx chrome-devtools-mcp@latest",
      "env": {},
      "args": []
    }
}

XgLC8I2FqQhVAlom2xCAu90YYkYWvTXA.webp

二、调用 MCP 服务进行性能分析

用cursor打开项目，然后打开 Cursor 的 Chat 对话框（快捷键 Ctrl + L）。 在对话框底部：
模式选择 Agent
模型选择 Auto（其它模型也可）

输入如下指令：

帮我用Chrome DevTools分析 https://developers.chrome.com 的性能

ik0RDHtpq29etRTNIVCBE939RhPZiTEF.webp
等待分析完成后，在对话框中引入 package.json、next.config.ts 文件（文件引入不是必须的），修改对话框底部模型选项，模型选择gtp-5-high，然后在对话框中输入：

根据以上性能分析报告对项目进行性能优化

pwhuqTFjxIwoELgLXOMZLF0nZEHNzQjY.webp