Optimizar imágenes y fuentes: el 80/20 del rendimiento

La causa número uno de sitios lentos no es el JavaScript exótico: son las imágenes gigantes y las fuentes mal cargadas. La buena noticia es que aquí manda la regla del 80/20 — un puñado de técnicas simples te da la mayor parte de la mejora de velocidad. Esta lección es ese puñado: lo que de verdad mueve la aguja.

El paquete sobreempacado

Imágenes: formato, tamaño, momento

Tres decisiones cubren casi toda la mejora:

<!-- 1. FORMATO moderno con fallback: AVIF/WebP pesan mucho menos que JPG/PNG -->
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Vista del páramo" width="1200" height="600">
</picture>

<!-- 2. MOMENTO: lo que está bajo el pliegue carga solo cuando se acerca -->
<img src="galeria-9.jpg" alt="..." loading="lazy" width="800" height="600">

<!-- 3. PRIORIDAD: el hero (tu LCP) se marca urgente; SIN lazy -->
<img src="hero.webp" alt="..." fetchpriority="high" width="1200" height="600">

Detalles que importan: siempre width y height (o aspect-ratio) — reservan el espacio y matan el CLS de la lección anterior. loading="lazy" solo para lo que está fuera de pantalla (nunca en el hero, retrasarías el LCP). Y el tamaño real: no sirvas una imagen de 3000px para mostrarla a 600px — redimensiónala (y usa srcset/sizes del módulo 8 para servir la adecuada a cada pantalla).

Fuentes: no bloquear el texto, no saltar

Las fuentes web tienen dos problemas: pueden dejar el texto INVISIBLE mientras cargan, o provocar un salto cuando llegan. Dos líneas los resuelven:

@font-face {
font-family: "Inter";
src: url("/fonts/inter.woff2") format("woff2");  /* woff2: el formato más comprimido */
font-display: swap;   /* muestra ya el texto con una fuente de sistema, y cambia al cargar */
}

<!-- PRECARGAR la fuente crítica para que llegue antes (menos salto, mejor LCP) -->
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>

font-display: swap evita el texto invisible (muestra el contenido con una fuente de respaldo y cambia a la tuya al cargar). Más ahorros: usa woff2 (el formato más ligero), limita los pesos (¿de verdad necesitas 6 grosores? cada uno es una descarga), considera fuentes variables (todos los pesos en un archivo) y, para máxima velocidad, las fuentes del sistema (system-ui) que no descargan nada — como usan varios de los ejemplos de este curso.

El 80/20: dónde invertir el esfuerzo

Mini-reto

Audita el peso de "El Observador": abre DevTools → Network, recarga, y ordena por tamaño. Encuentra la imagen más pesada y hazle el tratamiento completo — redimensiónala a lo que realmente se muestra, conviértela a WebP (con un conversor online o squoosh.app), agrégale width/height y loading="lazy" si está bajo el pliegue. Vuelve a medir el peso total. Ver los megas caer con cuatro cambios simples engancha.

Qué sigue

Cubriste el peso que llega por la red. Falta el rendimiento en PANTALLA: por qué algunas animaciones van suaves y otras traban el navegador. La próxima lección conecta con la regla de oro del módulo 11 —compositor vs layout— y te enseña a diagnosticarlo con la pestaña Performance de DevTools.