Ingeniero FrontendAvanzado8 módulos~4.0 horas prácticas3 modos de aprendizaje
Rendimiento y entrega del Frontend
Convertí Atlas Market, una experiencia de comercio pulida pero lenta, en un frontend de producción rápido y observable midiendo los cuellos de botella reales, mejorando Core Web Vitals, modelando bundles y recursos, y aplicando presupuestos de rendimiento en CI.
// Lo que podrás hacer- Conectá los recorridos de usuario, datos de campo, trazas de laboratorio y presupuestos
- Mejorá la latencia del documento, el descubrimiento de LCP y el bloqueo de renderizado
- Entregá las imágenes, fuentes y dimensiones correctas sin CLS
- Inspeccioná el grafo de módulos, dividí intencionalmente y recuperá chunks obsoletos
8 módulos, hechos para ejecutar
Cada módulo incluye código ejecutable. Expande cualquiera para ver su contenido.
00IntroducciónLa investigación de rendimiento que vas a liderar30 min
Preguntas que responde este módulo
- ¿Cómo podés ver el recorrido completo de optimización de Atlas Market?
- ¿Cómo podés elegir la ruta de aprendizaje que se adapte a tus objetivos?
Empezar móduloVista previa gratis
01Medí antes de optimizarConectá los recorridos de usuario, datos de campo, trazas de laboratorio y presupuestos30 min
Preguntas que responde este módulo
- ¿Cómo podés definir los recorridos de usuario críticos antes de elegir métricas de rendimiento?
- ¿Cómo podés diferenciar los Core Web Vitals de campo de los diagnósticos de laboratorio controlados?
02Carga y la ruta críticaMejorá la latencia del documento, el descubrimiento de LCP y el bloqueo de renderizado30 min
Preguntas que responde este módulo
- ¿Cómo podés separar la latencia del documento del tiempo de descubrimiento de recursos del navegador?
- ¿Cómo podés evitar que CSS crítico y las fuentes creen demoras de render evitables?
03Recursos responsivos y diseño estableEntregá las imágenes, fuentes y dimensiones correctas sin CLS30 min
Preguntas que responde este módulo
- ¿Cómo podés crear contratos precisos de `srcset` y `sizes` para imágenes responsivas?
- ¿Cómo podés reservar la geometría del medio con dimensiones intrínsecas y aspect-ratio?
04Entrega de JavaScript y bundles por rutaInspeccioná el grafo de módulos, dividí intencionalmente y recuperá chunks obsoletos30 min
Preguntas que responde este módulo
- ¿Cómo podés inspeccionar la salida de Vite 8 y Rolldown mediante el manifiesto de bundle generado?
- ¿Cómo podés dividir el código por rutas de usuario con imports directos estables?
05Rendimiento de interacciónDiagnosticá INP, tareas largas, costo de renderizado y contención del hilo principal30 min
Preguntas que responde este módulo
- ¿Cómo podés separar el retraso de entrada, el procesamiento del manejador de eventos y el retraso de presentación en una traza de interacción?
- ¿Cómo podés elegir un Web Worker solo cuando el trabajo de CPU aislado justifique el costo de mensajería y serialización?
06Presupuestos, telemetría y entregaProtegé las mejoras con instrumentación en campo y puertas de despliegue automatizadas30 min
Preguntas que responde este módulo
- ¿Cómo podés convertir los objetivos de performance de Atlas Market en compuertas determinísticas de build y CI?
- ¿Cómo podés recolectar telemetría de producción respetuosa con la privacidad para LCP, INP y CLS desde los recorridos reales?
07Síntesis de patronesVelo en acción: demostrá el recorrido optimizado en condiciones de producción30 min
Preguntas que responde este módulo
- ¿Cómo podés ejecutar la puerta completa automatizada de performance y build de producción?
- ¿Cómo podés conectar cada decisión de release con evidencia reproducible de laboratorio, umbrales de campo y un owner explícito?
¿Listo para construir tu primer agente? Rendimiento y entrega del Frontend?
Empezá con el Módulo 0 gratis y desbloqueá la ruta completa con un plan Pro.