El preloading y el prefetching son instrucciones que le das al navegador para que descargue recursos antes de que los solicite el flujo normal de la página. El resultado es que el usuario percibe una carga más rápida porque el recurso ya está disponible cuando se necesita, sin esperar una solicitud de red de última hora.
A continuación encontrarás la diferencia entre ambas técnicas, cuándo usar cada una y cómo implementarlas con ejemplos de código listos para copiar.
¿Qué es el preloading?
El preloading (rel="preload") le ordena al navegador que descargue un recurso crítico para la página actual lo antes posible, incluso antes de que el motor de renderizado lo descubra de forma natural al leer el HTML.
Es útil cuando el recurso es importante pero está "oculto" al principio: por ejemplo, una fuente tipográfica referenciada en un CSS, o una imagen hero que aparece en el viewport sin ser el primer elemento del DOM.
Ejemplo de preload en HTML
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/css/critical.css" as="style">
<link rel="preload" href="/hero.webp" as="image">El atributo as es obligatorio: le indica al navegador el tipo de recurso para aplicar las prioridades y las políticas de caché correctas. Los valores más comunes son font, style, script e image.
¿Cuándo usar preload?
- Fuentes web que se usan en el "above the fold".
- Imágenes hero o banners que determinan el LCP (Largest Contentful Paint).
- Hojas de estilo críticas cargadas con
mediacondicional. - Scripts que se llaman con
deferpero son esenciales para la interactividad inicial.
¿Qué es el prefetching?
El prefetching (rel="prefetch") le sugiere al navegador que descargue un recurso que probablemente necesitará en una navegación futura: la siguiente página, un componente dinámico o un fragmento de datos. La descarga ocurre en tiempo de inactividad, sin competir con los recursos de la página actual.
<link rel="prefetch" href="/pagina-siguiente.html" as="document">
<link rel="prefetch" href="/js/carrito.js" as="script">A diferencia del preload, el prefetch es una sugerencia: el navegador puede ignorarla si la conexión es lenta o la batería está baja.
¿Cuándo usar prefetch?
- La segunda página de un flujo de compra cuando el usuario está en la primera.
- Recursos de un modal que el usuario abre con frecuencia.
- Páginas enlazadas desde la navegación principal de alta conversión.
Diferencias clave entre preload y prefetch
| Característica | Preload | Prefetch |
|---|---|---|
| Página objetivo | La actual | Una futura |
| Prioridad de descarga | Alta (inmediata) | Baja (tiempo libre) |
| Obligatoriedad | El navegador debe descargarlo | El navegador puede ignorarlo |
| Riesgo si se usa mal | Descarga innecesaria que bloquea ancho de banda | Desperdicio de datos en mobile |
Otras técnicas relacionadas: preconnect y dns-prefetch
Además de preload y prefetch, existen dos resource hints más ligeros que también reducen la latencia:
- preconnect (
rel="preconnect"): abre la conexión TCP+TLS con un origen externo anticipadamente. Ideal para CDNs, APIs de terceros o fuentes de Google Fonts. - dns-prefetch (
rel="dns-prefetch"): solo resuelve el DNS, sin abrir la conexión. Más ligero, útil cuando hay muchos dominios de terceros.
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="dns-prefetch" href="//analytics.example.com">Una buena estrategia combina preconnect para los dos o tres dominios más importantes y dns-prefetch para el resto.
Cómo implementarlos correctamente sin penalizar el rendimiento
Usar estas técnicas sin criterio puede empeorar las métricas en lugar de mejorarlas. Sigue estas reglas:
- Preloada solo lo crítico. Si preloadeas demasiados recursos, compiten por ancho de banda con los recursos realmente urgentes.
- Verifica con Chrome DevTools. En la pestaña Network, un recurso pre-cargado que no se usa genera la advertencia "unused preload". Elimínalo.
- No dupliques. Si el recurso ya aparece en el HTML al inicio del
<head>, un preload adicional es redundante. - Usa prefetch con datos de comportamiento real. Analiza en Google Analytics qué página visita el usuario después de la actual antes de prefetchear a ciegas.
- Respeta a los usuarios con datos limitados. Puedes detectar la API
navigator.connection.saveDataen JavaScript y omitir el prefetch si está activo.
Si necesitas ayuda para aplicar estas técnicas en tu sitio, el equipo de elenlace.com puede realizar una auditoría completa de rendimiento y configurar los resource hints correctos para tu caso de uso.
Para seguir aprendiendo sobre optimización de velocidad, visita nuestra sección de artículos de rendimiento web.
Conclusiones clave
- Preload = recurso crítico de la página actual; el navegador lo descarga de inmediato.
- Prefetch = recurso probable para la siguiente navegación; el navegador lo descarga en tiempo libre.
- Preconnect abre la conexión TCP+TLS con dominios externos antes de necesitarlos.
- Dns-prefetch resuelve solo el DNS, más ligero que preconnect.
- El atributo
asen preload es obligatorio para que el navegador aplique la prioridad correcta. - Menos es más: preloadear demasiados recursos compite con los críticos y empeora el rendimiento.
¿Quieres saber qué recursos conviene precargar en tu sitio? Contáctanos en elenlace.com y te hacemos una revisión sin costo.
Preguntas frecuentes
¿El preload mejora el LCP?
Sí. Si la imagen o el bloque de texto que activa el LCP se descarga antes gracias a un rel="preload", el navegador puede pintarla más rápido y la métrica mejora directamente.
¿Puedo usar preload y prefetch al mismo tiempo?
Sí, son complementarios. Usas preload para los recursos que necesitas ahora y prefetch para los que necesitarás después. No se excluyen entre sí.
¿El prefetch consume datos del usuario en móvil?
Potencialmente sí, aunque los navegadores modernos suelen inhibirlo en conexiones lentas o con ahorro de datos activado. Puedes comprobarlo con navigator.connection.saveData antes de inyectar dinámicamente los links de prefetch.
¿Necesito un plugin para implementar estos resource hints en WordPress?
No necesariamente. Puedes añadir los <link> manualmente en el <head> de tu tema o usar el hook wp_head. Plugins de rendimiento como WP Rocket o LiteSpeed Cache también los gestionan automáticamente si los configuras correctamente.
Recursos útiles
Otros proveedores y guías que vale la pena comparar:
