主题色相 270

壁纸模式

壁纸设置

特效设置

文章布局

使用 AI Agent 安装 Google PageSpeed 优化网站

2026-10-02 · 教程文档

使用 AI Agent 安装 Google PageSpeed 优化网站

2026-10-02 教程文档 暂无评论

网站能打开，不代表访问速度就合格。尤其是移动端，服务器响应、首屏图片、CSS、JavaScript 和页面结构都会影响用户体验。Google PageSpeed Insights 可以给出性能、无障碍、最佳实践和 SEO 评分，AI Agent 则可以继续分析报告、定位文件并协助完成优化。

本文介绍如何安装和使用 PageSpeed，获取 Google API Key，如何让 AI Agent 自动检查网站问题，以及如何根据报告优化网站。文中的实测案例来自 laohou.net。

一、PageSpeed 是什么

PageSpeed Insights 是 Google 提供的网站性能检测工具。它结合 Lighthouse 实验室数据和 Chrome 用户体验报告，可以检测：

  • Performance：页面加载和运行性能
  • Accessibility：无障碍访问能力
  • Best Practices：安全性和浏览器最佳实践
  • SEO：搜索引擎优化基础项

除了网页操作界面，Google 还提供 PageSpeed Insights API，适合脚本、监控程序和 AI Agent 自动调用。

二、安装 PageSpeed 调用环境

PageSpeed 本身不需要安装在网站服务器上。只要准备一台可以访问 Google API 的 Linux 服务器，安装 curl 和 Python，就可以通过 API 检测网站。

sudo apt update
sudo apt install -y curl python3

如果使用 Hermes Agent，可以先安装 Hermes：

curl -fsSL https://raw.githubusercontent.com/NousResearch/hermes-agent/main/scripts/install.sh | bash
hermes doctor

安装完成后，可以让 Hermes 执行网站检查、读取 PageSpeed 报告、连接 SSH 服务器并修改主题或 Nginx 配置。

三、获取 Google PageSpeed API Key

打开 Google Cloud Console 凭据页面。

  1. 创建或选择一个 Google Cloud 项目。
  2. 打开“API 和服务”→“库”。
  3. 搜索并启用 PageSpeed Insights API。
  4. 进入“API 和服务”→“凭据”。
  5. 点击“创建凭据”→“API 密钥”。
  6. 复制生成的 API Key。

建议给 API Key 设置限制。API 限制只允许 PageSpeed Insights API；如果只在固定服务器调用，可以再按服务器 IP 设置应用限制。API Key 不要提交到 Git 仓库，也不要发到聊天窗口。

保存 API Key

可以把 Key 保存到只有当前用户可读的文件：

mkdir -p ~/.hermes/key
printf '%s\n' '你的Google_API_Key' > ~/.hermes/key/PageSpeed
chmod 600 ~/.hermes/key/PageSpeed

也可以使用环境变量：

export PAGESPEED_API_KEY='你的Google_API_Key'

四、使用 curl 测试 PageSpeed

KEY=$(tr -d '\r\n' < ~/.hermes/key/PageSpeed)

curl -sS --get \
  'https://www.googleapis.com/pagespeedonline/v5/runPagespeed' \
  --data-urlencode 'url=https://laohou.net' \
  --data-urlencode 'strategy=mobile' \
  --data-urlencode 'category=performance' \
  --data-urlencode 'category=accessibility' \
  --data-urlencode 'category=best-practices' \
  --data-urlencode 'category=seo' \
  --data-urlencode "key=$KEY"

如果返回 JSON，说明 API Key 和调用环境正常。strategy=mobile 表示移动端测试，也可以改成 desktop。建议先看移动端，因为移动设备的网络和硬件条件更有限。

五、让 AI Agent 获取网站评分和问题

PageSpeed API 负责获取数据，AI Agent 负责阅读数据和执行后续工作。可以把任务交给 Hermes Agent、Claude Code、Codex 或其他支持终端工具的 AI Agent。

例如在 Hermes 中提出以下任务：

使用 Google PageSpeed API 检查 https://laohou.net。
读取 ~/.hermes/key/PageSpeed 中的 API Key，不要输出 Key 内容。
使用 mobile 策略，检查 performance、accessibility、
best-practices 和 seo。
输出各项评分、FCP、LCP、CLS、TBT、Speed Index，
并列出体积最大的图片、脚本、阻塞渲染资源和具体修复建议。

如果 AI Agent 可以访问网站服务器，还可以继续要求它：

