Curso HTML 18.4 Preload, prefetch y otros hints (visión general)

Preload, Prefetch y Otros Resource Hints: Visión General

Los resource hints son instrucciones al navegador para administrar la carga de recursos externos optimizando el rendimiento. Entre ellos destacan:

preload: carga prioritaria inmediata.
prefetch: descarga en segundo plano para uso futuro.
preconnect: establece conexión temprana (DNS, TCP, TLS).
dns-prefetch: solo resolución DNS temprana.
prerender: prerenderizado completo de otra página.
modulepreload: similar a preload pero para módulos JS.

Tabla Comparativa de Resource Hints

Hint	Propósito	Priority	Uso Típico
preload	Carga inmediata	Alta	CSS, JS críticos, fuentes
prefetch	Descarga ociosa futura	Baja	Recursos de la siguiente página
preconnect	Conexión anticipada	Media	Dominio de APIs, CDNs
dns-prefetch	Solo DNS	Media	Dominio de terceros
prerender	Renderizado completo futuro	Alta	Páginas que será probable visitar
modulepreload	Preload de módulos ES	Alta	Módulos JS dinámicos

1. preload

Indica al navegador que cargue un recurso lo antes posible, pero sin ejecutarlo hasta que sea referenciado. Se debe especificar el atributo as para que el navegador sepa cómo tratar el recurso y aplicar políticas de prioridad y CORS adecuadas.

Ejemplo: Preload de una fuente

Ejemplo: Preload de CSS crítico

Ejemplo: Preload de script de librería

2. modulepreload

Similar a preload pero optimizado para ES modules. Ayuda a iniciar la descarga de módulos antes de que el parser los encuentre.

3. prefetch

Indica recursos que serán probablemente usados en futuras navegaciones o interacciones. Se descargan con baja prioridad, sin bloquear el render actual.

4. preconnect y dns-prefetch

preconnect establece tempranamente DNS lookup, TCP handshake y TLS negotiation a un dominio externo. dns-prefetch hace solo el lookup DNS, útil cuando no necesitamos TLS o TCP aún.

5. prerender

Permite al navegador cargar y renderizar completamente una página futura en background. Ideal cuando hay una muy alta probabilidad de que el usuario navegue a esa página.

Buenas Prácticas y Advertencias

No abusar de prerender o preconnect para recursos no críticos; puede consumir ancho de banda y memoria.
Siempre usar as correcto y crossorigin cuando sea necesario para fuentes y módulos.
Combinar preload con atributos de caché (ETags, cache-control) para evitar recargas innecesarias.
Monitorear el impacto con herramientas como Lighthouse y Chrome DevTools.
Para módulos, usar modulepreload en lugar de preload as='script'.

Casos de Uso Típicos

Web apps críticas: preload de la hoja de estilos principal y la fuente custom.
Multipágina con navegación secuencial: prefetch de scripts e imágenes de la siguiente página.
Integraciones con CDN o APIs de terceros: preconnect para reducir latencia en la primera llamada.
Rutas con alta probabilidad de visita inmediata: prerender de la página destino.

Aplicando estos resource hints adecuadamente se logra una carga más optimizada, menor tiempo de interacción y mejor experiencia de usuario.