wandres.dev
Core Web Vitals y el hilo principal

Domina Rendimiento Web
hasta nivel dios

Hacer que vaya rápido de verdad: LCP, INP y CLS, la red y la caché, el coste del JavaScript, el pipeline de render, memoria y estrategias de carga.

La ruta

39 niveles, de novato a dios

Cada nivel construye sobre el anterior. Sin saltos, sin huecos.

Ontología Nivel 0 · El mapa del rendimiento web

Qué significa rápido, las tres fases (carga, interacción, estabilidad), y el mapa completo de causas y remedios.

Mapa mentalOntologíaFases

La percepción del tiempo Nivel 1 · Qué siente el usuario

Los umbrales de percepción humana, por qué la métrica no es el sentimiento, y el rendimiento percibido.

PercepciónUmbralesRAIL

Core Web Vitals Nivel 2 · LCP, INP y CLS

Qué mide cada una exactamente, los umbrales, por qué INP reemplazó a FID, y qué NO capturan.

LCPINPCLS

Campo y laboratorio Nivel 3 · RUM frente a sintético

CrUX y los datos reales, Lighthouse y su simulación, por qué difieren, y cuál manda para tomar decisiones.

CrUXRUMLighthouse

Medir en producción Nivel 4 · La librería web-vitals y los percentiles

Instrumentar el sitio, enviar con sendBeacon, por qué el p75 y no la media, y segmentar por dispositivo.

web-vitalsp75Beacon

La red Nivel 5 · Latencia, ancho de banda y el RTT

Por qué la latencia domina, el handshake, el DNS, y por qué duplicar el ancho de banda casi no ayuda.

RTTLatenciaDNS

HTTP moderno Nivel 6 · De 1.1 a 3 y QUIC

El head-of-line blocking en cada versión, la multiplexación, QUIC sobre UDP, y qué cambia en la práctica.

HTTP/2QUICHOL

Caché HTTP Nivel 7 · Las cabeceras que importan

Cache-Control por dentro, immutable, stale-while-revalidate, ETag, y la estrategia de nombres con hash.

Cache-ControlSWRETag

Compresión Nivel 8 · gzip, Brotli y Zstd

Qué comprime bien y qué no, los niveles y su coste, la compresión estática, y el estado de Zstd en la web.

BrotliZstdNiveles

La ruta crítica Nivel 9 · Qué bloquea el primer pintado

El CSS bloqueante, el JS bloqueante, defer y async, y el modelo mental de la ruta crítica de render.

CRPBloqueodefer

Prioridades de recursos Nivel 10 · preload, preconnect, fetchpriority

Las pistas al navegador, cuándo ayudan y cuándo hacen daño, y la prioridad implícita de cada tipo.

preloadpreconnectfetchpriority

Optimizar LCP Nivel 11 · El elemento más grande

Identificarlo, el descubrimiento temprano, la imagen del hero, y las cuatro subpartes del LCP.

LCPHeroDescubrimiento

Imágenes I Nivel 12 · Formatos y compresión

AVIF, WebP y JPEG, la calidad perceptual, el elemento picture, y elegir formato por tipo de imagen.

AVIFWebPpicture

Imágenes II Nivel 13 · Responsive, lazy y placeholders

srcset y sizes de verdad, loading lazy y sus trampas, decoding, y los placeholders que no causan CLS.

srcsetlazyLQIP

Vídeo y media Nivel 14 · El recurso más pesado

Los códecs y contenedores, el streaming adaptativo, preload metadata, y sustituir GIF por vídeo.

CódecsHLSpreload

JavaScript I Nivel 15 · El coste real de un byte de JS

Descarga, parseo, compilación y ejecución: por qué un KB de JS cuesta mucho más que un KB de imagen.

ParseCompilarCoste

JavaScript II Nivel 16 · Presupuesto y análisis del bundle

Fijar un performance budget, analizar el bundle, encontrar la dependencia gorda y el coste de las polyfills.

BudgetBundleAnálisis

Code splitting Nivel 17 · Cargar lo que hace falta

La división por ruta y por interacción, el import dinámico, el preload del chunk, y el patrón de isla.

Splittingimport()Islas

Tree shaking Nivel 18 · Eliminar lo muerto

Por qué depende de ESM, sideEffects, qué lo rompe, y verificar que de verdad se eliminó.

