performance-vitals
Optimizar el rendimiento de Core Web Vitals
Unos Core Web Vitals deficientes perjudican la experiencia del usuario y el posicionamiento SEO. Esta skill proporciona directrices claras, ejemplos de código y listas de verificación para lograr puntuaciones óptimas de LCP, INP y CLS para una mejor participación del usuario.
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「performance-vitals」を使用しています。 Help me optimize my LCP score which is currently at 4.2 seconds
期待される結果:
- LCP 4.2s está en el rango Poor (objetivo: bajo 2.5s)
- Ganancias rápidas para reducir LCP:
- - Añadir prop priority a tu imagen LCP y preprecargarla
- - Comprimir imágenes a formato WebP/AVIF
- - Reducir tiempo de respuesta del servidor bajo 600ms
- - Incluir CSS crítico y diferir estilos no críticos
- - Eliminar JavaScript bloqueante de renderizado con defer/async
「performance-vitals」を使用しています。 How can I improve my INP score from 450ms?
期待される結果:
- INP 450ms está en el rango Needs Improvement (objetivo: bajo 200ms)
- Estrategias para reducir INP:
- - Dividir tareas largas de JavaScript en fragmentos bajo 50ms
- - Usar useTransition de React para actualizaciones no urgentes
- - Mover cálculos pesados a Web Workers
- - Diferir scripts de terceros que bloquean el hilo principal
- - Optimizar manejadores de eventos para que ejecuten más rápido
「performance-vitals」を使用しています。 My CLS score is 0.28. How do I fix layout shifts?
期待される結果:
- CLS 0.28 está en el rango Poor (objetivo: bajo 0.1)
- Formas de prevenir cambios de diseño:
- - Siempre especificar width y height para imágenes y videos
- - Usar esqueleton loaders para contenido dinámico
- - Reservar espacio con min-height para contenido above-fold
- - Usar font-display: swap para prevenir cambios inducidos por fuentes
- - Animar solo propiedades transform y opacity
セキュリティ監査
安全This is a pure documentation skill containing only markdown content with code examples. No executable code, no file system access, no network calls, no environment variable access. The skill provides text-based guidance for Core Web Vitals optimization.
リスク要因
🌐 ネットワークアクセス (8)
📁 ファイルシステムへのアクセス (1)
⚡ スクリプトを含む (1)
⚙️ 外部コマンド (38)
品質スコア
作れるもの
Corregir cargas lentas de páginas
Identificar y resolver problemas de LCP que causan una renderización inicial lenta de la página y mejorar el tiempo para interactuar.
Configurar presupuestos de rendimiento
Configurar Lighthouse CI con presupuestos de rendimiento para prevenir regresiones de rendimiento en los despliegues.
Entender el impacto de Web Vitals
Aprender cómo los Core Web Vitals afectan el posicionamiento SEO y las métricas de experiencia del usuario para priorizar mejoras.
これらのプロンプトを試す
Mi imagen hero está causando puntuaciones bajas de LCP. Ayúdame a optimizarla usando el componente Image de Next.js con carga prioritaria y dimensionado adecuado.
Mi aplicación tiene INP alto debido a tareas largas de JavaScript. Muéstrame cómo dividir tareas largas y usar useTransition de React para mejorar la interactividad.
El contenido dinámico está causando puntuaciones altas de CLS. Muéstrame cómo reservar espacio con esqueleton loaders y dimensionado de imagen adecuado para prevenir cambios de diseño.
Configurar Lighthouse CI con un presupuesto de rendimiento que exija LCP bajo 2.5s, INP bajo 200ms y CLS bajo 0.1 para mis despliegues de producción.
ベストプラクティス
- Siempre añadir props width, height y priority a imágenes LCP para habilitar optimización del navegador y preprecarga
- Usar esqueleton loaders o min-height para contenido dinámico para prevenir cambios de diseño antes de que el contenido cargue
- Dividir tareas largas de JavaScript en fragmentos bajo 50ms usando patrones async/await y setTimeout yield
回避
- Usar imágenes no optimizadas sin dimensiones explícitas o priority para contenido above-the-fold
- Ejecutar cálculos pesados sincrónicamente en el hilo principal sin ceder al event loop
- Renderizar contenido dinámico sin reservar espacio, causando cambios de diseño y penalizaciones de CLS