¿Qué son los resource hints?

¿Qué son los resource hints?

Los resource hints (indicaciones de recursos) son instrucciones breves, escritas como etiquetas <link rel="..."> o cabeceras Link, que le dicen al navegador qué orígenes o archivos probablemente va a necesitar, para que empiece a trabajar antes. El conjunto habitual es dns-prefetch, preconnect, preload, prefetch y prerender; MDN añade modulepreload para módulos de JavaScript. Un hint es una sugerencia y el navegador puede ignorarlo.

Qué hint responde a cada pregunta

• ¿Usará la página otro origen pronto? preconnect hace por adelantado la consulta DNS, la conexión TCP y el handshake TLS. No aporta nada para tu propio origen, y MDN recomienda usarlo solo para tus conexiones entre orígenes más críticas. dns-prefetch hace solo el paso DNS, adecuado para orígenes menos importantes.
• ¿Necesita la página actual un archivo que se descubre tarde? preload lo descarga pronto y con prioridad alta, por ejemplo una imagen LCP definida en CSS o una fuente web. Requiere un valor as y, para fuentes, crossorigin. modulepreload es la versión para módulos de JavaScript. Los detalles están en precarga de recursos.
• ¿Podría necesitar un archivo una página posterior? prefetch lo descarga con prioridad baja en la caché HTTP, para una navegación siguiente probable. Cache-Control: no-store y no-cache lo bloquean, y no sirve entre sitios distintos. Consulta prefetch de recursos.
• ¿Es muy probable que se abra una página entera? prerender estaba pensado para renderizarla de antemano, pero MDN lo considera ahora obsoleto (deprecated) y solo de Chrome: se limita a descargar el documento y los recursos que encuentra en la caché HTTP. Para un prerenderizado real, usa la Speculation Rules API; consulta prerenderizado.

Algo relacionado pero distinto: el atributo fetchpriority sube o baja la prioridad de una petición. No hace que el navegador encuentre antes el archivo, por eso se combina a menudo con preload para una imagen definida en CSS. Los costes de conexión que ahorran preconnect y dns-prefetch se explican en conexiones de red y velocidad de página.

Ejemplo

Una landing carga fuentes y un script desde una CDN, muestra una imagen principal definida en CSS y enlaza una página de precios que la mayoría de visitantes abre después. Cuatro líneas en el head lo cubren:

<link rel="preconnect" href="https://cdn.example.com" crossorigin>
<link rel="preload" href="/hero.webp" as="image" fetchpriority="high">
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
<link rel="prefetch" href="/pricing">

Las tres primeras ayudan a que cargue esta página. La última calienta la caché de la siguiente, con prioridad baja.

Errores frecuentes

• Usar demasiados. MDN advierte de que precargarlo todo anula el beneficio, y conectar de antemano con muchos orígenes puede ser contraproducente.
• Anticipar algo que la página nunca usa. Un preload o prefetch de un archivo sin uso gasta ancho de banda para nada.
• Un valor as incorrecto o falta de crossorigin. El navegador no puede asociar el hint a la petición real y puede descargar el archivo dos veces.
• Depender de prerender. Está obsoleto y ya no renderiza la página; usa Speculation Rules donde se admitan y trátalas como una mejora añadida.
• Hacer prefetch de URLs con efectos secundarios. Un enlace de cierre de sesión o de añadir al carrito pedido por adelantado llega igualmente a tu servidor.
• No medir nunca. Un hint cambia lo que hace el navegador; compara la cascada y el Largest Contentful Paint con y sin él.

Relación con las pruebas y el monitoreo

Revisa cada hint en una cascada: el archivo debe empezar antes y la métrica que querías mejorar debe moverse. Prueba con una conexión limitada y desde más de un lugar, porque un hint que ayuda cerca del servidor puede aportar poco lejos. LoadFocus Page Speed Monitoring ejecuta auditorías de Google Lighthouse programadas desde 25 regiones en la nube, con alertas cuando una puntuación o métrica empeora. El verificador gratuito de Core Web Vitals muestra LCP, INP y CLS de usuarios reales a partir de los datos CrUX de Google. Para más mejoras de frontend, lee la guía de 10 pasos para acelerar tu web, y consulta la guía de MDN sobre carga especulativa para la sintaxis exacta.

Preguntas frecuentes: resource hints

¿Cuáles son los resource hints?

dns-prefetch, preconnect, preload, prefetch y prerender, más modulepreload para módulos de JavaScript. Prerender está obsoleto a favor de Speculation Rules.

¿Qué diferencia hay entre preload y prefetch?

Preload descarga con prioridad alta un archivo que la página actual necesita pronto. Prefetch descarga con prioridad baja un archivo que quizá necesite una página posterior.

¿Cuándo uso preconnect en lugar de dns-prefetch?

Preconnect para los pocos servidores de otros orígenes que seguro vas a usar enseguida, porque además abre la conexión. dns-prefetch para orígenes menos importantes, porque solo resuelve el nombre de host.

¿Fetchpriority sustituye a preload?

No. Fetchpriority cambia con qué urgencia descarga el navegador un archivo que ya conoce. Preload hace que descubra un archivo antes. Pueden usarse juntos.

¿Pueden los resource hints ralentizar mi web?

Sí. Demasiados hints compiten por ancho de banda y conexiones con archivos más importantes. Limítate a los pocos que condicionan el primer renderizado y mide el resultado.