Desarrollo Frontend · FRO-195

Rendimiento web y Core Web Vitals

Medir con datos de campo y laboratorio para decidir qué optimización compensa de verdad

Próximamente Avanzado 7 módulos · 32 clases

Formato asíncrono Desarrollo, Empresa / PYME JavaScript, CSS

DESARROLLO

Lo que aprenderás

Interpretar LCP, INP y CLS distinguiendo los datos de campo de las mediciones sintéticas de laboratorio
Auditar una carga con Lighthouse y el panel Performance leyendo la cascada de peticiones
Reducir el trabajo del hilo principal troceando tareas largas de JavaScript y aplazando scripts no críticos
Eliminar desplazamientos de diseño reservando espacio para imágenes, anuncios y fuentes web
Aplicar un presupuesto de rendimiento en la integración continua que bloquee regresiones de peso y métricas
Priorizar la carga con preload, fetchpriority, imágenes responsive y CSS crítico en línea
Justificar ante negocio qué mejora de métrica se traduce en conversión y qué cuesta cada cambio

Contenido del curso

7 módulos · 32 clases en vídeo · práctica guiada en cada módulo

Módulo 1 · Qué mide realmente el rendimiento web 5 clases

Presentación del curso y del sitio de prácticas
Percepción de velocidad frente a tiempo total de carga
LCP, INP y CLS explicados con ejemplos visuales
Datos de campo y datos de laboratorio: cuándo usar cada uno
Preparar el entorno de medición en el navegador

Módulo 2 · Herramientas de diagnóstico 5 clases

Lighthouse: leer el informe sin quedarse en la nota global
El panel Performance paso a paso
La cascada de red y la ruta crítica de renderizado
Medir en dispositivos reales con limitación de CPU y red
Instrumentar métricas propias con la API de rendimiento

Módulo 3 · Optimizar el pintado principal 5 clases

Identificar el elemento LCP de una página
Formatos de imagen modernos y tamaños responsive
Precarga de recursos críticos y fetchpriority
CSS crítico en línea y carga diferida del resto
Estrategias de carga de fuentes sin bloqueo

Módulo 4 · Interactividad y hilo principal 5 clases

De qué se compone realmente el INP
Tareas largas: cómo detectarlas y cómo trocearlas
Reducir el paquete de JavaScript con división de código
Aplazar y cargar scripts de terceros bajo control
Delegación de eventos y trabajo fuera del hilo principal

Módulo 5 · Estabilidad visual 4 clases

Causas habituales de desplazamiento de diseño
Reservar espacio para imágenes, iframes y anuncios
Animaciones que no provocan reflujo
Contenido insertado dinámicamente sin romper la maqueta

Módulo 6 · Presupuesto de rendimiento y regresiones 4 clases

Definir umbrales por página y por tipo de recurso
Lighthouse CI en la canalización de integración
Alertas cuando una métrica se degrada
Cómo presentar el impacto de negocio de cada mejora

Módulo 7 · Caso práctico de auditoría completa 4 clases

Recogida de métricas iniciales y priorización
Aplicación de las tres mejoras de mayor impacto
Segunda medición y análisis de diferencias
Informe final de auditoría para dirección técnica

Requisitos

Experiencia previa desarrollando interfaces con JavaScript y CSS
Conocer el funcionamiento básico de HTTP, el DOM y las herramientas de desarrollo del navegador
Basta con un navegador de escritorio actualizado para todas las prácticas

Descripción

Un sitio que carga lento pierde usuarios antes de mostrar nada, pero la mayoría de equipos optimiza a ciegas: minifican, añaden una caché y esperan que mejore. El problema no es la falta de técnicas, sino la falta de medición. Este curso parte de las métricas que Google usa para evaluar la experiencia de carga y enseña a leerlas antes de tocar una línea de código.

Se trabaja sobre una aplicación con problemas reales de rendimiento: imágenes sin dimensionar, fuentes que provocan saltos, paquetes de JavaScript que bloquean la interacción. Cada módulo diagnostica con el panel Performance, aplica una corrección concreta y vuelve a medir para comprobar el efecto. Al final se monta un presupuesto de rendimiento automatizado que falla la construcción cuando una métrica se degrada.

El resultado es un método repetible que sirve tanto para auditar un sitio ajeno como para mantener el propio bajo control. Encaja con perfiles de desarrollo que necesitan argumentar prioridades técnicas y con responsables de producto que deben decidir dónde invertir el esfuerzo. Es la base natural para continuar con optimización de servidor, estrategias de caché y arquitecturas de renderizado.

¿Para quién es este curso?

Desarrolladoras y desarrolladores frontend que mantienen una aplicación en producción con quejas de lentitud
Responsables técnicos de comercio electrónico que necesitan justificar inversión en rendimiento
Equipos de PYME que gestionan su propio sitio corporativo y quieren dejar de optimizar por intuición