---

name: frontend-performance description: Analyzes and improves frontend performance: LCP, FCP, CLS, bundle size, lazy loading, and runtime efficiency. Use when 性能优化, 首屏慢, 卡顿, 打包体积, performance optimization, or improving Core Web Vitals.

前端性能优化（Frontend Performance）

围绕加载性能与运行性能，给出可落地的优化方案与优先级。

触发场景

• 用户说「性能优化」「首屏慢」「页面卡顿」「打包体积大」「LCP/FCP 差」
• 提供 Lighthouse 报告、Performance 录屏或具体慢的页面/操作

分析维度

1. 加载性能（LCP / FCP / TTI）

问题	常见原因	优化方向
LCP 慢	大图、阻塞渲染、服务端慢	图片优化、优先关键资源、SSR/预取
FCP 慢	JS/CSS 阻塞、首屏依赖多	拆包、关键 CSS 内联、延迟非关键
TTI 长	主线程长任务、大 bundle	代码分割、懒加载、减少主线程工作

2. 体验稳定性（CLS / 卡顿）

问题	常见原因	优化方向
CLS 高	无尺寸图片/字体、动态插入内容	宽高比/尺寸、font-display、预留占位
滚动/操作卡顿	重排多、长任务、大列表	虚拟列表、防抖节流、requestAnimationFrame、减少 reflow

3. 资源与打包

问题	优化方向
JS 体积大	按路由/按需拆包、tree-shaking、替换大依赖、分析 bundle
图片大	格式（WebP/AVIF）、尺寸、懒加载、CDN
请求多	合并、缓存策略、预连接/preload

执行流程

1. 现状量化

• 若有 Lighthouse：记录 LCP/FCP/CLS/TTI 与 Speed Index
• 若有具体慢的操作：描述操作 + 主观耗时或 Performance 时长
• 若有 bundle 诉求：给出当前主要 chunk 体积

2. 找瓶颈

• 加载：Network 看瀑布图、哪些请求阻塞或过大
• 运行时：Performance 录屏看长任务、布局/样式计算
• 打包：用分析工具（如 @next/bundle-analyzer）看大模块

3. 列方案并标性价比

每个方案注明：

• 收益：预期提升的指标或体感
• 成本：改动量、风险、依赖
• 优先级：高/中/低（高收益低成本优先）

4. 给出落地顺序

• 先做「快速见效」：如图片尺寸、font-display、关键 CSS、首屏懒加载
• 再做「中等改动」：路由级拆包、虚拟列表、缓存策略
• 最后考虑「大改动」：架构调整、SSR、边缘渲染等

输出模板

## 性能优化报告

### 现状
- 指标或现象：…
- 主要瓶颈：…

### 优化方案（按优先级）
| 方案 | 收益 | 成本 | 优先级 |
|------|------|------|--------|
| 1. … | … | … | 高/中/低 |
| 2. … | … | … | … |

### 建议落地顺序
1. …
2. …

### 验证方式
- 优化后建议复测：Lighthouse、Performance、关键操作耗时

项目相关

• Next.js：用 dynamic 懒加载、Image 组件、分析 next/bundle-analyzer
• React：避免在渲染里创建新对象/函数导致子组件无效重渲染，必要时 memo/useMemo/useCallback
• 长列表：优先虚拟滚动（如 react-window、tanstack-virtual）再考虑分页