Menos esperamás respuesta

Medir y optimizar lo que percibe el usuario: Core Web Vitals, critical rendering path, imágenes, JavaScript y caché. Diagnosticar por qué una web va lenta y arreglarlo.

Empezar

Acceso al curso completo, ejercicios y material de entrevista.

<!-- Script bloqueante: para el render -->
<script src="app.js"></script>

<!-- defer: descarga en paralelo, ejecuta al final -->
<script src="app.js" defer></script>

→bloqueante: el usuario mira una pantalla en blanco

→defer: el HTML se pinta sin esperar al JS

⧗El JS en el head sin defer mata el First Paint

<!-- Formato moderno, tamaño justo y sin saltos -->
<img
  src="hero.avif"
  width="1200" height="630"
  loading="lazy"
  fetchpriority="high" />

→AVIF pesa ~50% menos que el JPEG equivalente

→width/height reservan el hueco: CLS = 0

⧗La imagen sin dimensiones empuja el layout (CLS)

# Medir antes y después de cada cambio
$ npx lighthouse https://miweb.com --only-categories=perf

→LCP 1.8 s (bueno: < 2.5 s)

→INP 120 ms (bueno: < 200 ms)

→CLS 0.02 (bueno: < 0.1)

⧗Sin medir, optimizas a ciegas

Orientado a entrevistas

No solo optimizas. Sabes medir el impacto y defenderlo con datos.

Banco orientado a la entrevista técnica frontend: preguntas reales sobre Core Web Vitals, critical rendering path y trade-offs de optimización, los errores que delatan a un junior y retos de diagnosticar y arreglar una página lenta.

Preguntas

Preguntas reales de entrevistas técnicas.

Errores comunes

Lo que delata a un junior frente al entrevistador.

Retos de debug

Páginas lentas para diagnosticar y arreglar.

Qué vas a aprender

De una página lenta a métricas que mejoran la experiencia real

Los Core Web Vitals

LCP, INP y CLS: qué miden, qué los empeora y cómo arreglarlos.

El critical rendering path

Del HTML al primer píxel: qué bloquea el render y cómo desbloquearlo.

Imágenes, fuentes y JS

Formatos modernos, lazy loading, code splitting y bundles que pesan menos.

El hilo principal fluido

Long tasks, Web Workers, reflow/repaint y animar sin bloquear la UI.

Red, caché y CDN

HTTP/2 y 3, Cache-Control, CDN y dónde encaja cada estrategia de render.

Medir y no regresar

Lighthouse, perfiles de DevTools, presupuestos y monitorización con usuarios reales.