Programa del Curso
Fundamentos técnicos
- Cómo funcionan los navegadores: parsing, rendering, painting
- Critical rendering path y recursos bloqueantes
- Core Web Vitals: LCP, FID, CLS explicados con casos reales
- Herramientas de medición: Lighthouse, WebPageTest, Chrome UX Report
Técnicas de optimización
- Optimización de imágenes: formatos modernos, responsive images, lazy loading
- JavaScript: minificación, tree shaking, code splitting, defer/async
- CSS: critical CSS, eliminación de CSS no usado, minificación
- Fonts: subsetting, font-display, preload estratégico
- Configuración de servidor: caché, compresión, HTTP/2
- CDN: cuándo usar, cómo configurar correctamente
Laboratorio práctico: optimización en vivo de tu sitio con medición de resultados
Descripción Completa
Cada segundo de retraso en la carga cuesta visitantes. Google lo sabe, tus usuarios lo sienten, y tú lo pagas en tráfico perdido.
Pero optimizar rendimiento no es solo comprimir imágenes. Es entender cómo funcionan los navegadores, qué bloquea el renderizado, dónde están los cuellos de botella reales en tu sitio específico.
Diagnóstico real
Empezamos midiendo correctamente. Lighthouse te da números, pero ¿qué significan? ¿Por qué tu LCP es de 4.2 segundos? ¿Qué está bloqueando el First Input Delay?
Usaremos Chrome DevTools para hacer profiling real. Verás exactamente qué scripts tardan más, qué recursos bloquean, dónde están las cascadas de carga problemáticas. No más adivinar.
- Optimización de recursos
- Compresión moderna (WebP, AVIF), lazy loading inteligente, critical CSS, code splitting
- Server-side
- Configuración de caché HTTP, CDN, compresión gzip/brotli, HTTP/2 push
La parte práctica es donde se pone interesante. Optimizamos sitios reales de los participantes. Wordpress, React, Vue, lo que traigas. Aplicamos las técnicas y medimos el impacto inmediato.
He visto sitios pasar de 8 segundos a 1.2 segundos aplicando esto. El cambio en tráfico orgánico llega dos o tres semanas después, pero llega.