★★★★★ Mid → Senior 🔥 Obligatorio
Core Web Vitals: LCP, INP y CLS LCP mide carga percibida, INP capacidad de respuesta y CLS estabilidad visual. Deben observarse en datos reales, no solo laboratorio.
Estado No leído En progreso Repasado Dominado 10–15 min
🟢 Base 🟡 Entrevista 🔴 Senior
Qué debes entender LCP mide carga percibida, INP capacidad de respuesta y CLS estabilidad visual. Deben observarse en datos reales, no solo laboratorio.
Cómo funciona Los percentiles de campo muestran experiencia de usuarios reales. Lighthouse ayuda a diagnosticar, pero no reemplaza RUM.
Ejemplo LCP: imagen hero
INP: interacción lenta
CLS: banner que desplaza contenidoMostrar respuesta Resultado Tres dimensiones distintas
Mostrar explicación Qué está pasando Cada métrica requiere causas y soluciones diferentes; no existe una única puntuación de performance.
Pregunta típica ¿Qué optimizarías primero?
Respuesta Senior Mediría datos de campo y segmentaría por ruta/dispositivo. Priorizaría el cuello con mayor impacto de usuario y negocio, no la métrica más fácil.
★★★★★ Mid 🔥 Muy común
Code splitting y lazy loading Code splitting divide bundles; lazy loading retrasa carga hasta que una ruta o función lo necesita.
Estado No leído En progreso Repasado Dominado 10–15 min
🟢 Base 🟡 Entrevista 🔴 Senior
Qué debes entender Code splitting divide bundles; lazy loading retrasa carga hasta que una ruta o función lo necesita.
Cómo funciona Demasiados chunks producen overhead; el objetivo es reducir trabajo crítico sin crear waterfalls.
Ejemplo const Settings = lazy(() => import("./Settings"));Mostrar respuesta Resultado Settings se carga cuando se renderiza
Mostrar explicación Qué está pasando El módulo queda fuera del bundle inicial y Suspense muestra un fallback durante la carga.
Pregunta típica ¿Dónde pondrías límites de code splitting?
Respuesta Senior En rutas y features pesadas con baja probabilidad inicial; mediría caché, waterfalls y experiencia de navegación.
Repasar bundles Suspense preloading
★★★★★ Mid 🔥 Alto impacto
Imágenes, fuentes y recursos críticos Imágenes suelen dominar bytes y LCP. Formato, dimensiones, responsive images y prioridad importan.
Estado No leído En progreso Repasado Dominado 10–15 min
🟢 Base 🟡 Entrevista 🔴 Senior
Qué debes entender Imágenes suelen dominar bytes y LCP. Formato, dimensiones, responsive images y prioridad importan.
Cómo funciona Reservar width/height evita CLS. preload y fetchpriority deben usarse solo para recursos realmente críticos.
Ejemplo <img src="hero.webp" width="1200" height="600" fetchpriority="high" alt="" />Mostrar respuesta Resultado Espacio reservado y alta prioridad
Mostrar explicación Qué está pasando El navegador conoce dimensiones antes de descargar y puede priorizar la imagen LCP.
Pregunta típica ¿Por qué no lazy-load la imagen hero?
Respuesta Senior Porque retrasa el recurso probablemente responsable de LCP. Lazy loading es para contenido fuera del viewport.
Repasar srcset AVIF/WebP preload
★★★★★ Senior 🔥 Senior
Long tasks, memoization y virtualization La performance runtime depende del trabajo en main thread. Memoización evita trabajo repetido; virtualización evita renderizar miles de nodos.
Estado No leído En progreso Repasado Dominado 10–15 min
🟢 Base 🟡 Entrevista 🔴 Senior
Qué debes entender La performance runtime depende del trabajo en main thread. Memoización evita trabajo repetido; virtualización evita renderizar miles de nodos.
Cómo funciona Una long task bloquea input y paint. Dividir trabajo y reducir DOM suele aportar más que microoptimizaciones.
Ejemplo render 10,000 rows → virtualize 30 visible rowsMostrar respuesta Resultado Menos DOM y trabajo por actualización
Mostrar explicación Qué está pasando La lista conserva datos completos, pero monta solo una ventana visible y overscan.
Pregunta típica ¿Memoización o virtualización?
Respuesta Senior Memoización reduce recomputación; virtualización reduce cantidad de elementos. Para listas grandes, la segunda suele ser el cambio estructural de mayor impacto.
Repasar INP scheduler DOM size
★★★★★ Senior 🔥 Obligatorio
Medición y profiling Optimizar sin medir puede mover el problema o añadir complejidad. Se necesita baseline, hipótesis, cambio y validación.
Estado No leído En progreso Repasado Dominado 10–15 min
🟢 Base 🟡 Entrevista 🔴 Senior
Qué debes entender Optimizar sin medir puede mover el problema o añadir complejidad. Se necesita baseline, hipótesis, cambio y validación.
Cómo funciona Performance panel, React Profiler, bundle analyzer y RUM responden preguntas distintas.
Ejemplo Baseline 2.4s → cambio → 1.7sMostrar respuesta Mostrar explicación Qué está pasando La comparación debe usar condiciones reproducibles y observar regresiones laterales.
Pregunta típica ¿Cómo investigarías una pantalla lenta?
Respuesta Senior Separaría red, scripting, layout y render; reproduciría, perfilaría, identificaría el camino crítico y validaría con métricas antes/después.
Repasar budgets observability experiments