用途
本技能用于网页性能优化，目标是加快加载速度并改善用户体验。它适用于被要求“加速网站”“优化性能”“减少加载时间”等场景，覆盖加载速度、运行时响应性与资源交付。
主要能力
- 以真实用户信号（字段数据）确定优化优先级，并用浏览器性能追踪进行诊断。
- 提供关键渲染路径优化建议：服务器响应（TTFB < 800ms、压缩、HTTP/2 或 HTTP/3、边缘缓存、Early Hints）、资源加载（preconnect、preload、Speculation Rules 预渲染、非关键 CSS 延迟加载）。
- JavaScript 优化：脚本 defer/async/module 使用、基于路由/组件/功能的代码分割、tree shaking 最佳实践。
- 图片优化：格式选择（AVIF、WebP、PNG、SVG）、响应式图片、LCP 图片优先级、懒加载与异步解码。
- 字体优化：系统字体回退、font-display: swap、关键字体预加载、可变字体。
- 缓存策略：Cache-Control 头配置、Service Worker 缓存优先模式。
- 运行时性能：避免布局抖动、防抖昂贵操作、使用 requestAnimationFrame、长列表虚拟化、View Transitions 实现平滑导航。
- 第三方脚本：异步加载、延迟到交互时加载、门面（facade）模式。
使用方式
- 若页面可运行，先阅读测量工作流，建立字段加实验室基线后再编辑。
- 优先处理表现较差的真实用户 Core Web Vitals，使用 DevTools 性能追踪定位原因。
- 仅检查并更改与已测量瓶颈相关的代码或资产。
- 重新运行等效实验室测量，报告前后数值、条件与不确定性；字段验证需等待足够新用户数据。
- 若无可运行页面，则做静态检查，但将发现称为假设而非已测量的回退，并附上可验证每个高影响假设的命令或浏览器工作流。
适用场景
面向典型内容或电商页面的性能优化，适用于需要以真实用户数据驱动、并通过浏览器追踪诊断瓶颈的团队。技能中提供的性能预算数值为初始护栏，需结合产品目标设备、网络、页面类型与用户旅程进行校准；若项目已有预算，应保留原有预算。
限制
- 性能预算数值仅为初始护栏，并非通用的通过/失败标准，需自行校准。
- 字段验证需等待足够新用户数据才能完成。
- 关于 Early Hints 的 LCP 提升数据，技能中明确标注为某厂商的案例研究，并非预期节省值，需自行测量结果。
- 预渲染需测量预测命中率、传输字节与服务器成本，错误预渲染约等于一次未使用的导航。
- 原始 PerformanceObserver 片段本身并非真实用户数据；生产遥测建议使用 first-party RUM 参考并优先采用 web-vitals。
- 技能中未提供关于收费、价格、具体平台支持范围等信息。