网站性能监控：四款工具测同一个站TTFB差400ms，不是网站不稳定

TTFB不能只看平均值。P50的TTFB可能是300ms看起来很健康，但P95可能是2.5秒——这意味着每20个用户里就有1个在等两秒半才收到第一个字节。性能监控一定要看P75、P95、P99这些分位数，平均值会掩盖长尾问题。

两者必须配合使用。合成监控告诉你"在理想条件下你的网站能跑多快"，RUM告诉你"真实用户实际体验有多快"。如果合成监控LCP是1.2秒但RUM显示P75用户LCP是3.8秒，说明你的CDN覆盖不到核心用户所在的地区，或者你的用户设备普遍比较旧。

# 安装 Lighthouse CInpm install -g @lhci/cli# 项目根目录创建 lighthouserc.jsmodule.exports = {ci: {collect: {// 要测试的页面列表url: ['https://你的网站.com/','https://你的网站.com/product/','https://你的网站.com/blog/sample-post',],// 每个URL跑3次取中位数（避免网络波动影响）numberOfRuns: 3,settings: {// 模拟移动端 + 3G网络preset: 'desktop', // 或 'desktop'onlyCategories: ['performance', 'accessibility', 'best-practices', 'seo'],},},assert: {// 断言规则：不达标则CI失败assertions: {'categories:performance': ['error', { minScore: 0.8 }], // 性能低于80分就报错'categories:accessibility': ['warn', { minScore: 0.9 }], // 可访问性低于90分警告'first-contentful-paint': ['error', { maxNumericValue: 2000 }], // FCP超过2秒报错'largest-contentful-paint': ['error', { maxNumericValue: 3000 }], // LCP超过3秒报错'cumulative-layout-shift': ['error', { maxNumericValue: 0.1 }], // CLS超过0.1报错'total-blocking-time': ['warn', { maxNumericValue: 300 }], // TBT超过300ms警告},},upload: {// 上传结果到临时公开存储（可选，方便团队查看）target: 'temporary-public-storage',},},};# 运行 Lighthouse CIlhci autorun# GitHub Actions 集成示例 (.github/workflows/lighthouse.yml)name: Lighthouse CIon: [pull_request]jobs:lighthouse:runs-on: ubuntu-lateststeps:- uses: actions/checkout@v3- uses: actions/setup-node@v3- run: npm install -g @lhci/cli- run: lhci autorun

CI中的断言阈值怎么设：第一次跑的时候先把minScore设成当前的实际分数减5分，让CI先通过。然后逐步收紧阈值，每次部署的目标是"不降低性能"，而不是一开始就追求90分。如果当前网站只有60分，直接设80分的阈值等于禁止了所有部署，反而会逼团队关掉这个检查。

// 1. 安装 web-vitals// npm install web-vitals// 2. 前端采集代码 (performance-monitor.js)import { onLCP, onFID, onCLS, onINP, onTTFB } from 'web-vitals';function sendToAnalytics(metric) {const body = {name: metric.name, // LCP, FID, CLS, INP, TTFBvalue: metric.value, // 数值rating: metric.rating, // good / needs-improvement / poordelta: metric.delta, // 与上次上报的差值id: metric.id, // 指标唯一ID（同页面多次触发时去重）page: window.location.pathname,timestamp: Date.now(),// 附带设备信息帮助分析device: {width: window.screen.width,height: window.screen.height,connection: navigator.connection?.effectiveType || 'unknown', // 4g/3g/2g},};// 用 sendBeacon 确保页面关闭时也能发送（CLS 在页面卸载时触发）if (navigator.sendBeacon) {navigator.sendBeacon('/api/vitals', JSON.stringify(body));} else {fetch('/api/vitals', {method: 'POST',body: JSON.stringify(body),keepalive: true,headers: { 'Content-Type': 'application/json' },});}}// 注册所有 Core Web Vitals 指标onCLS(sendToAnalytics);onINP(sendToAnalytics);onLCP(sendToAnalytics);onTTFB(sendToAnalytics);// 额外采集：自定义业务指标const observer = new PerformanceObserver((list) => {for (const entry of list.getEntries()) {if (entry.entryType === 'navigation') {// DNS查询时间、TCP连接时间、TLS握手时间、请求响应时间const timing = {dns: entry.domainLookupEnd - entry.domainLookupStart,tcp: entry.connectEnd - entry.connectStart,tls: entry.secureConnectionStart > 0 ? entry.connectEnd - entry.secureConnectionStart : 0,request: entry.responseStart - entry.requestStart,response: entry.responseEnd - entry.responseStart,dom: entry.domContentLoadedEventEnd - entry.domContentLoadedEventStart,load: entry.loadEventEnd - entry.loadEventStart,};sendToAnalytics({ name: 'NAV-TIMING', value: timing, rating: 'good' });}}});observer.observe({ type: 'navigation', buffered: true });

数据存哪里：量小的话存SQLite或者MySQL足够，每天几万条写入没问题。量大的话考虑时序数据库（InfluxDB、TimescaleDB）或者直接用Google Analytics 4的自定义事件（免费、免运维），缺点是数据粒度粗、有采样。

# 一行命令安装 Netdata（支持所有主流Linux发行版）wget -O /tmp/netdata-kickstart.sh https://get.netdata.cloud/kickstart.sh && sh /tmp/netdata-kickstart.sh# 安装完成后访问 http://你的服务器IP:19999# 自动监控以下所有内容（无需额外配置）：# - CPU / 内存 / 磁盘 / 网络 / 温度# - Nginx / Apache 状态# - MySQL / PostgreSQL / Redis / MongoDB# - PHP-FPM 进程状态# - 系统日志异常检测# - 每个进程的CPU/内存/IO占用# 配置告警（/etc/netdata/health_alarm_notify.conf）# 支持邮件、Slack、Discord、Telegram、Webhook等通知方式

#!/bin/bash# 简易自建可用性监控脚本（配合crontab使用）# */5 * * * * /opt/scripts/uptime-check.shURLS=("https://site1.com" "https://site2.com" "https://site3.com")TIMEOUT=10ALERT_WEBHOOK="https://hooks.slack.com/xxx"for url in "${URLS[@]}"; dostatus_code=$(curl -o /dev/null -s -w '%{http_code}' --max-time $TIMEOUT "$url")if [ "$status_code" != "200" ]; thenecho "[ALERT] ${url} 返回 ${status_code} - $(date)"# 发送告警到 Slack / 钉钉 / 飞书 / 企业微信curl -X POST -H 'Content-type: application/json' \--data "{\"text\":\"⚠️ 网站异常: ${url} 返回状态码 ${status_code}\"}" \$ALERT_WEBHOOKfidone