使用 Hermes Agent 安装 Google PageSpeed 优化网站#

网站速度和 Core Web Vitals 会影响用户体验，也会影响搜索引擎对页面质量的判断。现在可以让 Hermes Agent 接入 PageSpeed MCP Server，直接帮你测试网站、分析问题，并根据报告协助优化。

本文以自己的站点为例，介绍如何配置 Google PageSpeed Insights API，并让 Hermes Agent 调用 PageSpeed 工具完成网站性能优化。

项目地址：https://github.com/PhialsBasement/Pagespeed-MCP-Server

PhialsBasement

Pagespeed-MCP-Server

Waiting for api.github.com...

00K

Waiting...

PageSpeed MCP Server 是什么#

PageSpeed MCP Server 是一个 MCP 服务，它把 Google PageSpeed Insights 的测试能力提供给 AI 助手使用。配置完成后，可以让 Hermes Agent：

测试网站的移动端和桌面端性能
查看 Performance、Accessibility、Best Practices 和 SEO 分数
分析 LCP、CLS、INP 等 Core Web Vitals
找出图片过大、阻塞渲染、缓存配置等问题
根据报告给出优化方案
协助修改网站后重新验证

获取 Google PageSpeed API 密钥#

1. 进入 Google Cloud Console#

打开 Google Cloud Console，登录 Google 账号。

2. 创建或选择项目#

点击页面顶部的项目下拉菜单，创建新项目，或者选择已有项目。

3. 启用 PageSpeed Insights API#

进入 API 库，搜索 PageSpeed Insights API，打开对应服务后点击“启用”。

4. 创建 API 密钥#

在左侧菜单进入“凭据”（Credentials），点击“+ 创建凭据”，选择“API 密钥”。

5. 复制并保存密钥#

Google Cloud 会生成一串 API 密钥。请立即复制并妥善保存，不要把密钥写进公开文章、GitHub 仓库或前端代码中。生产环境建议限制密钥的 API 使用范围，并定期轮换。

安装 PageSpeed MCP Server#

先确认机器上已经安装 Git、Node.js 和 npm：

1
git --version
2
node --version
3
npm --version

然后克隆项目：

1
git clone https://github.com/PhialsBasement/Pagespeed-MCP-Server.git
2
cd Pagespeed-MCP-Server
3
npm install

根据项目 README 的说明完成构建或启动。不同版本的启动命令可能会变化，建议以仓库当前 README 为准。

配置 Hermes Agent#

把 PageSpeed MCP Server 加入 Hermes Agent 的 MCP 配置，并将 API 密钥放进环境变量：

1
export PAGESPEED_API_KEY="你的 Google PageSpeed API 密钥"

建议通过环境变量、密钥文件或系统服务配置注入，不要把真实密钥直接提交到配置仓库。

配置完成后重启 Hermes Agent，并检查工具：

1
hermes tools
2
hermes doctor

如果能看到 PageSpeed 相关 MCP 工具，说明服务发现和配置基本正常。

让 Hermes Agent 测试网站#

可以直接发送：

1
请使用 PageSpeed 测试 https://laohou.net，分别检查移动端和桌面端，列出 Performance、Accessibility、Best Practices、SEO 分数，并优先分析影响 LCP 和移动端体验的问题。

也可以测试具体页面：

1
请测试 https://laohou.net/blog/hermes-studio-install/，给出可以直接修改的优化项，并说明修改后如何验证。

建议同时检查首页、文章页、关于页和移动端页面，避免只优化一个页面却破坏其他页面的排版或交互。

这次网站优化的实际效果#

以 laohou.net 的优化过程为例，PageSpeed 和浏览器验证帮助定位并处理了几类问题：

优化图片加载，避免使用明显大于实际显示尺寸的资源
保留 Astro Image 的响应式处理和图片质量配置
调整 CSS 加载范围，减少不必要的全局阻塞资源
保留文章页 Markdown 排版、代码块样式和 Fancybox 图片预览
修复 Fancybox 通过 data: 模块动态加载导致的 CSP 报错，改为由 Vite 正常打包
重新构建并部署网站后，用真实浏览器检查文章页
最终浏览器控制台无 JavaScript 错误，相关 CSS 请求返回正常

优化不能只看分数，还要确认文章内容、导航、图片预览和移动端布局没有被破坏。

常见问题#

API 请求被拒绝#

检查 PageSpeed Insights API 是否已启用、API 密钥是否正确，以及项目配额是否用完。

Hermes 看不到 PageSpeed 工具#

检查 MCP Server 是否成功启动、Node.js 依赖是否安装完成，并运行：

1
hermes doctor
2
hermes tools

修改配置后记得重启 Hermes Agent。

测试结果不稳定#

PageSpeed 会受到测试节点、网络、缓存和服务器负载影响。不要只看一次测试，建议在相近条件下重复测试并观察趋势。

结语#

通过 PageSpeed MCP Server，Hermes Agent 可以把“测试网站—分析报告—修改源码—重新验证”串成一个工作流。准备好 Google PageSpeed Insights API 密钥后，根据项目 README 完成 MCP Server 配置即可。