用途
本技能用于跨全栈测量、优化并维护 Web 应用性能，主要解决四类问题：Core Web Vitals 分数低于目标、打包体积增长、页面加载时间退化，以及为流量高峰或迁移做准备。核心方法论是度量驱动：先剖析（profile），再优化，最后度量优化带来的影响。
主要能力
Core Web Vitals 监控
通过 web-vitals 库采集 LCP、INP、CLS、FCP、TTFB 的 RUM 数据，并通过 sendBeacon 上报分析端点。文档给出的 Lighthouse CI 配置（lighthouserc.js）可对多个 URL 各运行 3 次并断言性能分数≥0.9、无障碍≥0.95、LCP≤2500ms、CLS≤0.1、交互≤3800ms 等。文中指出：实验室指标（Lighthouse）用于在部署前发现回归，字段指标（RUM）反映真实用户体验，二者都需要。Lighthouse CI 及其他新的 CI 任务仅在用户要求时添加。
包优化与代码分割
针对 gzip 后超过 200kb 或首屏包含未访问路由代码的情形，使用动态 import（如 Next.js 的 next/dynamic）按路由分割、惰性加载重型组件（富文本编辑器、图表、地图），并用 @next/bundle-analyzer 与 optimizePackageImports 进行 tree-shaking 分析，配合 ANALYZE=true npm run build、source-map-explorer 等命令排查包体积。
图片优化
使用 Next.js Image 组件设置 width/height、sizes、priority、placeholder="blur"；LCP 图片使用 priority 跳过懒加载。对用户上传图片使用 Sharp 生成 320/640/1280/1920 多尺寸的 WebP 与 AVIF 变体。文中指出图片通常占页面体积 50% 以上，现代格式可较 JPEG 减少 25%–50%。
缓存策略
按资源类型配置 HTTP 缓存头：带内容哈希的静态资源使用 public, max-age=31536000, immutable；API 使用 public, s-maxage=60, stale-while-revalidate=300；HTML 页面使用 max-age=0, must-revalidate。服务端使用 Redis 实现带 TTL 与 staleSeconds 的缓存函数，支持 stale-while-revalidate 后台刷新。
负载测试
使用 k6 编写负载脚本，包含 ramp-up、稳态、尖峰、持续尖峰、ramp-down 等阶段，并设置阈值（如 p(95)<500、p(99)<1000、错误率<1%、平均 API<200ms）。运行方式包括 k6 run load-test.js、-e BASE_URL 指定环境、--out json=results.json 输出结果。文中强调负载测试仅在用户要求时运行。
使用方式与核心原则
文中给出一条性能预算参考表：LCP<2.5s 为好、INP<200ms 为好、CLS<0.1 为好、FCP<1.8s、TTFB<800ms、总 JS<200kb gz、页面总重<1MB。五条原则：先度量再优化；为一切设定预算并在评审中检查；优化关键路径；积极缓存并精确失效；在真实规模下推理，仅在用户要求时运行负载测试。文末还提供了一份检查清单（RUM 与 Lighthouse 度量、预算定义、包分析与路由分割、图片优化、LCP 图片 priority、缓存头、服务端缓存、第三方脚本异步加载、数据库查询分析等）。
适用场景
适用于诊断缓慢页面或 API、缩减打包体积、设计缓存与性能预算，以及为流量高峰、重大发布或迁移前建立性能基线。
限制
文档明确了反模式：不度量就直接优化、一次性加载全部 JS、图片不带宽高、对所有资源使用 no-cache、同步加载 Web 字体、在 head 中放第三方脚本、N+1 数据库查询。关于本技能的收费、价格、支持平台及具体使用步骤，原文暂未提供。