GuíaIntermedio
Guía de Performance y Despliegue Fullstack
Aprende a hacer una app frontend rápida y a desplegarla a producción: qué significa "rápido" de forma medible con los Core Web Vitals (LCP, INP, CLS), las estrategias de renderizado (CSR, SSR, SSG, ISR) y dónde corre cada pieza de código, el critical rendering path y qué bloquea la primera pintura, el costo real del JavaScript (bundle, code-splitting, lazy loading, re-render), imágenes y assets con formatos modernos y caché HTTP, cómo medir y perfilar con Lighthouse y el panel Performance, y el despliegue mismo: build de producción, hosting, variables de entorno, CDN/edge, CI/CD y rollbacks. El eje es medir antes de optimizar: la performance no es magia ni micro-trucos, es un presupuesto que se mide, se diagnostica y se defiende. Cada módulo ejecuta en Node.js un modelo de la métrica o el mecanismo en juego —scoring de Web Vitals, tamaño de bundle con code-splitting, tiempo al primer render, decisiones de caché HTTP, ahorro de bytes en imágenes, un presupuesto de performance— para verificar el razonamiento con números, no con intuición. El hilo conductor es el storefront de Mercado: se mide su baseline, se optimiza (code-split del carrito, imágenes en AVIF con `srcset`, caché de assets, critical path), se cumple un presupuesto, y se despliega. Cierra el ecosistema Fullstack de NIEVA, apoyándose en la Guía de Sistemas de UI e Implementación de Diseño.
- 64
- lecciones
- 8
- módulos
- Inglés · Español
- disponible en
- Sí
- certificado
- Gratis
- acceso
Resultados
Lo que vas a poder hacer
- Medir qué tan rápida es una app con los Core Web Vitals (LCP, INP, CLS) y sus umbrales oficiales, antes de optimizar nada
- Elegir estrategia de renderizado por ruta (CSR, SSR, SSG, ISR) según su impacto en LCP e INP
- Entender el critical rendering path del navegador y usar resource hints (`preload`, `preconnect`, `prefetch`) y carga de fuentes con criterio
- Reducir el costo del JavaScript con code-splitting, lazy loading, tree-shaking, y memoización de React donde corresponde
- Optimizar imágenes y assets con formatos modernos (AVIF/WebP), `srcset` y caché HTTP (`Cache-Control`, `ETag`)
- Perfilar con Lighthouse y el panel Performance de DevTools, y medir Web Vitals en campo (RUM)
- Definir un presupuesto de performance y hacerlo cumplir en CI antes de que rompa el build
- Desplegar una app a producción: build, hosting estático o de servidor, variables de entorno, CDN/edge, CI/CD y rollbacks
- Medir, optimizar y desplegar el storefront completo de Mercado cumpliendo un presupuesto de performance real
Antes de empezar
Qué necesitas traer
Es para ti si...
- Desarrolladores frontend que construyeron una app funcional y necesitan hacerla rápida con datos, no con intuición
- Devs que ya usan React, Next.js o un sistema de diseño y quieren cerrar el ciclo con performance y despliegue
- Quienes necesitan defender decisiones de performance con métricas (Core Web Vitals) frente a un equipo o un cliente
- Equipos que van a desplegar su primera app a producción y necesitan el criterio de CI/CD, variables de entorno y rollbacks
Requisitos y materiales
- Una app React o Next.js funcional para optimizar, o haber completado la Guía de Next.js App Router y la Guía de Sistemas de UI
- JavaScript ES6+ y conceptos básicos de HTTP
- Node.js instalado para ejecutar los modelos de cada módulo
- Familiaridad con la terminal, npm y control de versiones básico con git
Contenido
El temario, módulo por módulo
Abre cualquiera para ver sus lecciones.
- Presentación de la guía: qué significa "rápido" y cómo se mide
- Por qué importa la performance (y por qué no se adivina)
- LCP: la carga (Largest Contentful Paint)
- INP: la interactividad (Interaction to Next Paint)
- CLS: la estabilidad visual (Cumulative Layout Shift)
- Lab vs field: dos formas de medir la misma métrica
- El presupuesto de performance: un contrato con números
- Proyecto: medir el baseline de Mercado y fijar su presupuesto
- Presentación del módulo: dónde y cuándo se renderiza tu página
- CSR: renderizar en el cliente
- SSR: renderizar en el servidor por request
- SSG: generar el HTML en el build
- ISR: regenerar el estático cada cierto tiempo
- Hidratación y el costo del JavaScript
- Elegir la estrategia por ruta
- Proyecto: la estrategia de renderizado por ruta del storefront de Mercado
- Presentación del módulo: qué bloquea el primer pintado
- Cómo carga una página el navegador
- El CSS que bloquea el render, y el critical CSS
- El JavaScript síncrono que frena el parser
- `async`, `defer` y los modos de cargar un script
- Resource hints: `preload`, `preconnect` y compañía
- Cargar fuentes sin que el texto desaparezca
- Proyecto: destrabar el critical path del storefront de Mercado
- Presentación del módulo: cuánto pesa el JavaScript
- El costo del JavaScript: por qué pesa doble
- Code-splitting y lazy loading: partir el bundle
- Tree-shaking: tirar el código que nadie usa
- El costo de las dependencias: medir antes de instalar
- El re-render de React desde el ángulo de performance
- Virtualizar listas largas: renderizar solo lo visible
- Proyecto: adelgazar el JavaScript del storefront de Mercado
- Presentación del módulo: imágenes, assets y caché
- Formatos de imagen modernos: los mismos píxeles, menos bytes
- Imágenes responsivas en bytes: servir la resolución justa
- Lazy loading de imágenes: no cargar lo que no se ve todavía
- Caché HTTP: la despensa del navegador
- ETags y revalidación: "¿cambió algo?" → "no, usa el que tienes"
- Fingerprinting y la CDN: cachear "para siempre" y aun así actualizar
- Proyecto: optimizar los assets del storefront de Mercado
- Presentación del módulo: medir, diagnosticar y defender el presupuesto
- Lighthouse: el chequeo de lab, y cómo leerlo
- El panel Performance: la radiografía del hilo principal
- Encontrar el cuello de botella: de la medición al tratamiento
- Datos de campo: la lib web-vitals, CrUX y el p75
- Lab vs field en la práctica: cuando el verde y el rojo discrepan
- El presupuesto en CI: la alarma que rompe el build
- Proyecto: medir, diagnosticar y blindar el storefront de Mercado
- Presentación del módulo: de "medido y optimizado" a "publicado en producción"
- El build de producción: de código legible a código listo para servir
- Hosting estático vs servidor: dónde vive el build
- Variables de entorno y secretos: lo público, lo privado, y dónde se decide
- CDN y edge: acercar el build a cada usuario
- Pipelines de CI/CD: de un commit a producción, sin manos
- Rollbacks y deploys atómicos: o abres con todo listo, o no abres
- Proyecto: el pipeline de deploy del storefront de Mercado
- Presentación del capstone: hacer rápido y desplegar Mercado, todo junto
- Medir el baseline de Mercado
- Destrabar el critical path de Mercado
- Adelgazar el JavaScript de Mercado
- Imágenes y caché: el mayor foco, resuelto
- Un presupuesto que rompe el CI
- Desplegar sin sustos
- Proyecto final: hacer rápido y desplegar el storefront de Mercado
Dudas frecuentes
Lo que suele preguntarse
Sin límite. Es una guía gratuita: entras cuando quieras, las veces que quieras.
No. Los módulos están ordenados de menos a más, pero puedes saltar al que necesites. Tu progreso se guarda por lección.
Lo que haga falta está en «Qué necesitas traer», arriba. Si no aparece nada ahí, puedes empezar desde cero.
En el grupo de WhatsApp del Club, y cada quince días hay un live con un instructor donde se resuelven dudas en vivo.
Sí. Al terminar todas las lecciones se emite automáticamente, con un código verificable que puedes compartir en LinkedIn.
Empieza cuando quieras
Lo que dicen los estudiantes
Estas reseñas son de estudiantes inscritos que completaron al menos el 50% del curso. Moderamos las reseñas solo por motivos de contenido (spam, lenguaje ofensivo, datos personales), nunca por ser críticas o negativas.
Aún no hay reseñas aprobadas.
¡Sé el primero en compartir tu experiencia!