如何通过PageSpeedInsights API和Google Apps Script将Lighthouse报告推送至Slack

1. 前置准备 #

• 先在你的Slack工作区创建传入Webhook，拿到专属Webhook URL，这是脚本向Slack发消息的凭证
• 确认你要检测速度的目标网站URL
• 准备好谷歌账号，登录Google Apps Script平台

2. 编写核心代码 #

新建Google Apps Script项目，将默认代码替换为以下内容，按注释替换成你自己的配置参数即可：

// 自定义配置项，全部替换为你自己的参数
const SLACK_WEBHOOK_URL = "替换为你的Slack Webhook地址";
const TARGET_WEBSITE_URL = "替换为要检测的网站URL";
const SLACK_CHANNEL = "#替换为接收通知的Slack频道名，例：#网站监控";
const SPEED_WARNING_THRESHOLD = 3000; // 响应耗时超过3000ms则标为告警，可自行调整

// 主函数：检测网站速度+发Slack通知
function checkWebsiteSpeedAndNotify() {
  const startTime = Date.now();
  try {
    // 发起请求获取网站响应
    const response = UrlFetchApp.fetch(TARGET_WEBSITE_URL, {
      muteHttpExceptions: true,
      followRedirects: true,
      timeout: 30000
    });
    const loadTime = Date.now() - startTime;
    const responseCode = response.getResponseCode();
    
    // 组装Slack消息格式
    const message = {
      channel: SLACK_CHANNEL,
      text: `*网站速度检测结果更新*`,
      attachments: [
        {
          color: loadTime > SPEED_WARNING_THRESHOLD ? "danger" : "good",
          fields: [
            {
              title: "检测站点",
              value: TARGET_WEBSITE_URL,
              short: true
            },
            {
              title: "响应耗时",
              value: `${loadTime}ms`,
              short: true
            },
            {
              title: "响应状态码",
              value: responseCode,
              short: true
            },
            {
              title: "检测时间",
              value: new Date().toLocaleString("zh-CN"),
              short: true
            }
          ]
        }
      ]
    };

    // 推送消息到Slack
    UrlFetchApp.fetch(SLACK_WEBHOOK_URL, {
      method: "post",
      contentType: "application/json",
      payload: JSON.stringify(message)
    });
  } catch (error) {
    // 检测失败时也推送异常通知
    const errorMessage = {
      channel: SLACK_CHANNEL,
      text: `*网站速度检测失败*`,
      attachments: [
        {
          color: "danger",
          fields: [
            {
              title: "检测站点",
              value: TARGET_WEBSITE_URL,
              short: true
            },
            {
              title: "错误信息",
              value: error.toString(),
              short: false
            },
            {
              title: "检测时间",
              value: new Date().toLocaleString("zh-CN"),
              short: true
            }
          ]
        }
      ]
    };
    UrlFetchApp.fetch(SLACK_WEBHOOK_URL, {
      method: "post",
      contentType: "application/json",
      payload: JSON.stringify(errorMessage)
    });
  }
}

3. 测试功能有效性 #

• 配置参数替换完成后，在编辑器顶部的函数下拉框选中checkWebsiteSpeedAndNotify，点击运行按钮
• 首次运行会触发授权请求，按提示完成脚本权限授予即可
• 运行结束后前往对应的Slack频道，确认是否收到检测通知

4. 设置定时执行规则 #

• 点击编辑器左侧的时钟样式「触发器」图标
• 点击右下角「添加触发器」
• 触发函数选择checkWebsiteSpeedAndNotify，事件源选择「时间驱动」
• 根据你的需求选择执行频率：最小支持每分钟执行一次，也可设置为每小时、每天、每周固定时间执行
• 保存触发器后即可自动定期推送通知

可选优化方向 #

• 若要检测多个站点，将TARGET_WEBSITE_URL改为数组，循环执行检测逻辑即可
• 可新增耗时统计逻辑，每次通知附带近7天的平均响应耗时做参考
• 可自定义不同状态码的告警规则，比如4xx、5xx状态码单独标记高优先级告警

内容的提问来源于stack exchange，提问作者mert dökümcü