¿Qué es el «prefetch» o «preload» y cómo se usa en HTML para optimizar la carga?
preload descarga recursos críticos de alta prioridad para la página actual (requiere atributo as). prefetch descarga recursos de baja prioridad para navegación futura. Ambos optimizan la carga.
El «prefetch» y el «preload» son directivas de «sugerencias de recursos» (resource hints) que puedes usar en HTML mediante la etiqueta <link>. Le indican al navegador qué recursos podrían ser necesarios pronto o en el futuro, permitiéndole optimizar su carga y mejorar el rendimiento percibido y real de tu sitio web.
rel="preload"
- Propósito: Indica al navegador que descargue un recurso con alta prioridad porque es necesario para la página actual y se usará pronto.
preloadno ejecuta ni aplica el recurso; solo lo descarga y lo pone en la caché del navegador. - Cuándo usarlo: Para recursos críticos que el navegador podría descubrir tarde en el proceso de carga, como:
- Fuentes tipográficas definidas con
@font-face. - Hojas de estilo CSS críticas que no están en línea (especialmente si se cargan con JavaScript).
- Scripts JavaScript importantes para el renderizado inicial.
- Imágenes principales o «above the fold».
- Fuentes tipográficas definidas con
- Atributos clave:
href: La ruta al recurso.as: Esencial. Especifica el tipo de contenido (style,script,font,image,fetch,document,worker, etc.). Ayuda al navegador a priorizar correctamente, aplicar la política de seguridad de contenido (CSP) adecuada y establecer las cabecerasAcceptcorrectas.type(opcional): El tipo MIME del recurso (útil para fuentes, ej.type="font/woff2").crossorigin(opcional): Necesario si el recurso se carga desde un dominio diferente y requiere CORS (especialmente para fuentes).
- Ejemplo:
<head>
<link rel="preload" href="css/estilos-criticos.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="css/estilos-criticos.css"></noscript>
<link rel="preload" href="fuentes/mi-fuente.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="js/app-principal.js" as="script">
</head>
<body>
<script src="js/app-principal.js" defer></script>
</body>Lenguaje del código: PHP (php)Nota: Para CSS pre-cargado, necesitas cambiar rel='stylesheet' para aplicarlo. Para scripts, necesitas una etiqueta <script> para ejecutarlos.
rel="prefetch"
- Propósito: Indica al navegador que descargue un recurso con baja prioridad porque es probable que sea necesario para una navegación futura (por ejemplo, la siguiente página que el usuario podría visitar), no para la página actual. El navegador lo descarga cuando está inactivo (idle time).
- Cuándo usarlo: Para recursos de páginas subsiguientes que el usuario probablemente visitará.
- Atributos clave:
href: La ruta al recurso.as(opcional, pero puede ayudar): También puede indicar el tipo de recurso.
- Ejemplo:
<link rel="prefetch" href="/pagina-siguiente.html" as="document">
<link rel="prefetch" href="/js/script-pagina-siguiente.js" as="script">
<link rel="prefetch" href="/imagenes/imagen-comun-siguiente-pagina.jpg" as="image">Lenguaje del código: PHP (php)Si el usuario navega a /pagina-siguiente.html, los recursos pre-buscados ya podrían estar en la caché del navegador.
Diferencias clave:
| Característica | preload | prefetch |
| Prioridad | Alta | Baja |
| Uso | Recursos críticos para la página actual | Recursos para navegación futura |
| Alcance | Página actual | Próxima(s) página(s) |
as attr. | Obligatorio | Opcional (pero recomendado) |
Otras sugerencias de recursos relacionadas:
rel="preconnect": Inicia una conexión temprana (DNS, TCP, TLS) a un origen importante.rel="dns-prefetch": Realiza solo la resolución DNS para un origen de forma anticipada.
Precauciones:
No abuses de preload ni prefetch. Pre-cargar demasiados recursos puede consumir innecesariamente el ancho de banda del usuario y los recursos del navegador, especialmente en conexiones móviles. Úsalos estratégicamente para los recursos más importantes.
