¿Qué es la precarga de activos (preload)?

¿Qué es la precarga de activos?

Precargar significa indicar al navegador, con <link rel="preload"> o una cabecera Link equivalente, que la página actual necesitará pronto un archivo concreto. El navegador lo descarga entonces antes y con mayor prioridad, en lugar de esperar a descubrirlo. Sirve para recursos que se descubren tarde, como una fuente citada en el CSS o una imagen principal definida como fondo CSS.

Cómo funciona preload

Un preload necesita un href y un valor as que indique el tipo de archivo: fetch, font, image, script, style o track. Con as el navegador fija la prioridad adecuada y relaciona la precarga con la petición posterior. Un script precargado se descarga y se guarda en caché, pero no se ejecuta. Para módulos de JavaScript existe modulepreload.

• Fuentes y peticiones fetch necesitan crossorigin, incluso si el archivo está en tu propio origen. Las fuentes usan siempre CORS anónimo; sin el atributo la precarga no se reutiliza y el archivo se descarga dos veces.
• type permite al navegador omitir un formato que no soporta, por ejemplo type="font/woff2".
• media hace condicional la precarga, de modo que una pantalla estrecha precargue otra imagen que una ancha.

Ejemplo

Una página de aterrizaje muestra una imagen principal definida en CSS y una fuente web. El navegador solo conoce ambas tras descargar y analizar la hoja de estilos, lo que retrasa el Largest Contentful Paint. Dos líneas en el <head> adelantan ese descubrimiento al principio:

<link rel="preload" href="/hero.webp" as="image" type="image/webp" fetchpriority="high">
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>

Preload, prefetch y preconnect

Estas pistas resuelven problemas distintos. Preload sirve para algo que la página actual necesitará pronto. Prefetch sirve para algo que una navegación posterior podría necesitar, con prioridad baja. Preconnect solo abre la conexión con otro origen y ayuda con las conexiones de red a terceros. No uses preload para archivos de la página siguiente ni prefetch para lo que la página necesita ahora.

Errores comunes

• Precargar demasiado. Las precargas compiten entre sí y con archivos que el navegador pediría primero de todos modos. Limítate a una o dos que bloqueen el renderizado.
• Precargar varios formatos de una misma imagen. Según MDN, cada variante precargada se descarga aunque solo se use una. Precarga el formato que recibe la mayoría de visitantes.
• Un valor as incorrecto o falta de crossorigin. La precarga no coincide entonces con la petición real y el archivo se pide dos veces.
• Precargar un recurso que la página nunca usa. Gasta ancho de banda y puede retrasar archivos importantes.
• Precargar algo pensado para cargarse de forma diferida. Anula la ventaja de la carga diferida (lazy loading). Precarga solo lo visible en el primer renderizado.

Relación con las pruebas de rendimiento y la monitorización

Una precarga cambia lo que hace el navegador, así que mídela. Compara la cascada y el LCP con y sin la pista, también con una conexión limitada. El verificador gratuito de Core Web Vitals muestra si los usuarios reales de Chrome ya superan LCP, INP y CLS, y la monitorización de velocidad de página de LoadFocus ejecuta auditorías Lighthouse programadas desde 25 regiones en la nube, para ver si un cambio mejoró en todas partes o solo cerca de tu servidor. Más mejoras de frontend en la guía de 10 pasos para acelerar tu web (en inglés).

Preguntas frecuentes: precarga de activos

¿Cuál es la diferencia entre preload y prefetch?

Preload descarga con mayor prioridad un archivo que la página actual necesitará pronto. Prefetch descarga con prioridad baja un archivo que una página posterior podría necesitar.

¿Qué activos debería precargar?

Solo los pocos que se descubren tarde y bloquean el primer renderizado: la imagen del LCP, una fuente web clave o un script u hoja de estilos crítica. Comprueba en la cascada que cada uno se descubre realmente tarde.

¿Por qué mi fuente se descarga dos veces?

Las precargas de fuentes deben llevar el atributo crossorigin, incluso para archivos del mismo origen. Sin él, la copia precargada no se reutiliza en la petición real de la fuente.

¿Preload ejecuta mi script?

No. Un script precargado se descarga y se guarda en caché, y solo se ejecuta cuando la página lo incluye con una etiqueta script.

¿Puede preload ralentizar una página?

Sí. Demasiadas precargas compiten por el ancho de banda con archivos más importantes. Mide el LCP antes y después de cada una.