Optimización avanzada de métricas de rendimiento web
Google utiliza las Core Web Vitals como señales directas de ranking SEO y experiencia de usuario. Este taller hands-on te proporciona las herramientas y técnicas para optimizar LCP, CLS e INP en aplicaciones web modernas, trabajando directamente con código real y casos prácticos.
Métricas y objetivos técnicos
LCP (Largest Contentful Paint)
Optimizaremos hasta alcanzar <2.5s
- Técnicas avanzadas de image loading y resource prioritization
- Estrategias de preload y lazy loading
- Server-side optimizations
CLS (Cumulative Layout Shift)
Conseguiremos un valor <0.1
- Prevención de layout shifts
- Técnicas de content placeholder
- Gestión de recursos dinámicos
INP (Interaction to Next Paint)
Mantendremos por debajo de 200ms
- Event handler optimization
- Main thread blocking prevention
- Runtime performance debugging
Stack tecnológico del taller
Todo el código estará disponible en múltiples implementaciones:
- React 18+ con TypeScript
- Vue 3 con Composition API y TypeScript
- Vanilla JavaScript/TypeScript para puristas
- Ejemplos adicionales en Next.js
Herramientas que utilizaremos
- Chrome DevTools Performance Panel
- Lighthouse & PageSpeed Insights
- Chrome User Experience Report (CrUX)
- Performance API
- Web Vitals JavaScript library
Metodología práctica
- Repositorio de código: Acceso a un repositorio Git con ejemplos prácticos y soluciones
- Deployments en vivo: Haremos deploys en Vercel para testing en producción
- Análisis real: Usaremos Chrome DevTools para analizar y optimizar en tiempo real
- Comparativas: Mediremos mejoras antes/después de cada optimización
Contenido técnico detallado
1. Setup inicial y benchmarking
- Configuración del entorno de desarrollo
- Primera medición de métricas
- Identificación de bottlenecks
2. Optimización de LCP
- Image optimization pipeline
- Critical rendering path
- Resource hints y priorización
3. Mejora de CLS
- Layout shift debugging
- Skeleton screens implementation
- Dynamic content handling
4. INP Performance
- Event delegation patterns
- Yield to Main Thread pattern
- Debouncing y throttling
- Performance profiling
Requisitos técnicos
- Conocimientos de JavaScript/TypeScript
- Familiaridad básica con las Core Web Vitals
- Git y cuenta de GitHub
- Cuenta de Vercel (free tier)
- Node.js y npm/yarn instalados
- Chrome DevTools (últimas versiones)
Fechas y formato
Dos opciones disponibles:
| Día | Fecha | Horario | Duración |
| Viernes | 29 de noviembre | 16:00 a 20:00 | 4 horas |
| Sábado | 30 de noviembre | 10:00 a 14:00 | 4 horas |
Formato
- Sesión online en directo vía Zoom
- Grabación disponible post-taller
- Acceso permanente al repositorio de código
- Documentación técnica detallada
Inversión
El coste de este taller es de 150€, a pagar por transferencia o Bizum en el momento de la inscripción.
El precio incluye:
- Sesión práctica de 4 horas
- Repositorio con ejemplos en múltiples frameworks
- Acceso a la grabación
- Documentación técnica
- Certificado de participación
Plazas limitadas
Inscripción
Para inscribirte en el taller, sigue estos pasos:
- Rellena el formulario de inscripción
- En el último paso podrás consultar las instrucciones de pago
- Una vez confirmado el pago, recibirás el acceso al repositorio y los detalles de la sesión
Preguntas frecuentes
¿Se grabarán las sesiones?
Sí, las sesiones quedarán grabadas, para su posterior consulta siempre que quieras.
¿Podré repetir los ejercicios después del taller?
Sí, tendrás acceso al código y la documentación para poder revisar y repetir los ejercicios cuando lo necesites.
¿Necesito tener experiencia previa con las Core Web Vitals?
Sí, es necesario tener conocimientos básicos de las Core Web Vitals, ya que nos centraremos en la detección y solución de problemas específicos.