Saltar al contenido
wandres.dev
Iniciar sesión

Rendimiento web

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.

39 unidades · 195 temasEmpezar la ruta
  1. 00

    Nivel 0

    5 temas
    1. 01Qué significa rápidohechoen curso
    2. 02Las tres fases: carga, interacción, estabilidadhechoen curso
    3. 03La cadena de causas: del clic al píxelhechoen curso
    4. 04El mapa de remedioshechoen curso
    5. 05Los siete mitos que hay que desmontarhechoen curso
  2. 01

    Nivel 1

    5 temas
    1. 01Los tres umbrales de la percepción humanahechoen curso
    2. 02El catálogo de latenciashechoen curso
    3. 03RAIL: cuatro contextos, cuatro presupuestoshechoen curso
    4. 04Rendimiento percibido frente a rendimiento medidohechoen curso
    5. 05La barra de progreso honestahechoen curso
  3. 02

    Nivel 2

    5 temas
    1. 01Qué son las Web Vitals y cuáles son las Corehechoen curso
    2. 02LCP con precisión: qué elementos son candidatoshechoen curso
    3. 03INP con precisión: la ventana, el percentil y las tres parteshechoen curso
    4. 04CLS con precisión: la ventana de sesión y la puntuaciónhechoen curso
    5. 05De dónde salen los umbrales y qué no capturanhechoen curso
  4. 03

    Nivel 3

    5 temas
    1. 01Campo y laboratorio: dos preguntas distintashechoen curso
    2. 02CrUX: qué contiene y qué se deja fuerahechoen curso
    3. 03Lighthouse y su simulaciónhechoen curso
    4. 04Por qué campo y laboratorio nunca coincidenhechoen curso
    5. 05Cuál manda para decidirhechoen curso
  5. 04

    Nivel 4

    5 temas
    1. 01Instrumentar con la librería web-vitalshechoen curso
    2. 02Enviar los datos con sendBeacon y visibilitychangehechoen curso
    3. 03Por qué el percentil 75 y no la mediahechoen curso
    4. 04El build de atribución: de la métrica a la causahechoen curso
    5. 05Segmentar por dispositivo, red y tipo de páginahechoen curso
  6. 05

    Nivel 5

    5 temas
    1. 01Por qué el ancho de banda no es lo que importahechoen curso
    2. 02Anatomía de una petición: DNS, TCP y TLShechoen curso
    3. 03El arranque lento de TCP y los primeros 14 KBhechoen curso
    4. 04Medir la red desde el navegadorhechoen curso
    5. 05El presupuesto de viajes de ida y vueltahechoen curso
  7. 06

    Nivel 6

    5 temas
    1. 01HTTP/1.1 y el bloqueo de cabecera de líneahechoen curso
    2. 02HTTP/2: multiplexación y el límite que no resuelvehechoen curso
    3. 03QUIC y HTTP/3: por qué sobre UDPhechoen curso
    4. 04Los saludos, la reanudación y el riesgo del 0-RTThechoen curso
    5. 05Qué cambia en la práctica para un sitio realhechoen curso
  8. 07

    Nivel 7

    5 temas
    1. 01El modelo de caché HTTPhechoen curso
    2. 02Cache-Control directiva a directivahechoen curso
    3. 03immutable, stale-while-revalidate y stale-if-errorhechoen curso
    4. 04Validación: ETag, Last-Modified y las peticiones condicionaleshechoen curso
    5. 05Nombres con hash, Vary y la estrategia completahechoen curso
  9. 08

    Nivel 8

    5 temas
    1. 01Qué comprime bien y qué ya está comprimidohechoen curso
    2. 02gzip, Brotli y Zstandardhechoen curso
    3. 03Los niveles de compresión y su coste en CPUhechoen curso
    4. 04Compresión estática en el build frente a dinámicahechoen curso
    5. 05Diccionarios compartidos y compresión deltahechoen curso
  10. 09

    Nivel 9

    5 temas
    1. 01De bytes a píxeles: la ruta crítica de renderizadohechoen curso
    2. 02Por qué el CSS bloquea el renderizadohechoen curso
    3. 03El JavaScript bloqueante y el parserhechoen curso
    4. 04defer, async y módulos: el orden de ejecuciónhechoen curso
    5. 05El escáner de precarga: qué ve y cómo cegarlohechoen curso
  11. 10

    Nivel 10

    5 temas
    1. 01La prioridad implícita y fetchpriorityhechoen curso
    2. 02preconnect y dns-prefetchhechoen curso
    3. 03preload: declarar lo que el HTML escondehechoen curso
    4. 04prefetch y modulepreload: la navegación siguiente y el grafo de móduloshechoen curso
    5. 05Cuándo las pistas hacen dañohechoen curso
  12. 11

    Nivel 11

    5 temas
    1. 01Identificar el elemento LCP con códigohechoen curso
    2. 02Las cuatro subpartes del LCPhechoen curso
    3. 03El descubrimiento temprano del recursohechoen curso
    4. 04Eliminar el retraso de renderizadohechoen curso
    5. 05La imagen del hero, de principio a finhechoen curso
  13. 12

    Nivel 12

    5 temas
    1. 01AVIF, WebP, JPEG y PNG: qué es cada uno y qué soporte tiene en 2026hechoen curso
    2. 02La calidad perceptual y cómo elegirla sin ojohechoen curso
    3. 03El elemento picture y su orden de evaluaciónhechoen curso
    4. 04Negociar el formato con la cabecera Accepthechoen curso
    5. 05Elegir el formato según el tipo de imagenhechoen curso
  14. 13

    Nivel 13

    5 temas
    1. 01srcset: los descriptores w y x, y por qué no son intercambiableshechoen curso
    2. 02sizes y el algoritmo de selección: por qué casi todo el mundo lo escribe malhechoen curso
    3. 03loading=lazy: el umbral de distancia, la regla del LCP y las trampashechoen curso
    4. 04decoding y fetchpriority: los dos atributos que casi nadie ponehechoen curso
    5. 05Placeholders que no desplazan nada: color dominante, LQIP y blur hashhechoen curso
  15. 14

    Nivel 14

    5 temas
    1. 01Códecs y contenedores: qué codificar en 2026 y para quiénhechoen curso
    2. 02Streaming adaptativo: HLS, DASH y cuándo no hace falta ningunohechoen curso
    3. 03preload y poster: los dos atributos que deciden cuánto pesa un vídeo antes de reproducirsehechoen curso
    4. 04Reproducción automática: las condiciones exactas y qué hacer cuando fallahechoen curso
    5. 05Sustituir GIF por vídeo: los números del ahorro y la receta completahechoen curso
  16. 15

    Nivel 15

    5 temas
    1. 01Las cuatro fases de un byte de JavaScript: descarga, parseo, compilación, ejecuciónhechoen curso
    2. 02Un byte de JavaScript frente a un byte de imagenhechoen curso
    3. 03Compilación perezosa: cómo el motor evita compilar lo que no vas a llamarhechoen curso
    4. 04La caché de código: por qué la segunda visita es más rápida y la tercera más todavíahechoen curso
    5. 05El móvil de gama media frente a tu portátil: el factor que lo explica todohechoen curso
  17. 16

    Nivel 16

    5 temas
    1. 01Fijar un presupuesto de rendimiento y defenderlohechoen curso
    2. 02Analizar el bundle: leer el mapa de tamaños sin engañartehechoen curso
    3. 03Encontrar la dependencia gorda y decidir qué hacer con ellahechoen curso
    4. 04El coste de las polyfills y de los transpilados que ya no hacen faltahechoen curso
    5. 05Objetivos de compilación modernos: qué cambia cuando dejas de compilar hacia atráshechoen curso
  18. 17

    Nivel 17

    5 temas
    1. 01Dividir por ruta: el primer corte y el que más rindehechoen curso
    2. 02Dividir por interacción: cargar cuando el usuario demuestra intenciónhechoen curso
    3. 03import() dinámico: qué genera de verdad el empaquetadorhechoen curso
    4. 04Precargar el fragmento antes de necesitarlohechoen curso
    5. 05Cascadas de peticiones y el patrón de islahechoen curso
  19. 18

    Nivel 18

    5 temas
    1. 01Por qué el tree shaking depende de los módulos ES y no funciona con CommonJShechoen curso
    2. 02sideEffects en el package.json: la promesa que hace posible borrar un módulo enterohechoen curso
    3. 03Lo que rompe el recorte: efectos en el nivel superior, defineProperty y las claseshechoen curso
    4. 04Reexportaciones y ficheros barril: la comodidad que cuesta kilobyteshechoen curso
    5. 05Verificar que de verdad se eliminó, en vez de suponerlohechoen curso
  20. 19

    Nivel 19

    5 temas
    1. 01Qué es una long task y de dónde sale el umbral de 50 milisegundoshechoen curso
    2. 02El TBT y su relación con el INP: dos métricas del mismo problemahechoen curso
    3. 03Por qué bloquear el hilo arruina la interacción aunque la página ya esté pintadahechoen curso
    4. 04Encontrar las tareas largas con PerformanceObserver en producciónhechoen curso
    5. 05Las tareas largas en el panel de rendimiento: leer el flame charthechoen curso
  21. 20

    Nivel 20

    5 temas
    1. 01scheduler.yield(): qué hace, qué navegadores lo tienen y qué usar donde nohechoen curso
    2. 02scheduler.postTask() y las tres prioridades de tareahechoen curso
    3. 03El patrón de trocear trabajo largo con cesiónhechoen curso
    4. 04isInputPending(): ceder solo cuando alguien está esperandohechoen curso
    5. 05setTimeout de cero y por qué es la peor forma de cederhechoen curso
  22. 21

    Nivel 21

    5 temas
    1. 01Las tres partes del INP: convertir una métrica opaca en tres tareashechoen curso
    2. 02Reducir el retraso de entrada: liberar el hilo antes de que el usuario actúehechoen curso
    3. 03Acortar el procesamiento: separar la respuesta visual del trabajo pesadohechoen curso
    4. 04El retraso de presentación: cuando el cambio es caro de pintarhechoen curso
    5. 05Tres casos típicos: el filtro de una lista, el acordeón y el envío de formulariohechoen curso
  23. 22

    Nivel 22

    5 temas
    1. 01Qué trabajo se puede mover a un worker y qué nohechoen curso
    2. 02El coste de postMessage y la serialización estructuradahechoen curso
    3. 03Objetos transferibles y SharedArrayBuffer: mover sin copiarhechoen curso
    4. 04Comlink: hablar con el trabajador sin escribir plomeríahechoen curso
    5. 05Los casos donde el trabajador no compensahechoen curso
  24. 23

    Nivel 23

    5 temas
    1. 01De dónde sale tu CLS: atribuir cada décima a un elementohechoen curso
    2. 02Reservar espacio: los atributos, aspect-ratio y por qué funcionan juntoshechoen curso
    3. 03Por qué el intercambio de fuente desplaza el textohechoen curso
    4. 04size-adjust y los overrides: que la reserva ocupe lo mismohechoen curso
    5. 05Contenido inyectado y animaciones que desplazanhechoen curso
  25. 24

    Nivel 24

    5 temas
    1. 01La cadena de carga de una fuente, del CSS al primer glifohechoen curso
    2. 02font-display: los cinco valores y sus periodos exactoshechoen curso
    3. 03Precargar la fuente crítica: cuál, cuántas y en qué ordenhechoen curso
    4. 04Subsetting y unicode-range: mandar solo los glifos que se usanhechoen curso
    5. 05La fuente del sistema y el árbol de decisión completohechoen curso
  26. 25

    Nivel 25

    5 temas
    1. 01El pipeline de píxeles: estilo, layout, paint y composiciónhechoen curso
    2. 02Qué propiedad dispara qué etapa, y de dónde sacar el datohechoen curso
    3. 03Capas de composición: qué son, qué cuestan y cuándo promocionarhechoen curso
    4. 04Leer la cascada de un fotograma en el panel de rendimientohechoen curso
    5. 05El presupuesto de un fotograma y qué cabe dentrohechoen curso
  27. 26

    Nivel 26

    5 temas
    1. 01El layout síncrono forzado: por qué una lectura inocente para el navegadorhechoen curso
    2. 02La lista completa: todo lo que fuerza layout o recálculo de estilohechoen curso
    3. 03Leer todo y luego escribir todo: el patrón de dos faseshechoen curso
    4. 04Detectar el thrashing: del panel de rendimiento a la producciónhechoen curso
    5. 05No medir, en vez de medir mejor: las alternativas realeshechoen curso
  28. 27

    Nivel 27

    5 temas
    1. 01Por qué el layout es un problema global y el navegador no puede acotarlo solohechoen curso
    2. 02contain: los cuatro tipos y qué garantiza cada unohechoen curso
    3. 03content-visibility: saltarse el renderizado de lo que no se vehechoen curso
    4. 04contain-intrinsic-size, la barra de scroll y la búsqueda en la páginahechoen curso
    5. 05Cuándo aislar ayuda de verdad y cuándo es ruidohechoen curso
  29. 28

    Nivel 28

    5 temas
    1. 01El coste de diez mil nodos: qué paga el navegador por cada unohechoen curso
    2. 02Virtualización por ventana: montar solo lo que se vehechoen curso
    3. 03Alturas variables y el scroll que saltahechoen curso
    4. 04Scroll infinito: lo que rompe y cómo repararlohechoen curso
    5. 05Alternativas a la virtualización: casi siempre hay una mejorhechoen curso
  30. 29

    Nivel 29

    5 temas
    1. 01El heap y la presión de memoria: qué es realmente una fugahechoen curso
    2. 02La técnica de los tres snapshotshechoen curso
    3. 03Nodos desprendidos: quitar del DOM no es liberarhechoen curso
    4. 04Listeners que nunca se van y cierres que retienen de máshechoen curso
    5. 05Medir memoria en producción: measureUserAgentSpecificMemoryhechoen curso
  31. 30

    Nivel 30

    5 temas
    1. 01SSR, SSG, ISR y CSR: dónde ocurre el trabajohechoen curso
    2. 02El coste de cada estrategia en cada métricahechoen curso
    3. 03Streaming de HTML: enviar la página antes de tenerla enterahechoen curso
    4. 04El impuesto de la hidratación: cuando la página se ve pero no respondehechoen curso
    5. 05El árbol de decisión de la estrategia de renderhechoen curso
  32. 31

    Nivel 31

    5 temas
    1. 01Por qué hidratar es caro: el mecanismo por dentrohechoen curso
    2. 02Hidratación parcial y selectiva: hidratar menos y en mejor ordenhechoen curso
    3. 03Hidratación progresiva: los cinco disparadores y su preciohechoen curso
    4. 04Resumibilidad: continuar en vez de reconstruirhechoen curso
    5. 05Arquitectura de islas: JavaScript como excepciónhechoen curso
  33. 32

    Nivel 32

    5 temas
    1. 01La geografía de la latencia: por qué la distancia mandahechoen curso
    2. 02Qué se puede cachear en el borde y qué nohechoen curso
    3. 03La clave de caché: la aritmética de la cardinalidadhechoen curso
    4. 04Revalidación en el borde: caducidad, purga y estampidahechoen curso
    5. 05El cómputo en el borde: qué gana, qué pierde y dónde está el límitehechoen curso
  34. 33

    Nivel 33

    5 temas
    1. 01El ciclo de vida de un service worker y por qué es asíhechoen curso
    2. 02skipWaiting y clients.claim: qué rompes exactamente al usarloshechoen curso
    3. 03Las cinco estrategias de caché y el árbol para elegirhechoen curso
    4. 04El caparazón de aplicación y la precarga de navegaciónhechoen curso
    5. 05El despliegue seguro y la vía de escapehechoen curso
  35. 34

    Nivel 34

    5 temas
    1. 01El coste real de un script de tercero: los cinco componenteshechoen curso
    2. 02Medir script a script: atribución real del hilo principalhechoen curso
    3. 03El patrón de fachada: pagar la incrustación solo si se usahechoen curso
    4. 04Partytown: el modelo, el truco y los límites realeshechoen curso
    5. 05Presentar el coste a quien decide meterloshechoen curso
  36. 35

    Nivel 35

    5 temas
    1. 01El dispositivo real de tus usuarios frente al tuyohechoen curso
    2. 02Limitar CPU y red: cómo calibrarlo contra un dispositivo realhechoen curso
    3. 03El thermal throttling: el rendimiento que se degrada con el tiempohechoen curso
    4. 04Memoria limitada y la pestaña que se recarga solahechoen curso
    5. 05Probar en gama baja de verdadhechoen curso
  37. 36

    Nivel 36

    5 temas
    1. 01Lighthouse CI: montar la auditoría automática que no mientehechoen curso
    2. 02Presupuestos que hacen fallar el build sin que nadie los desactivehechoen curso
    3. 03El diff del bundle en cada petición de cambioshechoen curso
    4. 04La variabilidad de las medidas y cómo no volverse loco con ellahechoen curso
    5. 05Qué medir en cada commit y qué medir cada nochehechoen curso
  38. 37

    Nivel 37

    5 temas
    1. 01Los estudios de velocidad y conversión: qué dicen realmentehechoen curso
    2. 02Los límites metodológicos: por qué la correlación se infla solahechoen curso
    3. 03El experimento propio, hecho de forma honestahechoen curso
    4. 04Qué métrica de negocio conectar con qué métrica técnicahechoen curso
    5. 05Presentarlo a quien decide el presupuestohechoen curso
  39. 38

    Nivel 38

    5 temas
    1. 01El método completo de diagnóstico, de principio a finhechoen curso
    2. 02El árbol de decisión por síntomahechoen curso
    3. 03Los errores que ya no deberías cometerhechoen curso
    4. 04La cultura de rendimiento en un equipohechoen curso
    5. 05Hacia dónde va el rendimiento webhechoen curso