根据 PageSpeed 报告检查网站主题文件和 Nginx 配置。
修改前先备份，修复后执行 nginx -t 并 reload。
重新调用 PageSpeed 验证优化效果。

实际使用时，建议让 AI Agent 先检查再修改。不要只根据分数猜问题，也不要为了提高分数直接删除功能。每次修改都应该保留备份，并在修改后重新测试。

六、使用 Pagespeed MCP Server

如果你的 AI Agent 支持 MCP，可以使用这个项目：

https://github.com/PhialsBasement/Pagespeed-MCP-Server

Pagespeed MCP Server 可以把 PageSpeed 检测能力接入支持 MCP 的 AI 客户端。这样 AI Agent 不需要手动拼接 API 请求，就可以调用 PageSpeed 工具获取网站评分和诊断结果。

使用前需要根据项目说明配置 Google PageSpeed API Key。建议把 Key 放在 MCP 服务端的环境变量或受保护的配置文件中，不要写进公开的 MCP 配置仓库。

配置完成后，可以直接对 AI Agent 说：

检查 https://laohou.net 的移动端 PageSpeed 评分，
分析 LCP、首屏图片、阻塞资源和未使用的 JavaScript，
给出可以直接执行的优化方案。

七、根据问题优化网站

1. 优化首屏图片

PageSpeed 经常把大图片列为主要问题。可以把 JPEG 或 PNG 转成 WebP，并限制尺寸：

convert default.jpg \
  -resize '1600x900>' \
  -strip \
  -interlace Plane \
  -quality 78 \
  default.webp

如果图片是首屏最大元素，可以在 HTML 中预加载：

<link rel="preload" as="image" href="/path/to/hero.webp">

2. 延后非关键 JavaScript

不会影响首屏显示的脚本可以使用 defer：

<script defer src="/assets/app.js"></script>

但要确认脚本之间的依赖关系。编辑器脚本、评论脚本和灯箱插件不一定适合直接延后或删除。

3. 设置静态资源缓存

Nginx 可以为图片、CSS 和 JavaScript 设置缓存：

location ~* \.(jpg|jpeg|png|gif|webp|avif|css|js)$ {
    expires 30d;
    add_header Cache-Control "public, max-age=2592000, immutable";
}

修改 Nginx 配置后先检查：

nginx -t
nginx -s reload

4. 修复无障碍问题

PageSpeed 可能会报告颜色对比度不足、标题层级跳跃、表单控件没有 label 等问题。对应的修复方式通常是：

  • 调整文字和背景颜色，让对比度达到 WCAG 要求
  • 按页面结构使用连续的 h1、h2、h3 标题
  • 给 input、select 和 range 控件增加 label 或 aria-label

八、实际优化效果

以 laohou.net 为例，第一次移动端测试结果如下：

指标优化前优化后
Performance7894
Accessibility89100
Best Practices100100
SEO100100
LCP5.1 秒2.3 秒
CLS0.0520.052

主要优化包括：

  • 将 659 KB 的 Hero JPEG 转成约 94 KB 的 WebP，体积减少约 86%
  • 预加载首屏图片
  • 将非关键 JavaScript 改为 defer 加载
  • 把静态资源缓存时间调整为 30 天
  • 修复颜色对比度、标题层级和表单标签问题

LCP 从 5.1 秒下降到 2.3 秒，是这次优化最明显的收益。PageSpeed 单次测试会受到测试节点、网络和服务器负载影响，因此更应该关注多次测试的变化趋势。

九、还可以继续优化什么

优化后的报告仍然提示首页第一篇文章封面图约 108 KB，预计可以节省约 71 KiB。后续可以继续压缩这张图片。

CSS 仍可能阻塞首屏渲染，可以考虑提取关键 CSS。这个改动容易引起样式闪烁，建议先在测试环境验证。对于 iSeeBox 之类的插件，如果报告显示 jQuery 有较多未使用代码，可以先确认插件是否支持原生 JavaScript，再考虑移除依赖。

十、总结

使用 AI Agent 配合 Google PageSpeed，流程可以变成：

  1. 安装 curl、Python 和 AI Agent 环境
  2. 在 Google Cloud 创建项目并启用 PageSpeed Insights API
  3. 获取 API Key 并用 600 权限保存
  4. 让 AI Agent 获取移动端和桌面端评分
  5. 根据具体诊断定位图片、CSS、JavaScript 和服务器配置问题
  6. 修改前备份，修改后重新测试并比较结果

AI Agent 不应该只负责报一个分数，更有价值的是把报告中的问题对应到实际文件，完成修改并用第二次测试验证结果。

参考链接

添加评论