用途
Web Performance Optimization 用于实施 Web 应用性能优化策略，包括懒加载、代码分割、缓存、压缩和监控，以改善 Core Web Vitals 和用户体验。
适用场景包括：
- 页面加载缓慢
- Largest Contentful Paint（LCP）偏高
- 打包体积过大
- Cumulative Layout Shift（CLS）频繁
- 移动端性能问题
主要能力
代码分割（React）
使用 React 的 lazy 与 Suspense 配合 react-router-dom 的 Routes/Route 实现按路由懒加载页面组件。
Webpack 打包优化
通过 optimization.splitChunks 配置，将 node_modules 中的依赖拆分为 vendors 包。
图片优化
使用 picture/source 提供 WebP 与 JPEG 回退，配合 srcset、sizes、loading="lazy"、decoding="async" 实现响应式与懒加载图片。
Service Worker 缓存
在 sw.js 中定义 CACHE_NAME 与 ASSETS 列表，在 install 事件中预缓存资源，在 fetch 事件中优先返回缓存，未命中时请求网络并写入缓存。
Core Web Vitals 监控
使用 PerformanceObserver 监控 LCP、CLS、INP，并通过 sendToAnalytics 占位函数上报指标。资料注明 INP 自 2024 年 3 月起取代 FID 成为 Core Web Vital。
压缩（Nginx）
提供 Nginx gzip 配置示例，包括 gzip on、gzip_types、gzip_min_length、gzip_comp_level。
使用方式
技能以代码示例形式给出各项优化实现，可直接参考对应片段应用到项目中。资料还提供性能目标表与优化清单，用于对照检查。
性能目标
| 指标 | Good | Needs Improvement |
|---|---|---|
| LCP | <2.5s | 2.5-4s |
| INP | <200ms | 200-500ms |
| CLS | <0.1 | 0.1-0.25 |
| TTI | <3.8s | 3.8-7.3s |
最佳实践
- 通过代码分割最小化打包体积
- 使用合适格式优化图片
- 有策略地实施懒加载
- 使用 HTTP 缓存头
- 启用 gzip/brotli 压缩
- 持续监控 Core Web Vitals
- 实施 Service Worker
- 延迟非关键 JavaScript
- 优化关键渲染路径
- 在真实设备与网络上测试
优化清单
- 为路由启用代码分割
- 懒加载首屏以下组件
- 优化并压缩图片
- 实施 Service Worker 缓存
- 启用 gzip/brotli 压缩
- 监控 Core Web Vitals
- 减少阻塞渲染的资源
附加配置
资料提到可参考 references/compression-monitoring.md 获取 Webpack 压缩插件设置、Apache .htaccess 压缩配置、TTFB 监控实现、Puppeteer 自动化测量；参考 references/typescript-advanced.md 获取 TypeScript lazyLoad 工具、TypeScript 图片组件、带离线回退的高级 Service Worker、TerserPlugin 配置、完整的 PerformanceMetrics 接口。
工具与资源
工具：Lighthouse / PageSpeed Insights、WebPageTest、Chrome DevTools Performance 标签页、web-vitals npm 包。
资源：Web Vitals、Google PageSpeed Insights、Lighthouse、WebPageTest、Performance API。
限制
资料未提供该技能的安装命令、收费方式、支持平台或具体版本要求，这些信息暂未提供。