Resource Prefetch: Definición, Hints, Mejores Prácticas

¿Qué es resource prefetching?

Resource prefetching es un set de hints navegador que le dicen al navegador fetchear (o pre-resolver) recursos antes de lo que normalmente lo haría — para hacer loads subsecuentes más rápidos. El navegador todavía decide priority y timing.

Los cuatro hints principales: preload, preconnect, dns-prefetch, prefetch.

Los cuatro tipos hint recurso

preload: recursos critical-path

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

preconnect: calentar conexiones

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://api.example.com">

dns-prefetch: alternativa más ligera

<link rel="dns-prefetch" href="https://analytics.example.com">

prefetch: especular sobre próxima página

<link rel="prefetch" href="/products">
<link rel="modulepreload" href="/checkout.js">

fetchpriority

<img src="hero.webp" fetchpriority="high">
<img src="footer.webp" fetchpriority="low" loading="lazy">

Patterns prácticos

Preload imagen LCP

<link rel="preload" href="/hero.webp" as="image" fetchpriority="high">

Font crítica

<link rel="preload" href="/inter.woff2" as="font" type="font/woff2" crossorigin>

API call

<link rel="preconnect" href="https://api.example.com" crossorigin>

Moderno: Speculation Rules API

<script type="speculationrules">
{
  "prerender": [{ "urls": ["/products"] }]
}
</script>

Mejores prácticas resource hint

• Solo preload critical path.
• Preconnect a top 3-4 origins third-party.
• dns-prefetch puede ser liberal.
• Prefetch likely next pages.
• crossorigin en font/fetch preloads.
• Testear con WebPageTest.
• No preloadear todo.
• Lazy-load below the fold.

Pitfalls comunes

• Sobre-preloading.
• crossorigin faltante.
• Valor as incorrecto.
• Preloadear non-crítico.
• Demasiados origins preconnect.
• Prefetch con usuarios bandwidth-light.
• Prefetch stale.

FAQ: resource prefetching

¿preload vs prefetch: cuál es la diferencia?

preload = página actual. prefetch = próxima navegación.

¿Debería preloadear mi imagen hero?

Sí — con fetchpriority="high".

¿Cuántos hints preconnect son demasiados?

3-4 es sweet spot.

¿Funciona prefetch en móvil?

Sí, pero consume datos usuario.

¿Qué es modulepreload?

Como preload pero para ES modules.

¿Puedo prefetchear páginas enteras?

Sí vía prefetch o Speculation Rules API.

¿Cómo mido impacto preload?

Waterfall WebPageTest.

Testea impacto performance prefetch con LoadFocus

LoadFocus corre auditorías Lighthouse desde 25+ regiones. Regístrate en loadfocus.com/signup.