Tree shakingESMsideEffects

El hilo principal Nivel 19 · Long tasks y bloqueo

Qué es una long task, el TBT, por qué bloquear 200ms arruina el INP, y cómo encontrarlas.

Long taskTBTBloqueo

Ceder el hilo Nivel 20 · yield, scheduler y las tareas

scheduler.yield y postTask, el patrón de trocear trabajo, isInputPending, y las prioridades de tarea.

scheduleryieldpostTask

Optimizar INP Nivel 21 · La interacción que responde

Las tres partes del INP, separar respuesta visual de trabajo pesado, y el patrón de doble rAF.

INPInput delayRespuesta

Web Workers Nivel 22 · Sacar el trabajo del hilo

Qué se puede mover, el coste de postMessage, los transferables, Comlink, y los casos donde no compensa.

WorkerTransferableComlink

Optimizar CLS Nivel 23 · El layout que no salta

Reservar espacio con aspect-ratio, las fuentes y su métrica, el contenido inyectado, y size-adjust.

CLSaspect-ratiosize-adjust

Fuentes y rendimiento Nivel 24 · El texto que aparece rápido

La cadena de carga de una fuente, font-display, el preload, los descriptores de ajuste y la fuente del sistema.

font-displaypreloadFallback

Renderizado I Nivel 25 · El pipeline de píxeles

Style, layout, paint y composite, qué dispara cada etapa, y leer el waterfall de un frame.

PipelineReflowRepaint

Renderizado II Nivel 26 · Layout thrashing y el DOM

La lectura forzada del layout, el patrón leer-luego-escribir, las propiedades que fuerzan sincronía.

ThrashingForced syncDOM

Renderizado III Nivel 27 · contain y content-visibility

Aislar subárboles del layout, renderizar solo lo visible, contain-intrinsic-size y el efecto real.

containcontent-visibilityAislar

Listas grandes Nivel 28 · Virtualización y paginación

Por qué 10.000 nodos matan la página, la ventana virtual, el scroll infinito y sus problemas de a11y.

VirtualVentanaInfinito

Memoria Nivel 29 · Fugas y presión

El heap en DevTools, los tres snapshots, los detached nodes, los listeners que nunca se van y measureUserAgentSpecificMemory.

HeapFugasDetached

Estrategias de render Nivel 30 · SSR, SSG, ISR y CSR

El coste de cada una en las métricas, el streaming, la hidratación como problema, y el árbol de decisión.

SSRSSGHidratación

Hidratación Nivel 31 · El impuesto del SSR

Por qué hidratar es caro, la hidratación parcial y progresiva, la resumibilidad, y las islas.

HidrataciónParcialIslas

El edge y la CDN Nivel 32 · Acercar el byte al usuario

Qué se puede cachear en el borde, el cache key, la revalidación, y el cómputo en el edge.

CDNEdgeCache key

Service Workers Nivel 33 · Control total de la red

El ciclo de vida, las estrategias de caché, el app shell, y el riesgo de un SW mal desplegado.

SWEstrategiasCiclo

Terceros Nivel 34 · El código que no controlas

Medir el coste de cada script de terceros, el facade pattern, Partytown, y la negociación con marketing.

TercerosFacadePartytown

Rendimiento en móvil Nivel 35 · El dispositivo real de tus usuarios

El throttling de CPU y red, el thermal throttling, la memoria limitada, y probar en gama baja.

MóvilThrottlingGama baja

Rendimiento en CI Nivel 36 · Evitar la regresión

Lighthouse CI, los presupuestos que fallan el build, el bundle diff en el PR, y qué medir en cada commit.

CIBudgetRegresión

El caso de negocio Nivel 37 · Convertir milisegundos en dinero

Los estudios que correlacionan velocidad y conversión, cómo medirlo en tu producto, y cómo presentarlo.

NegocioConversiónDatos

Nivel Dios Nivel 38 · Síntesis del rendimiento web

El método completo de diagnóstico, el árbol de decisión por síntoma, la cultura de rendimiento en un equipo, y hacia dónde va el rendimiento web.

SíntesisMétodoCultura
195lecciones
39niveles
0→∞de cero a dios

¿Listo para dominar Rendimiento Web?

Empieza por los fundamentos y sube nivel a nivel hasta el dominio total.

Comenzar el camino →