Qué es preload
<link rel=preload> es una pista al navegador para descargar un recurso con alta prioridad antes de que normalmente lo necesite. Es una herramienta de optimización para mejorar el LCP y reducir tiempos de espera.
Sintaxis
<link rel=preload href=/hero.webp as=image>
<link rel=preload href=/inter.woff2 as=font type=font/woff2 crossorigin>
<link rel=preload href=/critical.js as=script>
<link rel=preload href=/api/datos.json as=fetch crossorigin>El atributo as es obligatorio y dice al navegador qué tipo de recurso es.
Para qué se usa
1. Imagen LCP
Tu imagen hero (LCP element) suele ser el último en cargar porque el navegador la descubre tras parsear CSS. Con preload:
<link rel=preload href=/hero.webp as=image fetchpriority=high>Descarga empieza inmediatamente al parsear el HTML. Mejora LCP típicamente 200-800ms.
2. Fuentes web críticas
Las fuentes se descubren al parsear CSS, después de descargarlo. Con preload:
<link rel=preload href=/inter-bold.woff2 as=font type=font/woff2 crossorigin>Descarga en paralelo con CSS. Evita FOUT/FOIT en texto del hero.
Importante: usar crossorigin aunque la fuente sea same-origin (es como el spec lo define).
3. Scripts críticos
Si un script JS es crítico para la primera interacción:
<link rel=preload href=/critical.js as=script>4. Datos API críticos
Si tu app necesita datos al cargar:
<link rel=preload href=/api/config as=fetch crossorigin>fetchpriority (priorización adicional)
A partir de Chrome 102+, puedes refinar:
<link rel=preload href=/hero.webp as=image fetchpriority=high>
<img src=/hero.webp fetchpriority=high>
<link rel=preload href=/secondary.webp as=image fetchpriority=low>high: prioridad máximalow: prioridad bajaauto: defecto del navegador
preload vs preconnect vs prefetch
preload
Descarga este recurso ahora, lo necesitaré inmediatamente
preconnect
Establece conexión TCP/TLS con este origen, descargaré algo de ahí pronto
<link rel=preconnect href=https://www.googletagmanager.com>Útil para terceros donde harás fetch.
prefetch
Descarga este recurso en idle time, lo necesitaré en próxima navegación
<link rel=prefetch href=/proxima-pagina.html>Baja prioridad, para optimización de navegación posterior.
Errores típicos
Preload de TODO
Si haces preload de 20 recursos, ninguno tiene prioridad real. Reserva preload para los 2-4 críticos.
Preload de recursos que no se usan
Si haces preload de una imagen que solo aparece en condiciones específicas, desperdicias ancho de banda.
Preload de recursos ya cacheados
Si el usuario ya tiene el recurso en caché, preload puede ser contraproducente.
Olvidar as
Sin atributo as, preload no funciona. Algunos navegadores ignoran el link.
Olvidar crossorigin en fuentes
Las fuentes requieren crossorigin aunque sean same-origin.
Cuándo usar preload
✓ Buenos casos
- Imagen LCP que aparece above-the-fold
- Fuentes web críticas (texto del hero)
- Logo principal del navbar
- Scripts críticos para primera interacción
✗ NO uses preload para
- Imágenes below-the-fold (mejor lazy loading)
- Fuentes secundarias (cargar con CSS normal)
- Scripts no-críticos (cargar con defer)
- Recursos que pueden no ser necesarios
Cómo verificar funcionamiento
Chrome DevTools
Network tab → ver columna Initiator. Recursos preloaded aparecen como iniciados por <link>.
Console: avisos sobre recursos preloaded pero no usados.
Lighthouse
Detecta preload key requests como oportunidad.
Combinación ganadora
Para imagen LCP:
<head>
<link rel=preload href=/hero.webp as=image fetchpriority=high>
</head>
<body>
<img src=/hero.webp alt=... fetchpriority=high loading=eager>
</body>LCP mejora 200-800ms inmediatamente.
Mide tu LCP con Test de Velocidad Web.