Core Web Vitals y Performance Web
Optimización de performance web con enfoque en Core Web Vitals: diagnóstico, optimización de LCP/INP/CLS, monitoring continuo y el impacto directo de la performance en SEO y conversión.
Dirigido a: Desarrolladores web con proyectos en producción, Frontend developers con responsabilidad en performance, Tech leads con métricas de Core Web Vitals pobres
Antes de empezar
JavaScript y CSS intermedios Acceso a un sitio web con tráfico real Familiaridad básica con Chrome DevTools
Objetivos
- Diagnosticar LCP con datos de campo y laboratorio y priorizar mejoras hacia el umbral de 2,5 s en el percentil 75
- Eliminar el CLS a menos de 0.1 en todas las páginas principales
- Medir INP en el percentil 75 de las visitas y optimizar interacciones hacia el umbral de 200 ms
- Implementar monitorización continua que detecta regresiones automáticamente
Programa
- Cómo funciona el rendimiento web: renderizado crítico, recursos bloqueantes
- Core Web Vitals: qué miden, por qué importan a Google y cómo se miden en campo
- Herramientas: Chrome DevTools, Lighthouse, PageSpeed Insights, WebPageTest
- CrUX vs Lighthouse: datos de campo vs datos de laboratorio
- Las cinco causas más comunes de LCP lento
- Optimización de recursos: imágenes, fuentes y CSS crítico
- Preloads, prefetches y hints de recursos
- CDN y edge caching para LCP
- Taller: análisis y mejora del LCP del sitio del participante
- Por qué ocurren los layout shifts y cómo identificarlos
- Dimensiones de imágenes y videos: la solución más común
- Web fonts y CLS: font-display y size-adjust
- Ads, embeds y contenido dinámico: cómo reservar espacio
- Qué mide INP: latencia de interacción y tareas del hilo principal
- JavaScript long tasks: cómo identificar y dividir
- Event handlers y debouncing
- React y frameworks: optimizaciones específicas para INP
- Lighthouse CI en GitHub Actions: detección automática de regresiones
- Real User Monitoring (RUM) con herramientas gratuitas
- Search Console: alertas de Core Web Vitals
- Proceso de revisión de performance en el ciclo de desarrollo
Cómo solicitar este programa
La ficha es una referencia para preparar tu formación. En el diagnóstico acordamos el nivel del equipo, docente, ejercicios, modalidad, evaluación, calendario y presupuesto. La disponibilidad y la bonificación se confirman en la propuesta.
Consulta cómo funciona la formación y quién dirige Academy.
Entregables
- Core Web Vitals en verde en Search Console para las páginas principales
- Lighthouse score 90+ en mobile para las páginas principales
- Sistema de monitorización continua activo
- Documentación de optimizaciones implementadas
Solicitar información
*La bonificación depende del crédito FUNDAE disponible.