web-perf

Descripción general de la skill web-perf

Qué hace web-perf

La skill web-perf te ayuda a auditar y mejorar la velocidad de carga de páginas usando Chrome DevTools MCP, en lugar de adivinar a partir de una captura de pantalla o de una puntuación de Lighthouse. Se centra en Core Web Vitals, diagnóstico basado en trazas, waterfalls de red, bloqueo del renderizado, cambios de layout, caché y problemas relacionados de accesibilidad y rendimiento.

Quién debería usarla

Usa esta skill web-perf si necesitas una investigación práctica de rendimiento para un sitio real, sobre todo cuando intentas explicar por qué una página se siente lenta, por qué se degradó una métrica o qué recurso está perjudicando la carga. Encaja especialmente bien en trabajos de Performance Optimization donde importan más las pruebas que los consejos genéricos.

Qué la diferencia

El valor principal de web-perf es su preferencia por la recuperación en vivo desde la documentación actual y los datos de DevTools, no por modelos mentales desactualizados. Eso la hace mejor para decisiones que dependen de definiciones exactas de métricas, interpretación de trazas o comportamiento actual de las herramientas. Es menos útil para auditorías SEO amplias o críticas de diseño que no requieren trazado de rendimiento.

Cómo usar la skill web-perf

Instala y verifica el entorno

Ejecuta el flujo web-perf install desde tu gestor de skills y luego confirma que el servidor Chrome DevTools MCP esté realmente disponible antes de pedir un análisis. La skill espera acceso a DevTools; si faltan las herramientas MCP, el flujo debería detenerse pronto en lugar de inventar resultados.

Dale un prompt orientado al rendimiento

Un buen prompt de web-perf usage nombra la página, el síntoma y el contexto que el agente necesita para reproducir o inspeccionar el problema. Por ejemplo: “Audita la home en móvil por una regresión de LCP después del último release. Enfócate en CSS que bloquea, entrega de la imagen hero y evidencia de la traza.” Eso es mejor que “haz que este sitio sea más rápido”, porque le indica a la skill qué medir y dónde mirar.

Lee primero los archivos correctos

Empieza con SKILL.md y después sigue cualquier documentación enlazada desde el repo que explique fuentes de recuperación, comprobaciones de herramientas o pasos de análisis. En este repo no hay carpetas auxiliares adicionales, así que los principales puntos de decisión están en el propio archivo de la skill. Presta especial atención a las secciones que indican al agente que verifique las herramientas MCP, priorice la recuperación y use evidencia de trazas en lugar de suposiciones.

Usa un flujo de trabajo que encaje con la pregunta

Para diagnóstico, pide una causa raíz respaldada por trazas y una lista corta de correcciones. Para optimización, pide primero las mejoras con mayor probabilidad de impacto, no una lista exhaustiva. Para buscar regresiones, proporciona el cambio antes/después, la URL, la clase de dispositivo y si te importa más LCP, INP o CLS. Cuanto más concreta sea la entrada, menos tendrá que adivinar el modelo qué ruta de web-perf guide seguir.

Preguntas frecuentes sobre la skill web-perf

¿web-perf es solo para auditorías tipo Lighthouse?

No. Es útil para trabajos relacionados con Lighthouse, pero su caso de uso más fuerte es la depuración basada en trazas con DevTools MCP. Eso significa que puede ayudarte a entender por qué cambió una métrica, no solo que cambió.

¿Necesito conocer bien Chrome DevTools?

No necesariamente. La skill es útil para principiantes que pueden describir el problema con claridad. No hace falta ser experto en trazas, pero sí tener suficiente contexto para indicar al agente qué página, dispositivo y síntoma importan.

¿Cuándo no debería usar web-perf?

No la uses cuando quieras una refactorización frontend genérica, una revisión visual de diseño o una respuesta que no dependa de evidencia de ejecución. Si no puedes proporcionar una página para inspeccionar o no tienes disponible DevTools MCP, la skill quedará bloqueada.

¿En qué mejora respecto a un prompt normal?

Un prompt normal suele quedarse en un nivel alto. La skill web-perf es más accionable porque empuja hacia documentación actual, verificaciones explícitas de herramientas y causas medibles como bloqueo del renderizado, cadenas de dependencias, orígenes del layout shift y comportamiento de caché. Eso la hace más sólida para Performance Optimization que una instrucción puntual en una conversación.

Cómo mejorar la skill web-perf

Aporta entradas trazables, no objetivos vagos

La mejor forma de mejorar los resultados de web-perf es dar una URL, un dispositivo objetivo, una condición de prueba y la métrica que más te importa. “Mejorar la velocidad del checkout” es débil. “Audita el checkout en Android de gama media sobre 4G rápido para LCP y CLS después de publicar el nuevo banner hero” es mucho mejor.

Comparte la ventana de cambios y la causa sospechada

Si sabes qué cambió, dilo. Las notas de release, una actualización reciente del CMS, un nuevo script de terceros o un rediseño del hero suelen orientar la investigación en la dirección correcta. Eso ayuda a la skill a probar causas probables en vez de analizar toda la página a ciegas.

Pide evidencia y una ruta de corrección priorizada

Una salida útil de web-perf debería separar las causas confirmadas de las probables y después ordenar las correcciones por impacto en el usuario y esfuerzo de implementación. Si la primera respuesta es demasiado amplia, pide los dos principales cuellos de botella, la evidencia de trazas que los respalda y el cambio mínimo seguro para verificar la mejora.

Itera con mediciones antes/después

Trata la primera pasada como diagnóstico, no como cierre. Después de aplicar una corrección, vuelve a ejecutar el mismo flujo de trabajo de web-perf con la misma página y las mismas condiciones para que la salida compare de forma consistente la evidencia de trazas y las métricas. Esa es la forma más rápida de convertir una web-perf guide en un bucle de optimización repetible.