Al terminar el taller, tu agente sabrá abrir Chrome, grabar un trace de Performance, localizar el archivo y la línea exacta que bloquea el hilo principal, y abrir una Pull Request con el fix, sin que tengas que guiarlo cada vez. En 4 horas, en remoto.
El Model Context Protocol es el puente que da a tu agente acceso real a Chrome DevTools: navega, graba traces, analiza la red e inspecciona el DOM. Combinado con SKILLs específicas (Vercel para React/Next.js, guardarraíles genéricos de rendimiento), tu agente pasa de asistente genérico a experto en debugging de Web Performance.
¿Para quién es este workshop?
Este workshop es para ti si:
- Trabajas en frontend o full-stack y quieres incorporar agentes de IA al flujo de debugging de rendimiento sin perder rigor técnico.
- Ya usas Chrome DevTools y conoces las Core Web Vitals, pero el análisis manual de traces se te hace lento y repetitivo.
- Quieres entender qué aporta exactamente el MCP frente a Lighthouse o un análisis tradicional, y dónde están sus límites.
- Te interesa automatizar la detección de regresiones de rendimiento en CI/CD y dejar que el agente abra Pull Requests con los fixes.
Requisitos previos: conocimientos básicos de Chrome DevTools y Core Web Vitals, familiaridad con la terminal y Git. No es necesario haber usado MCP previamente.
¿Qué veremos en el taller?
El taller recorre dos problemas distintos: cómo detectar y resolver regresiones existentes, y cómo evitar que aparezcan nuevas mientras el agente genera código. Cada bloque construye sobre el anterior: empezamos con análisis manual y terminamos con un entorno de desarrollo donde el agente tiene guardarraíles de rendimiento permanentes.
1. Introducción y anatomía del MCP
Qué es el Model Context Protocol (MCP), qué son las Agent Skills y cómo se combinan para dar al agente acceso real a Chrome DevTools. Repasaremos las herramientas del MCP que usaremos durante el taller (performance traces, network, DOM, Lighthouse) y cómo encajan con el flujo habitual de debugging.
2. Configuración del agente + Chrome DevTools MCP
Instalación y configuración del Chrome DevTools MCP en tu agente preferido (Gemini CLI, Claude Code, Codex CLI o Cursor). Modos headless vs visible, conexión a una sesión real de Chrome y verificación de que todo el stack responde correctamente antes de empezar a depurar.
3. Ejercicio 1, Análisis manual sin ayuda de la IA
Punto de partida tradicional: abrir Chrome DevTools, grabar una traza de Performance e identificar long tasks a mano. Veremos los límites del enfoque manual (tamaño del trace, ruido, tiempo de interpretación) para entender después qué problema concreto resuelve el MCP.
4. Ejercicio 2, El muro del código minificado
Usaremos el MCP en un escenario tipo producción donde el código está minificado. El agente identifica la función que bloquea el hilo principal, pero solo puede nombrarla como `a()`. Discutiremos qué se puede y qué no se puede deducir cuando no hay Source Maps.
5. Ejercicio 3, Del trace al código con Source Maps
Activamos las reglas del agente y trabajamos sobre una app React con Source Maps. Veremos cómo el agente pasa a darnos archivo, línea exacta y duración de la tarea, y por qué tener reglas explícitas en CLAUDE.md, GEMINI.md, AGENTS.md cambia radicalmente la calidad del diagnóstico.
6. Ejercicio 4, Automatización total: branch, commit y PR
Pasamos de detectar a resolver. Pediremos al agente que cree una rama, aplique el fix, haga commit, push y abra una Pull Request etiquetada. Veremos cómo dejar el flujo de trabajo Git como parte del propio prompt y por qué las PRs son un buen sitio donde guardar el histórico de mejoras de rendimiento.
7. Ejercicio 5, Análisis profundo con SKILLs externas
Aplicaremos las SKILLs de Vercel para React/Next.js sobre una app Next.js llena de anti-patrones (`useEffect` sin dependencias, cálculos pesados en el render, estado que dispara re-renders innecesarios). Veremos cómo el scope del contexto convierte un agente genérico en un experto en rendimiento del stack que usas.
8. Guardarraíles de rendimiento para desarrollo con agentes de IA
El agente no tiene ningún incentivo inherente para preservar el rendimiento: cada nueva feature es una regresión potencial. Veremos cómo codificar reglas de rendimiento directamente en el contexto del agente (CLAUDE.md, GEMINI.md, AGENTS.md) para que actúen como guardarraíles permanentes durante el desarrollo, no solo en sesiones de análisis. Instalaremos los guardarraíles genéricos de `agent-skills` y veremos la diferencia de comportamiento del agente con y sin ellos activos.
9. Workflows aplicables a proyectos reales
Cerramos con patrones que puedes llevarte al lunes: auditoría de Core Web Vitals en CI/CD sobre URLs de preview, detección de regresiones de CLS entre staging y producción, análisis del impacto de scripts de terceros y optimización de imágenes a gran escala. Tiempo abierto para resolver dudas sobre tu propio proyecto.
Desarrollo con agentes de IA y rendimiento sostenible
Detectar y corregir problemas de rendimiento es solo la mitad del trabajo. El otro problema es que los agentes de IA no tienen ningún incentivo para preservar el rendimiento: generan código que funciona, pero cada nueva feature puede introducir una regresión silenciosa.
La solución es codificar las reglas de rendimiento directamente en el contexto del agente, no solo para sesiones de análisis, sino de forma permanente en tu proyecto:
- SKILLs de framework (Vercel, React): corrigen anti-patrones conocidos en el código existente antes de que lleguen a producción.
- Guardarraíles genéricos (agent-skills): instruyen al agente para medir antes de optimizar, respetar los umbrales de Core Web Vitals (LCP ≤ 2.5s, INP ≤ 200ms, CLS ≤ 0.1) y detectar anti-patrones comunes antes de escribir código.
En el taller instalaremos ambas capas y veremos en tiempo real la diferencia de comportamiento del agente con y sin ellas activas.
Sobre el instructor
Joan León, Web Performance Artisan, Google Developer Expert en Web Technologies y Cloudinary Ambassador.
Me apasiona el rendimiento web y ayudar a equipos y empresas a crear experiencias digitales más rápidas que mejoren la conversión y generen impacto real en el negocio. Comparto conocimiento en meetups, conferencias, workshops y en joanleon.dev.
Actualmente exploro el uso de IA y agentes para automatizar auditorías y mejorar los procesos de optimización web, que es exactamente de lo que va este taller.
Otros talleres
Este no es el primero. Otros workshops que he impartido y puedes consultar:
- Taller de Web Performance, rendimiento web desde cero: Core Web Vitals, herramientas de medición y optimización.
- Image Optimization Workshop, formatos, compresión, imágenes responsive y pipeline de automatización.
- Testing E2E, testing de extremo a extremo con Playwright.
- PostCSS Workshop, transformación y optimización de CSS con PostCSS.
Formato
- Online en directo vía Zoom.
- Una sesión de 4 horas con todos los ejercicios paso a paso.
- Grabación disponible tras el taller para repasar cuando quieras.
- Repositorio con los ejercicios, las demos preparadas con cuellos de botella intencionados y las reglas de agente que usaremos.
- Canal privado en Discord para resolver dudas antes, durante y después del taller.
Requisitos técnicos
- Un agente de IA con soporte MCP: Gemini CLI, Claude Code, Codex CLI o Cursor.
- Node.js 20.19 o superior y Google Chrome en versión estable.
- Cuenta de GitHub y GitHub CLI instalado para el ejercicio de automatización con Pull Request.
- Cuenta de Discord para acceder al canal privado del taller.
¿Cuándo?
Elige la opción que mejor se adapte a tu agenda:
| Opción | Día/s | Horario | Duración |
| A | Sábado 23 de mayo | 9:30 a 13:30 (CEST) | 4 horas |
| B | Martes 26 + Jueves 28 de mayo | 19:00 a 21:00 (CEST) | 2 horas cada día |
Inversión
El precio del workshop es de 120€, e incluye la sesión de 4 horas en directo, la grabación, el repositorio con todos los ejercicios y el canal de Discord.
- Pago personal: pago directo por Stripe con el botón de abajo.
- Pago por empresa o bonificación FUNDAE: escríbeme a LinkedIn antes de pagar y lo gestionamos (factura previa, transferencia o gestión FUNDAE).
¿Sois un equipo? Si queréis hacer una edición privada o adaptar el horario a vuestra jornada, escríbeme a LinkedIn y lo organizamos.
Preguntas frecuentes
¿Se grabará la sesión?
Sí. Tendrás acceso permanente a la grabación para consultarla cuando quieras.
¿Necesito experiencia previa con agentes de IA o MCP?
No. Configuraremos el entorno desde cero al inicio del taller. Sí es necesario tener instalado uno de los agentes compatibles antes de la sesión, para no perder tiempo en descargas.
¿Funciona con cualquier framework?
El núcleo del taller es agnóstico del framework: trabajamos con HTML/JS plano, una app Vite/React y una app Next.js. Las técnicas son aplicables a cualquier stack moderno.
¿Podré resolver dudas fuera de la sesión?
Sí. Tendrás acceso a un canal privado de Discord donde puedes preguntar antes, durante y después del taller.
¿Podré tener factura?
Sí. Stripe genera la factura automáticamente después del pago.