如何为React应用配置PageSpeed API以实现性能监控

一、准备PageSpeed API密钥 #

1. 登录Google Cloud Console，创建或选择现有项目
2. 搜索并启用「PageSpeed Insights API」
3. 生成API密钥，密钥将用于后续接口调用（免费配额足以支撑日常开发提交检查需求）

二、编写Node.js脚本获取双数据 #

在React项目中新建scripts/pagespeed-check.js脚本，同时拉取现场数据（Field Data）和实验室数据（Lab Data），并添加自定义校验规则：

const axios = require('axios');
const fs = require('fs');

// 配置项，建议后续移到环境变量
const API_KEY = '你的API密钥';
const TARGET_URL = 'React应用的可访问地址（生产/预发环境）';
const CHECK_STRATEGIES = ['mobile', 'desktop']; // 需检查的设备类型

async function runPageSpeedCheck() {
  try {
    for (const strategy of CHECK_STRATEGIES) {
      const res = await axios.get(
        `https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=${encodeURIComponent(TARGET_URL)}&key=${API_KEY}&strategy=${strategy}&category=performance&category=accessibility`
      );

      // 提取CrUX现场数据
      const fieldMetrics = res.data.loadingExperience?.metrics;
      // 提取Lighthouse实验室性能得分
      const labScore = res.data.lighthouseResult?.categories?.performance?.score * 100;

      console.log(`=== ${strategy.toUpperCase()} 检测结果 ===`);
      console.log('现场核心指标：', fieldMetrics);
      console.log('实验室性能得分：', labScore.toFixed(1));

      // 保存结果到本地文件，便于排查
      fs.writeFileSync(
        `.pagespeed-result-${strategy}.json`,
        JSON.stringify({ fieldMetrics, labScore }, null, 2)
      );

      // 自定义校验规则，不达标则终止流程
      if (labScore < 80) {
        throw new Error(`${strategy}端实验室性能得分低于80，提交终止`);
      }
      if (fieldMetrics?.LCP?.category !== 'FAST') {
        throw new Error(`${strategy}端现场LCP指标未达标，提交终止`);
      }
    }
  } catch (err) {
    console.error('检测失败：', err.message);
    process.exit(1); // 返回非0退出码，触发CI/CD或钩子流程失败
  }
}

runPageSpeedCheck();

注：可根据需求调整category参数，添加best-practices、seo等检测类别；若项目未安装axios，可替换为node-fetch

三、集成Git提交钩子（Husky） #

实现提交前自动触发检测，阻止不合格代码提交：

1. 安装依赖：

npm install husky lint-staged --save-dev

2. 初始化Husky：

npx husky install
npm set-script prepare "husky install"

3. 添加pre-commit钩子：

npx husky add .husky/pre-commit "npm run pagespeed-check"

4. 在package.json中添加脚本：

{
  "scripts": {
    "pagespeed-check": "node scripts/pagespeed-check.js"
  }
}

四、CI/CD集成（可选） #

以GitHub Actions为例，创建.github/workflows/pagespeed.yml，实现PR提交时自动检测：

name: PageSpeed 性能检测
on: [pull_request]

jobs:
  check-performance:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: 配置Node环境
        uses: actions/setup-node@v4
        with:
          node-version: '20'
      - name: 安装依赖
        run: npm install
      - name: 运行PageSpeed检测
        env:
          API_KEY: ${{ secrets.PAGESPEED_API_KEY }}
          TARGET_URL: ${{ secrets.TARGET_APP_URL }}
        run: npm run pagespeed-check

注：需在GitHub仓库的「Settings -> Secrets and variables -> Actions」中添加PAGESPEED_API_KEY和TARGET_APP_URL两个机密变量

关键注意事项 #

• 确保TARGET_URL为公开可访问地址，PageSpeed API需正常抓取页面
• 现场数据（Field Data）依赖真实用户访问量，新上线应用可能暂时无数据，可先跳过该校验
• 可根据团队需求调整性能阈值，比如将实验室得分要求设为90分

内容的提问来源于stack exchange，提问作者KnightCrawler