性能预算帮助团队保持网站速度。本文介绍设定和监控方法。

一、性能预算概念

设定资源使用上限。指标：页面大小、请求数、加载时间。防止性能退化。团队共识。

二、关键指标

页面重量：HTML+CSS+JS+图片<1MB。HTTP请求：<50个。首屏时间：<1.5秒。完全加载：<3秒。Lighthouse评分：>90。

三、预算设定

基线测试：当前性能。目标设定：基于业务需求。分解预算：各组件配额。预留空间：未来增长。

四、监控工具

Lighthouse CI：自动化测试。WebPageTest：详细分析。Calibre：持续监控。SpeedCurve：趋势追踪。

五、CI/CD集成

构建时检查：阻止超预算部署。PR检查：代码审查时警告。报告：定期性能报告。警报：超阈值通知。

六、优化策略

代码分割：按需加载。懒加载：延迟非关键资源。缓存：减少重复下载。压缩：减小文件大小。