¿Qué son las directivas de recursos como preload, prefetch y preconnect?

Question

Accepted Answer

**Directivas de recursos** son etiquetas `` que le indican al navegador que obtenga o se conecte a recursos anticipadamente, optimizando el rendimiento de carga. Cada una sirve para una necesidad diferente de tiempo/prioridad. ```html ``` ## Qué hace cada una - **`preload`** — "Necesito esto **para la página actual**, obtenlo ahora con alta prioridad." Para recursos críticos que el analizador descubre tarde: fuentes, imágenes destacadas, activos referenciados por CSS. Requiere `as` para que el navegador establezca la prioridad/encabezados correctos. - **`preconnect`** — "Me conectaré a este **origen** pronto; haz ahora la búsqueda de DNS + TCP + handshake TLS." Ahorra los viajes redondos antes de la primera solicitud a un tercero (API, servidor de fuentes, CDN). Usa esto para algunos orígenes críticos. - **`dns-prefetch`** — una versión más ligera de preconnect: solo la resolución de DNS. Buen alternativa / para muchos orígenes. - **`prefetch`** — "**Probablemente** necesitaré esto para la **siguiente** navegación; obtenlo con baja prioridad cuando esté inactivo." Para páginas/activos probablemente siguientes. Se cachea para el futuro, no para la página actual. ## Un ejemplo real común: fuentes ```html ``` Las fuentes se descubren tarde (el navegador debe analizar primero el CSS), por lo que precargarlas evita retrasos de texto invisible. ## Cuidado: no sobre-utilices las directivas Precarga de todo anula el propósito — compite con recursos genuinamente críticos por ancho de banda. Usa directivas solo para los pocos que más importan. ## Por qué es importante Las directivas de recursos reducen la latencia en la ruta crítica: `preconnect` elimina el retraso de handshake para terceros, `preload` prioriza activos críticos descubiertos tarde (fuentes, imagen LCP), y `prefetch` hace que la *siguiente* navegación se sienta instantánea. Usadas con precisión, mejoran significativamente Core Web Vitals.