La precarga de recursos le dice al navegador qué archivos debe descargar antes de que los descubra por sí mismo al analizar el HTML, el CSS o el JavaScript de la página. Aplicada con criterio, reduce el tiempo de carga percibido y mejora directamente métricas como el LCP. Estas son 7 técnicas esenciales para aplicar esta optimización correctamente en tu sitio en 2026.
¿Qué es la precarga de recursos?
Esta práctica consiste en dar instrucciones explícitas al navegador, mediante etiquetas <link> colocadas en el <head>, para que obtenga determinados archivos antes de lo habitual. Sin estas pistas, el navegador solo descubre una imagen de fondo en CSS, una fuente o un script diferido después de analizar los archivos que los referencian, lo que retrasa su aparición en pantalla.
Existen varias variantes de esta técnica: preload, preconnect, dns-prefetch, prefetch, modulepreload y el atributo fetchpriority. Cada una responde a una necesidad concreta, y confundirlas puede perjudicar el rendimiento en lugar de mejorarlo.
1. Preload para los recursos críticos
<link rel="preload"> obliga al navegador a descargar un recurso desde el inicio de la carga, sin esperar a que aparezca referenciado en otro lugar. Es la herramienta ideal para la fuente principal, la imagen de cabecera visible sin desplazarse, o una hoja de estilos crítica.
Ejemplo práctico: <link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>. Eso sí, conviene limitarse a 2 o 3 recursos como máximo: un uso excesivo de esta técnica satura el ancho de banda disponible al inicio y ralentiza paradójicamente la carga general.
2. Preconnect para acelerar las conexiones externas
rel="preconnect" establece de antemano la conexión TCP, la negociación TLS y la resolución DNS hacia un dominio externo. Resulta especialmente útil para las CDN de fuentes, los scripts de analítica o las redes publicitarias que intervienen pronto en la representación de la página.
Cada conexión previa tiene un coste en recursos del navegador: limita el preconnect a los dominios realmente críticos, normalmente no más de cuatro o cinco orígenes por página.
3. DNS-Prefetch para resolver dominios de terceros
Menos costoso que preconnect, dns-prefetch se limita a resolver el nombre de dominio con antelación, sin abrir la conexión completa. Es un buen compromiso para dominios de terceros secundarios, como widgets sociales o píxeles de seguimiento no prioritarios.
Combinar dns-prefetch y preconnect sobre un mismo dominio crítico ofrece una compatibilidad máxima, incluso en navegadores más antiguos que no soportan del todo el segundo.
4. Prefetch para anticipar la navegación futura
rel="prefetch" no beneficia a la página actual, sino a la siguiente: indica al navegador que obtenga, en segundo plano y con baja prioridad, un recurso que probablemente se necesitará en la próxima navegación (página de producto, siguiente artículo, paso del pago).
Este uso de la precarga de recursos es ideal en un blog o una tienda online donde el recorrido del usuario es predecible, aunque debe aplicarse de forma selectiva para no desperdiciar ancho de banda móvil.
5. Modulepreload para los scripts JavaScript modernos
Para las aplicaciones que utilizan módulos ES nativos (type="module"), rel="modulepreload" va más allá del preload clásico: descarga, analiza y pone en caché el módulo junto con sus dependencias declaradas, reduciendo el retraso antes de su ejecución.
Esta técnica resulta especialmente útil en sitios construidos con frameworks modernos (Vue, React, Svelte) que entregan el JavaScript en módulos en lugar de un único paquete monolítico.
6. Fetchpriority para priorizar las imágenes clave
El atributo fetchpriority="high", aplicado directamente sobre una etiqueta <img>, le indica al navegador que trate esa imagen con prioridad frente a otros recursos del mismo tipo. Es una alternativa ligera al preload para la imagen principal de una página, sobre todo la que determina el LCP.
Por el contrario, fetchpriority="low" permite despriorizar imágenes secundarias (avatares, iconos decorativos) para dejar ancho de banda a los elementos realmente visibles en pantalla.
7. Medir el impacto de la precarga de recursos
Ninguna de estas técnicas debe aplicarse a ciegas. La pestaña de Red de las herramientas para desarrolladores y el artículo Preload critical assets de web.dev permiten comprobar si un recurso precargado se utiliza realmente en los segundos siguientes, o si el navegador muestra una advertencia por recurso no utilizado.
Haz seguimiento también de la evolución del LCP y del tiempo de bloqueo total con una herramienta de medición de Core Web Vitals antes y después de cada cambio, como se explica en nuestra guía sobre LCP Core Web Vitals, para confirmar que esta optimización genera una mejora real y no solo una redistribución de la carga.
Conclusión
Bien aplicada, la precarga de recursos es una palanca poderosa para acelerar la carga percibida de un sitio, siempre que se use con criterio y se mida cada cambio. Preload, preconnect, dns-prefetch, prefetch, modulepreload y fetchpriority forman un conjunto de herramientas complementarias, que conviene combinar según la naturaleza de cada recurso en lugar de aplicar de forma sistemática en todas partes.