GitHub Actions 免费监控网站性能免费监控网站性能：PageSpeed CI + CrUX + GitHub

免费监控网站性能：PageSpeed CI + CrUX + GitHub Actions

商业性能监控服务动辄每月几百美元。用 Google PageSpeed API + GitHub Actions，0 成本实现每日性能监控。

需求

📚 本文是 UtlKit 技术系列第 8 篇 — 系列索引 →

上一篇：Web Crypto API →

下一篇：[CF 缓存优化 →]

网站上线后，需要持续监控 Core Web Vitals：

LCP (Largest Contentful Paint) — 最大内容绘制
CLS (Cumulative Layout Shift) — 累积布局偏移
INP (Interaction to Next Paint) — 交互到下次绘制

商业方案：Speedcurve、Calibre、Sentry Performance — 起步 $29-99/月。

免费方案：自己搞。

方案架构

GitHub Actions (cron daily)
  → 调用 PageSpeed Insights API
    → 解析 LCP/CLS/INP 分数
      → 存储为 GitHub Artifact（历史对比）
        → 分数低于阈值 → 发 PR/Issue 告警

PageSpeed API 免费额度

QPS: 20 次/秒
每日配额: 约 1250 次 push trigger + 每日 cron 绰绰有余
API Key: 可选，有了 key 额度更高
免费级别: 对个人项目完全够用

实现

Step 1: 基础 Workflow

# .github/workflows/pagespeed.yml
name: PageSpeed Insights

on:
  schedule:
    - cron: '0 0 * * *'  # 每天 UTC 0:00（北京 8:00）
  push:
    branches: [main]

jobs:
  pagespeed:
    runs-on: ubuntu-latest
    steps:
      - name: Run PageSpeed
        run: |
          URL="https://utlkit.com"
          API_KEY="${{ secrets.PAGESPEED_API_KEY }}"

          # 移动端
          curl -s "https://pagespeedonline.googleapis.com/pagespeedonline/v5/runPagespeed?url=${URL}&category=PERFORMANCE&category=ACCESSIBILITY&strategy=mobile${API_KEY:+&key=${API_KEY}}" \
            -o pagespeed-mobile.json

          # 桌面端
          curl -s "https://pagespeedonline.googleapis.com/pagespeedonline/v5/runPagespeed?url=${URL}&category=PERFORMANCE&category=ACCESSIBILITY&strategy=desktop${API_KEY:+&key=${API_KEY}}" \
            -o pagespeed-desktop.json

      - name: Extract scores
        run: |
          echo "Mobile Performance: $(jq '.categories.performance.score' pagespeed-mobile.json)"
          echo "Mobile Accessibility: $(jq '.categories.accessibility.score' pagespeed-mobile.json)"
          echo "Desktop Performance: $(jq '.categories.performance.score' pagespeed-desktop.json)"

      - name: Upload results
        uses: actions/upload-artifact@v4
        with:
          name: pagespeed-${{ github.sha }}
          path: pagespeed-*.json
          retention-days: 90

Step 2: 添加重试逻辑

PageSpeed API 有时候会 429（限流）或 500（内部错误）：

# pagespeed.sh - 带重试的请求
MAX_RETRIES=3
RETRY_DELAY=5

for i in $(seq 1 $MAX_RETRIES); do
  HTTP_CODE=$(curl -s -o response.json -w "%{http_code}" \
    "https://pagespeedonline.googleapis.com/pagespeedonline/v5/runPagespeed?url=${URL}&strategy=${STRATEGY}${API_KEY:+&key=${API_KEY}}")

  if [ "$HTTP_CODE" = "200" ]; then
    exit 0
  fi

  if [ "$HTTP_CODE" = "429" ]; then
    echo "Rate limited, waiting ${RETRY_DELAY}s..."
    sleep $RETRY_DELAY
    RETRY_DELAY=$((RETRY_DELAY * 2))  # 指数退避
  else
    echo "HTTP $HTTP_CODE, retrying..."
    sleep $RETRY_DELAY
  fi
done

echo "Failed after $MAX_RETRIES retries"
exit 1

Step 3: 添加告警

# 提取 Core Web Vitals
LCP=$(jq '.audits.largest-contentful-paint.score' pagespeed-mobile.json)
CLS=$(jq '.audits.cumulative-layout-shift.score' pagespeed-mobile.json)
INP=$(jq '.audits.interaction-to-next-paint.score' pagespeed-mobile.json)

# 阈值告警（Google 推荐：≥ 90 优秀，≥ 50 需改进）
if [ "$LCP" -lt 50 ] || [ "$CLS" -lt 50 ] || [ "$INP" -lt 50 ]; then
  echo "::warning title=Core Web Vitals 不达标::LCP=$LCP, CLS=$CLS, INP=$INP"
fi

Step 4: CrUX Dashboard 接入

Chrome UX Report (CrUX) 提供真实用户的性能数据：

访问 chromestatus.com/speed
输入你的域名
查看实际用户的 LCP/CLS/INP 分布

这个数据比 PSI 的实验室数据更真实——它反映的是全球 Chrome 用户的真实体验。

完整的效果

每次 push 或每天定时，GitHub Actions 自动跑 PageSpeed：

分数存为 artifact，可回溯 90 天
低于阈值时显示 warning
CrUX Dashboard 看真实用户数据

实际排查案例：一次 CLS 超标

PageSpeed CI 报警：CLS 从 0.01 升到 0.25。

排查过程：

看 PSI 详情 → CLS 贡献者是广告位
广告位动态加载，高度不确定 → 布局跳动
修复：给广告位容器设置 aspect-ratio 固定高度
重新部署 → CI 跑 PSI → CLS 回到 0.01

没有 CI 的话，这个回归要等到用户投诉才发现。

成本对比

方案	月成本	功能
Speedcurve	$99+	专业
Calibre	$39+	专业
PageSpeed CI (本方案)	$0	够用

经验总结

API Key 建议配置 — 免费额度够用但加了 key 更稳定
一定要加重试 — PageSpeed API 偶尔 429
Artifact 保留 90 天 — 足够追踪性能趋势
CrUX 看真实数据 — PSI 是实验室数据，CrUX 是真实用户
告警阈值设 50 — Google 推荐线，太低会误报，太高没意义

📚 本文是 UtlKit 技术系列第 8 篇 — 系列索引 →

上一篇：Web Crypto API →

下一篇：[CF 缓存优化 →]

utlkit.com — 103 个免费在线工具