Habilidades web-performance-optimization
⚡

web-performance-optimization

Seguro

Optimiza el Rendimiento Web con Claude

Los sitios web lentos perjudican la experiencia del usuario y el posicionamiento SEO. Esta skill te ayuda a medir, analizar y optimizar sistemáticamente el rendimiento web utilizando técnicas probadas como code splitting, optimización de imágenes y mejoras en Core Web Vitals.

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 "web-performance-optimization". Mi LCP es 4.2s y necesito que esté bajo 2.5s. La imagen hero principal es de 2.5MB.

Resultado esperado:

Convierte la imagen hero a formato AVIF (ahorra ~80%), comprime a menos de 200KB, añade enlace preload, usa fetchpriority='high', e implementa imágenes responsivas con srcset para diferentes tamaños de pantalla.

Usando "web-performance-optimization". Mi bundle de JavaScript es de 850KB gzipped y está causando TTI lento.

Resultado esperado:

Reemplaza moment.js (67KB) con date-fns (12KB), importa solo las funciones de lodash necesarias en lugar de la librería completa, implementa code splitting basado en rutas para componentes pesados, y difiere scripts no críticos como analytics.

Usando "web-performance-optimization". Tengo una puntuación CLS de 0.25 con contenido saltando.

Resultado esperado:

Añade atributos width y height a todas las imágenes, usa la propiedad CSS aspect-ratio, implementa skeleton loaders para contenido dinámico, y reserva espacio para anuncios/widgets antes de que carguen.

Auditoría de seguridad

Seguro
v1 • 2/25/2026

All 94 static analysis findings are false positives. The skill file is pure documentation (SKILL.md) containing markdown code examples and best practices for web performance optimization. Detected patterns such as dynamic import(), shell commands, and URLs are within markdown code blocks as educational examples, not executable code. No security risks identified.

1
Archivos escaneados
649
Líneas analizadas
1
hallazgos
1
Auditorías totales
Problemas de riesgo bajo (1)
SKILL.md:77-644
Documentation Contains Command Examples
File contains bash commands and code examples within markdown code blocks for educational purposes only. These are not executable code and pose no security risk.
Auditado por: claude

Puntuación de calidad

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

Lo que puedes crear

Optimización de Sitios de E-commerce

Optimiza páginas de producto para mejorar las tasas de conversión reduciendo los tiempos de carga y mejorando las puntuaciones de Core Web Vitals

Mejora del Rendimiento de Dashboards

Reduce el tamaño del bundle de JavaScript y optimiza la carga de datos para interacciones más rápidas en el dashboard

Optimización de Velocidad para Sitios de Contenido

Implementa optimización de imágenes, lazy loading y estrategias de caching para una entrega de contenido más rápida

Prueba estos prompts

Analizar Problemas de Rendimiento 
Ejecuté una auditoría de Lighthouse y obtuve estos resultados: [pegar puntuaciones]. Ayúdame a entender qué está causando el bajo rendimiento y priorizar qué problemas arreglar primero.
Optimizar Core Web Vitals 
Mis Core Web Vitals son: LCP [valor], FID [valor], CLS [valor]. Muéstrame cambios de código específicos para mejorar estas métricas en mi aplicación [framework].
Reducir Tamaño del Bundle 
Mi bundle de JavaScript es de [tamaño] y tarda [tiempo] en cargar en 3G. Analiza mis dependencias y sugiere estrategias de code splitting o alternativas más ligeras.
Implementar Optimización de Imágenes 
Ayúdame a implementar una estrategia de optimización de imágenes para mi sitio. Tengo [número] imágenes que totalizan [tamaño]. Muéstrame cómo convertir a formatos modernos e implementar lazy loading en [framework].

Mejores prácticas

  • Establece siempre métricas base con Lighthouse antes de hacer optimizaciones para medir la mejora con precisión
  • Enfócate primero en Core Web Vitals (LCP, FID, CLS) ya que impactan directamente la experiencia del usuario y el posicionamiento SEO
  • Prueba el rendimiento en dispositivos móviles reales y redes 3G lentas, no solo en escritorio con internet rápido

Evitar

  • Optimizar sin medir primero - ejecuta siempre auditorías para identificar los cuellos de botella reales antes de hacer cambios
  • Sobre-optimizar desktop mientras ignoras el rendimiento móvil - la mayoría de usuarios están en dispositivos móviles con redes más lentas
  • Optimización prematura - enfócate en cambios de alto impacto que afecten métricas visibles para el usuario en lugar de micro-optimizaciones

Preguntas frecuentes

¿Qué son Core Web Vitals y por qué importan?
Core Web Vitals son las métricas de rendimiento de Google: LCP (velocidad de carga), FID (interactividad) y CLS (estabilidad visual). Impactan directamente el posicionamiento SEO y la experiencia del usuario. Las buenas puntuaciones son LCP bajo 2.5s, FID bajo 100ms, y CLS bajo 0.1.
¿Debería optimizar imágenes o JavaScript primero?
Comienza con el problema que tu auditoría de Lighthouse identifique como más severo. Generalmente, optimiza imágenes primero si tienen más de 1MB cada una, ya que esta es frecuentemente la victoria más rápida. Luego aborda el tamaño del bundle de JavaScript si es más de 200KB gzipped.
¿Cuál es la diferencia entre lazy loading y code splitting?
Lazy loading difiere la carga de recursos (como imágenes) hasta que se necesitan. Code splitting divide tu JavaScript en chunks más pequeños cargados bajo demanda. Usa ambos juntos: lazy load para imágenes y componentes below-the-fold, split de código por ruta o feature.
¿Cómo sé si mis optimizaciones están funcionando?
Ejecuta auditorías de Lighthouse antes y después de los cambios, documentando cada métrica. Prueba en múltiples dispositivos y velocidades de red. Usa herramientas de real user monitoring (RUM) para rastrear la experiencia real del usuario a lo largo del tiempo, no solo puntuaciones de laboratorio.
¿Puede esta skill implementar optimizaciones automáticamente?
No, esta skill proporciona orientación experta, ejemplos de código y estrategias de optimización. Tú o tu equipo de desarrollo implementarán los cambios sugeridos. La skill te ayuda a entender qué optimizar y cómo abordarlo.
¿Qué herramientas debería usar junto con esta skill?
Lighthouse (integrado en Chrome DevTools) para auditorías, webpack-bundle-analyzer para análisis de bundles, WebPageTest para waterfall charts detallados, y la pestaña Performance de Chrome DevTools para profiling de runtime. Esta skill ayuda a interpretar resultados de todas estas herramientas.

Detalles del desarrollador

Autor

sickn33

Licencia

MIT

Repositorio

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/web-performance-optimization

Ref.

main

Estructura de archivos

📄 SKILL.md