性能优化
以“真实用户体验”为最终度量的全链路性能工程：从构建体积、网络传输、渲染与交互，到线上监控与回归防护。
指标与基线
- Web Vitals：LCP（可见速度）、INP（交互响应）、CLS（布局稳定）。
- 资源预算：首包与关键路径资源设“体积预算”，超限阻断。
- 覆盖率：关键路径缓存命中率、CDN 边缘命中率与回源率。
策略与手段
- 打包与加载：代码分割、按需加载、模块去重、依赖瘦身、预加载关键资源。
- 样式与布局：关键 CSS 内联、非关键延后、避免触发重排的动画。
- 媒体与字体：AVIF/WebP、明确尺寸+占位、变体字体与字体显示策略。
- 缓存与网络：强缓存+指纹、协商缓存、CDN 边缘缓存与路由规则。
精选阅读
- 总览与路线：
/blog/performance-optimization、/blog/web-vitals - 网络与缓存：
/blog/caching-strategy、/blog/http-caching - 打包与代码：
/blog/bundle-optimization、/blog/code-splitting-practices - 媒体与渲染：
/blog/image-optimization、/blog/responsive-layout - 评估与改进：
/blog/lighthouse-optimization、/blog/streaming-optimization
团队落地清单
- 路由级代码分割与首屏关键 CSS 内联
- 静态资源全部指纹化，CDN 缓存与回源率监控
- 图片具备尺寸、使用 AVIF/WebP 与占位，视频按带宽自适应
- RUM 采集 LCP/INP/CLS，Lighthouse 评分进入 CI 守门
- 为高风险依赖建立“体积预算”，超出自动告警/阻断
- 与无障碍并行治理，避免性能优化引入可达性回退
下方将自动汇总该分类的相关文章。