网站性能监控实战：从指标到告警的完整体系

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。

为什么需要性能监控？

网站性能直接影响用户体验、SEO排名、转化率。加载慢3秒的网站，跳出率可能增加32%，转化率降低7%。性能监控是发现瓶颈、持续优化的基础。

性能监控的价值：发现问题、量化优化、趋势分析、定位瓶颈。

核心性能指标

Core Web Vitals（Google标准）：

  • LCP：最大内容绘制，目标<2.5秒
  • FID：首次输入延迟，目标<100毫秒
  • CLS：累积布局偏移，目标<0.1

传统指标：TTFB（首字节时间）、FCP（首次内容绘制）、TTI（可交互时间）

监控工具选型

真实用户监控（RUM）：Google Analytics（免费）、SpeedCurve（付费）、自建（Navigation Timing API）

合成监控：PageSpeed Insights、WebPageTest、Lighthouse、GTmetrix

服务器监控：Prometheus + Grafana（开源）、DataDog、New Relic

实战配置

1. Google Analytics Core Web Vitals

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

GA会自动收集Core Web Vitals数据。

2. 自建RUM监控

function reportPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  const metrics = {
    ttfb: perfData.responseStart - perfData.requestStart,
    fcp: perfData.responseEnd - perfData.fetchStart,
    fullLoad: perfData.loadEventEnd - perfData.fetchStart,
    url: window.location.href,
    timestamp: Date.now()
  };
  fetch('https://monitor.example.com/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}
window.addEventListener('load', reportPerformance);

3. Prometheus + Grafana

sudo apt install prometheus-node-exporter
# 配置Prometheus
cat <<'EOF' > /etc/prometheus/prometheus.yml
scrape_configs:
  - job_name: 'node'
    static_configs:
      - targets: ['localhost:9100']
EOF
# 安装Grafana并导入仪表盘模板ID 1860

4. 告警配置

groups:
  - name: performance_alerts
    rules:
      - alert: HighResponseTime
        expr: http_request_duration_seconds{quantile="0.95"} > 1
        for: 5m
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) > 0.05
        for: 5m

性能优化闭环

监控-分析-优化-验证

  1. 监控发现LCP=4.2秒
  2. 分析发现主图2.5MB
  3. 优化：图片压缩+CDN
  4. 验证：LCP降至1.8秒

常见瓶颈与解决

TTFB过高：升级服务器、优化数据库、启用CDN

LCP过长：压缩图片、懒加载、异步加载JS

CLS过大：预留空间、font-display: swap

最佳实践

  • 分层监控：网络层、服务器层、应用层
  • 多维度分析：按地区、设备、浏览器
  • 定期复盘：每月分析性能报告
  • 告警分级：P0（立即处理）、P1（24小时内）、P2（本周内）

总结

网站性能监控需要建立完整的指标体系、监控工具和告警机制。从Core Web Vitals到业务指标，从RUM到合成监控，形成”监控-分析-优化-验证”的闭环流程。性能优化是持续迭代的过程。