Preload solamente le dice al browser que empiece a descargar el objetivo apenas se pueda (pero sin pasar por encima de recursos críticos que se estén incluyendo explícitamente). El hecho que un recurso se precargue as="style"
o as="font"
los deja en el browser (tanto para el presente request como para cachear futuras reutilizaciones del mismo recurso) pero en ningún caso los inserta al DOM por iniciativa propia.
Entonces -podrás preguntarte- de qué sirve indicar que, por ejemplo, quieres precargar una foto de alta resolución as="image"
? Excelente pregunta.
Primero: Cuando le dices al browser que intentas precargar una imagen, éste lanzará una petición en cuyo header Accept
le indicará a la fuente los formatos que soporta. En servicios CDN de razonable calidad, la imagen que recibes será distinta si tu browser soporta AVIF o WEBP. Si en cambio lo precargaras como un recurso genérico recibirás como fallback un JPG. Así pasa con muchos otros tipos de contenido donde el origen optimiza la respuesta según la petición. Y en esto cabe señalar que la extensión de la URL que precargas no debe tomarse como indicación del content-type que recibirás.
En segundo lugar, cuando se está utilizando Cross Site Policy, las reglas que tú estableces permiten especificar restricciones distintas para distintos tipos de recursos. Por ejemplo yo podría permitir cargar scripts JS desde cdnjs.cloudflare.com
, y hojas de estilo y tipografías solamente desde fonts.google.com
. Cuando le digo al browser: "pregarga este estilo", él ya sabe que no debe aceptar otro origen. Y sabe que si pedí precargar as="font"
, que deberá verificar la existencia de un atributo crossorigin
.
Tercero: a sabiendas de que he pedido precargar una imagen (por ejemplo), y que la pedí as="image"
, no crees que sería invasivo insertarla en el DOM con una etiqueta <IMG>
cuando yo la quería usar como background desde mi CSS? Y si estoy precargando varias hojas de estilos, sin saber en qué orden responderán sus respectivos origenes... debo cruzar los dedos para que se inserten al DOM en orden? Como sabrás, los estilos no son idempotentes. El orden sí importa.
Cuarto: esta ciencia de calibrar los preload no es automática. Requiere un cierto análisis de los recursos cuyo peso, demora o petición inicial son subóptimos y cuya precarga te beneficiaría. Por ejemplo: estoy precargando y luego insertando una hoja de estilos de un servidor remoto muy lento, y en ella se referencia una otra hoja de estilos. Estas peticiones ejecutadas en secuencia perjudican la renderización final de mi sitio, así que tiene sentido precargar esta hoja secundaria incluso si mi página no la usa directamente, sino para tenerla a mano cuando el primer CSS la pida. Pero sin asumir que lo hará, porque no tengo control sobre éste y podríamos estar insertando versiones ligeramente distintas de aquella dependencia. De ocurrir esto, mi precarga ya no sirve de nada, pero al menos no rompe los estilos finales.
Quinto: hay recursos cuya carga es bloqueante. No me refiero a que el browser se quede esperando su descarga, sino a que el momento en que se insertan al DOM condiciona la secuencia que termina con el evento onload
. Paralelizar la descarga y gatillar la ejecución son decisiones independientes.
Bonus Track
En algún momento, cuando preload era exclusivo de Chrome Canary (2015 o 2016), se divulgaron artículos que mezclaban lo importante con lo ingenioso. Si hoy en día buscas qué es y para qué sirve, el buscador te sugiere referencias oficiales. Y si buscas técnicas ingeniosas para mejorar el puntaje en LightHouse, encontrarás por ejemplo guías como la de Demian Renzulli, que aprovecha el truco de convertir un <link rel="preload"...>
en <link rel="stylesheet"...>
usando el atributo onload
para modificar la etiqueta con javascript:
<link rel="preload" as="style" onload="this.rel='stylesheet'" href="http://www.example.com/style.css">
En un principio el contenido disponible abordaba ambas vertientes y muchos pensaron que estaban viendo una recomendación de buenas prácticas.
A diferencia de los atributos async
y defer
de javascript, esta técnica no respeta el orden en que fueron declarados los recursos y al final te ahorras una linea, potencialmente un microsegundo de carga y te ganas a cambio un DOM que no renderiza en forma homogénea y posiblemente tampoco determinística. En el mejor de los casos, el webmaster sabrá aplicarla solamente a los estilos menos críticos, en donde efectivamente puede que dé lo mismo si cargan en desorden.