Frontend Performance

Verified

Analyzes frontend performance issues (LCP, FCP, CLS, bundle size) and suggests prioritized, practical optimizations for loading and runtime efficiency.

264

Install

Claude Code

Add to .claude/skills/

About This Skill

Content available in Chinese

# 前端性能优化（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、边缘渲染等
## 输出模板
```markdown
## 性能优化报告
### 现状
指标或现象：…
主要瓶颈：…
### 优化方案（按优先级）
| 方案 | 收益 | 成本 | 优先级 |
|------|------|------|--------|
| 1. … | … | … | 高/中/低 |
| 2. … | … | … | … |
### 建议落地顺序
1. …
2. …
### 验证方式
优化后建议复测：Lighthouse、Performance、关键操作耗时
```
## 项目相关
Next.js：用 `dynamic` 懒加载、Image 组件、分析 `next/bundle-analyzer`
React：避免在渲染里创建新对象/函数导致子组件无效重渲染，必要时 memo/useMemo/useCallback
长列表：优先虚拟滚动（如 react-window、tanstack-virtual）再考虑分页

Use Cases

Audit front-end performance and identify bottlenecks in rendering and loading
Optimize JavaScript bundle sizes through code splitting and tree shaking
Implement lazy loading for images, components, and route-level code
Configure caching strategies for static assets and API responses
Improve Core Web Vitals scores for better SEO and user experience

Pros & Cons

Pros

+ Covers the full performance optimization spectrum: loading, rendering, and caching
+ Core Web Vitals focus aligns with Google's ranking signals
+ Practical optimization techniques with measurable before/after improvements

Cons

- Documentation primarily in Chinese
- Only available on claude-code and openclaw platforms
- Performance optimization requires measurement — suggestions without profiling data are generic

Frequently Asked Questions

What does Frontend Performance do?

Analyzes frontend performance issues (LCP, FCP, CLS, bundle size) and suggests prioritized, practical optimizations for loading and runtime efficiency.

What platforms support Frontend Performance?

Frontend Performance is available on Claude Code, OpenClaw.

What are the use cases for Frontend Performance?

Audit front-end performance and identify bottlenecks in rendering and loading. Optimize JavaScript bundle sizes through code splitting and tree shaking. Implement lazy loading for images, components, and route-level code.

Stay Updated on Agent Skills

Get weekly curated skills + safety alerts