Habilidades performance-optimization
📈

performance-optimization

Seguro

优化应用程序性能

También disponible en: ArieGoldkin

此技能帮助开发者通过经过验证的优化技术提升应用程序速度和效率，包括React性能优化、懒加载、缓存和数据库查询优化。

Soporta: Claude Codex Code(CC)
📊 70 Adecuado
1

Descargar el ZIP de la skill

2

Subir en Claude

Ve a Configuración → Capacidades → Skills → Subir skill

3

Activa y empieza a usar

Pruébalo

Usando "performance-optimization". How can I improve my React application performance?

Resultado esperado:

以下是性能优化检查表：

## 前端
- 使用React.memo防止不必要的重新渲染
- 适当使用useMemo/useCallback
- 懒加载和代码分割
- 优化图片（WebP、懒加载）
- 分析并减小包体积

## 后端
- 消除N+1查询
- 添加数据库索引
- Redis缓存
- 压缩API响应（gzip）
- 使用CDN

## 测量
- Lighthouse分数90+
- LCP < 2.5秒
- FID < 100毫秒
- CLS < 0.1

Usando "performance-optimization". What are the best practices for React performance?

Resultado esperado:

React性能最佳实践包括：

1. **防止重新渲染**：对昂贵组件使用React.memo，对计算值使用useMemo，对回调函数使用useCallback

2. **代码分割**：使用React.lazy()和Suspense仅在需要时加载组件

3. **虚拟化**：对于长列表，使用react-window等库只渲染可见项目

4. **图片优化**：使用Next.js Image组件或支持WebP格式的响应式图片

Auditoría de seguridad

Seguro
v1 • 3/10/2026

This is a benign documentation skill for performance optimization. The static scanner flagged code examples in markdown documentation (React.lazy(), npm commands, example URLs) which are all legitimate educational content. No actual security risks present.

2
Archivos escaneados
324
Líneas analizadas
4
hallazgos
1
Auditorías totales
Problemas de riesgo medio (2)
SKILL.md:93SKILL.md:94SKILL.md:95SKILL.md:110SKILL.md:151
Code Examples in Documentation
Dynamic import() expressions shown as code examples for React lazy loading
SKILL.md:25-32SKILL.md:32-35SKILL.md:35-48SKILL.md:48-53SKILL.md:53-63SKILL.md:63-66SKILL.md:66-86SKILL.md:86-89SKILL.md:122-127SKILL.md:127-136SKILL.md:136-139SKILL.md:139-145SKILL.md:145-148SKILL.md:148-154SKILL.md:154-159SKILL.md:159-175SKILL.md:175-178SKILL.md:178-184SKILL.md:184-189SKILL.md:189-204SKILL.md:204-207SKILL.md:207-216SKILL.md:216-219SKILL.md:219-222SKILL.md:222-231SKILL.md:231-235SKILL.md:235-241SKILL.md:241-261
Shell Command Examples
Shell commands shown as documentation examples
Problemas de riesgo bajo (2)
SKILL.md:28SKILL.md:31SKILL.md:284SKILL.md:285SKILL.md:286
Reference URLs in Documentation
Hardcoded URLs in documentation
SKILL.md:296SKILL.md:297
Internal Path References
Relative path references to other skill files
Auditado por: claude

Puntuación de calidad

38
Arquitectura
100
Mantenibilidad
87
Contenido
32
Comunidad
91
Seguridad
91
Cumplimiento de la especificación

Lo que puedes crear

前端性能审计

分析和改进前端性能指标，包括Lighthouse分数、Core Web Vitals和包体积。

React应用程序优化

优化React应用程序以防止不必要的重新渲染并提升渲染性能。

数据库查询性能

识别并修复数据库性能问题，包括N+1查询、缺失索引和缓存策略。

Prueba estos prompts

基础性能检查 
我的Web应用程序运行缓慢。请帮我使用Lighthouse和Web Vitals测量性能并识别瓶颈。
React性能审查 
我的React应用程序交互缓慢。请帮我使用React.memo、useMemo和useCallback优化组件以防止不必要的重新渲染。
包体积分析 
帮我分析和减小应用程序包体积。向我展示如何使用webpack-bundle-analyzer并实现代码分割。
数据库优化 
我的数据库查询很慢。请帮我识别N+1查询问题，添加适当的索引，并实现Redis缓存。

Mejores prácticas

  • 优化前先测量 - 使用性能分析工具识别实际瓶颈，而不是猜测
  • 专注于增量改进 - 每次优化一件事并测量影响
  • 建立持续性能监控 - 在CI/CD中跟踪Lighthouse分数和Core Web Vitals

Evitar

  • 过度优化 - 不要优化尚未证明是瓶颈的代码
  • 过度记忆化 - 过度使用useMemo/useCallback可能会损害性能
  • 忽视用户体验 - 优化的是用户实际感知的性能，而不仅仅是指标

Preguntas frecuentes

性能优化中的80/20法则是什么？
80/20法则意味着80%的性能改进来自20%的优化。首先关注最大的瓶颈以获得最大影响。
什么是Core Web Vitals？
Core Web Vitals是Google定义的指标：最大内容绘制（LCP）、首次输入延迟（FID）和累积布局偏移（CLS）。它们用于衡量用户体验性能。
什么是N+1查询问题？
N+1问题发生在获取项目列表后为每个项目分别执行单独的数据库查询时。使用JOIN或include/预加载来修复。
什么时候应该使用React.memo？
对经常以相同props渲染的组件使用React.memo。它可以防止props未更改时重新渲染。避免在简单组件上过度使用。
什么是代码分割？
代码分割将应用程序分成按需加载的较小块。与React.lazy()一起使用可以减小初始包体积并改善加载时间。
Redis缓存是如何工作的？
Redis缓存将频繁访问的数据存储在内存中。首先检查缓存，如果找到则返回缓存数据，否则查询数据库并将结果存储在缓存中。

Detalles del desarrollador

Licencia

MIT

Repositorio

https://github.com/supercent-io/skills-template/tree/main/.agent-skills/performance-optimization/

Ref.

main

Estructura de archivos

📄 SKILL.md

📄 SKILL.toon