网站性能审计
概览
网站性能审计测量加载时间，识别瓶颈，并指导优化工作，以创建更快、更好的用户体验。
何时使用
- 定期性能监控
- 主要变更后
- 用户抱怨速度慢
- SEO优化
- 移动优化
- 性能基线设置
指令
1. 性能指标
核心Web Vitals（谷歌）：
最大内容绘制（LCP）：
测量：加载最大可见元素的时间
良好：<2.5秒
较差：>4秒
影响：用户对速度的感知
首次输入延迟（FID）：
测量：用户输入到响应的时间
良好：<100毫秒
较差：>300毫秒
影响：响应能力
累积布局偏移（CLS）：
测量：视觉稳定性（意外的布局偏移）
良好：<0.1
较差：>0.25
影响：用户挫败感
---
其他指标：
首次内容绘制（FCP）：
测量：首次可见内容出现
目标：<1.8秒
交互时间（TTI）：
测量：页面完全交互
目标：<3.8秒
总阻塞时间（TBT）：
测量：JavaScript阻塞时间
目标：<300ms
交互到下一次绘制（INP）：
测量：用户交互的延迟
目标：<200ms
---
测量工具：
- 谷歌PageSpeed Insights
- Lighthouse（Chrome DevTools）
- WebPageTest
- New Relic
- Datadog
- GTmetrix
2. 性能分析流程
# 进行性能审计
class PerformanceAudit:
def measure_performance(self, url):
"""基线测量"""
return {
'desktop_metrics': self.run_lighthouse_desktop(url),
'mobile_metrics': self.run_lighthouse_mobile(url),
'field_data': self.get_field_data(url), # 实际用户数据
'lab_data': self.run_synthetic_tests(url), # 实验室测量
'comparative': self.compare_to_competitors(url)
}
def identify_opportunities(self, metrics):
"""寻找改进领域"""
opportunities = []
if metrics['fcp'] > 1.8:
opportunities.append({
'issue': '首次内容绘制慢',
'current': metrics['fcp'],
'target': 1.8,
'impact': '高',
'solutions': [
'减少关键路径的CSS/JS',
'预加载关键字体',
'延迟非关键JavaScript'
]
})
if metrics['cls'] > 0.1:
opportunities.append({
'issue': '累积布局偏移高',
'current': metrics['cls'],
'target': 0.1,
'impact': '高',
'solutions': [
'为动态内容预留空间',
'避免在现有内容上方插入内容',
'使用transform进行动画'
]
})
return sorted(opportunities, key=lambda x: x['impact'])
def create_audit_report(self, metrics, opportunities):
"""生成综合报告"""
return {
'overall_score': self.calculate_score(metrics),
'current_metrics': metrics,
'target_metrics': self.define_targets(metrics),
'opportunities': opportunities,
'quick_wins': self.identify_quick_wins(opportunities),
'timeline': self.estimate_effort(opportunities),
'recommendations': self.prioritize_recommendations(opportunities)
}
3. 优化策略
性能优化路线图：
快速获胜（1-2天）：
- 启用gzip压缩
- 压缩CSS/JavaScript
- 压缩图像（无损）
- 移除未使用的CSS
- 延迟非关键JavaScript
- 预加载关键字体
中等努力（1-2周）：
- 实施懒加载
- 代码分割（分割路由）
- 服务工作器用于缓存
- 图像优化（WebP, srcset）
- 关键CSS提取
- HTTP/2服务器推送
长期（1-3个月）：
- 迁移到更快的框架
- 数据库查询优化
- 内容交付优化
- 架构重构
- CDN实施
- 构建过程优化
---
优化清单：
网络：
[ ] 开启gzip压缩
[ ] 开启Brotli压缩
[ ] 开启HTTP/2
[ ] 配置CDN
[ ] 配置浏览器缓存
[ ] 资产指纹
JavaScript：
[ ] 按路由拆分代码
[ ] 移除未使用代码
[ ] 压缩并混淆
[ ] 生成源映射
[ ] 延迟非关键代码
CSS：
[ ] 提取关键CSS
[ ] 移除未使用CSS
[ ] 压缩
[ ] 预加载字体
[ ] 使用WOFF2格式
图像：
[ ] 优化和压缩
[ ] WebP带回退
[ ] 响应式srcset
[ ] 懒加载
[ ] 尽可能使用SVG
4. 监控与持续改进
// 设置性能监控
class PerformanceMonitoring {
setupMonitoring() {
return {
tools: [
'谷歌分析（Web Vitals）',
'Datadog或New Relic',
'Sentry用于错误',
'自定义监控'
],
metrics: [
'LCP（最大内容绘制）',
'FID（首次输入延迟）',
'CLS（累积布局偏移）',
'FCP（首次内容绘制）',
'TTI（交互时间）'
],
frequency: '实时监控',
alerts: {
lcp_degradation: '如果>3秒则警告',
fid_degradation: '如果>200ms则警告',
cls_degradation: '如果>0.2则警告'
}
};
}
defineBaselines(metrics) {
return {
baseline: {
lcp: metrics.lcp,
fid: metrics.fid,
cls: metrics.cls
},
targets: {
lcp: metrics.lcp * 0.9, // 10%改进
fid: metrics.fid * 0.8,
cls: metrics.cls * 0.8
},
review_frequency: '每周',
improvement_tracking: '月度趋势'
};
}
setupPerformanceBudget() {
return {
javascript: {
target: '150KB gzipped',
monitor: '每次构建',
alert: '如果超过160KB'
},
css: {
target: '50KB gzipped',
monitor: '每次构建',
alert: '如果超过55KB'
},
images: {
target: '500KB 总计',
monitor: '每次部署',
alert: '如果超过550KB'
}
};
}
}
最佳实践
✅ 要做
- 定期测量（不仅仅是一次）
- 使用现场数据（真实用户）+实验室数据
- 专注于核心Web Vitals
- 设置现实的目标
- 按影响优先
- 持续监控
- 设置性能预算
- 在慢速网络上测试
- 包括移动性能测试
- 记录改进
❌ 不要做
- 忽略现场数据
- 只关注一个指标
- 设置不可能的目标
- 无测量优化
- 忘记图像
- 忽略JavaScript成本
- 忽略移动性能
- 过早过度优化
- 忘记监控
- 期望不劳而获的改进
性能提示
- 从Lighthouse审计开始（免费，在DevTools中）
- 使用WebPageTest进行详细分析
- 在3G移动上测试以找到真正的瓶颈
- 首先优先优化LCP
- 为团队创建性能预算