Precargar Contenido

Según cuáles sean las características y requerimientos de una página a la hora de ser cargada por el navegador, se puede dar el caso de que se requiera que ciertos scripts o elementos estén disponibles al momento de que los elementos sean cargados; todo esto para el correcto funcionamiento de la página. Sin embargo, la forma en la que se cargan los diversos archivos que conforman una página web se encuentra ya establecida de antemano.

Existe una forma de asignar un elemento o dato para que sea tratado con prioridad por el navegador a la hora de cargar la página, para que de ese modo este recurso esté disponible al momento de que sea requerido. Este tipo de configuración se logra empleándolo en los metadatos de la página, más precisamente con el elemento "link", el cual posee el atributo "rel" que a su vez cuenta con el valor "preload".

En otras palabras, al aplicarse el valor "preload" en el atributo "rel" del elemento "link", se puede definir que algún elemento se cargue con antelación ya que este será requerido rápidamente al cargarse la página. Un aspecto a tener en cuenta de esta implementación es que, pese a que el nombre de este valor contiene el término 'precargar', realmente este no carga ni ejecuta ningún script; simplemente asigna que estos elementos seleccionados sean descargados y almacenados en caché con prioridad.

Por lo tanto, el elemento "link" no solo se utiliza para cargar los estilos CSS de la página.

Sino que también tiene la función de designar algún elemento para que se precargue al iniciarse la carga de la página, como se puede apreciar en el siguiente ejemplo:

Este ejemplo, aparte de simple, puede parecer trivial; sin embargo, los beneficios de implementar el "preload" se hacen notar a la hora de que los demás elementos HTML sean cargados. Por ejemplo, es útil seleccionar a los siguientes elementos para que sean precargados con antelación:

Recursos a los que se les apunta desde dentro de CSS, como fuentes o imágenes.
Recursos que puedan solicitar JavaScript, como archivos JSON, scripts importados o web workers.
Imágenes más grandes y archivos de video.

Al emplear el "preload" es importante tener presente:

La ruta hacia el recurso en cuestión.
De qué tipo de recurso se trata.

Atributo AS

Es posible mejorar el rendimiento del "preload" con el atributo "as", el cual se utiliza en conjunto con este y permite definir de qué tipo de archivo se trata la precarga. Al hacer esto se obtienen las siguientes ventajas:

Priorizar la carga de recursos con mayor precisión.
Almacenar en caché para futuras ocasiones, reutilizando el recurso si es preciso.
Aplicar la política de seguridad correcta al recurso.
Establecer los encabezados de solicitud de aceptación correctos.

Debido a que es posible precargar muchos tipos de archivos, el atributo "as" posee muchos valores; algunos de estos son:

Valor del atributo	Tipo de archivo	Descripción
audio	Audio	Define un archivo de audio; se incorpora igual que lo haría en un elemento "audio".
document	Documento	Define un documento HTML que será incrustado en un "frame" o un "iframe".
embed	Algún recurso	Cualquier recurso que será incrustado en un "embed".
fetch	Recurso Fetch o XHR	Recurso al que se accederá mediante una solicitud fetch o XHR, como un archivo ArrayBuffer, WebAssembly/WASM binario o JSON.
font	Fuente	Define un archivo de fuente CSS.
image	Archivo de imagen	Define la precarga de un archivo de imagen; normalmente se usa para imágenes particularmente grandes.
object	Algún recurso	Un recurso para ser incrustado en un elemento "object".
script	Archivo JS	Define la precarga de un archivo JavaScript.
style	Estilos CSS	Define la precarga de una hoja de estilos CSS.
track	Archivo WebVTT	Define la carga de un archivo WebVTT.
worker	Worker web o JS	Define la precarga de un worker de JavaScript o un worker compartido.
video	Archivo de video	Define la precarga de un archivo de video como los que se usan comúnmente en los elementos "video".

Incluyendo el tipo MIME

Los elementos "link" son capaces de recibir un atributo "type", el cual a su vez puede recibir el tipo MIME del recurso al que apunta el elemento. Esto es particularmente útil cuando se precargan recursos; en otras palabras, la función de esto es que el navegador tenga una forma de determinar si el recurso es compatible consigo mismo. En caso de que lo sea, el recurso será descargado; por otro lado, en caso de que no sea compatible, el recurso simplemente será ignorado por el navegador.

Nota: MIME o Multipurpose Internet Mail Extensions es una extensión del protocolo de correo de Internet original que permite a las personas utilizar el protocolo para el intercambio de diferentes tipos de archivos de datos en Internet: audio, vídeo, imágenes, programas de aplicaciones y otros tipos, así como el texto.

A continuación se muestra un fragmento de código el cual, en términos simples, es el responsable del comportamiento central detrás de la precarga general:

Este código de ejemplo asigna un video.mp4 para que se cargue previamente en todos aquellos navegadores que tengan soporte para videos mp4; por lo tanto, para los usuarios de estos navegadores la interacción con el video será más suave y receptiva en comparación con aquellos navegadores que no sean compatibles con el recurso.

Es bueno tener en cuenta que, en el caso de que se emplee la técnica de asignar tanto un video ".mp4" como uno ".webm" con el fin de mejorar la compatibilidad, si se llega a presentar un usuario desde un navegador que posea compatibilidad con ambos formatos, entonces los dos recursos serán descargados; todo esto pese a que realmente solo uno de estos llegará a ser utilizado, como se puede apreciar en este ejemplo:

Por lo tanto, no es recomendable precargar varios recursos para un mismo elemento; para estos casos lo mejor simplemente es precargar el recurso que se crea que llegará a ser utilizado por la mayoría de los usuarios. Cabe señalar que esto no hará que el video.webm no esté disponible para los navegadores que lo requieran; de hecho, en el ejemplo HTML mostrado con anterioridad, ese código también hace que se precargue el video.webm, pero lo define de una forma que hará que este no sea precargado innecesariamente para todos los usuarios.

Recuperaciones habilitadas para CORS

Al precargar recursos que se obtienen con CORS habilitado (por ejemplo, fetch(), XMLHttpRequest o fuentes), se debe tener especial cuidado al configurar el atributo crossorigin en su elemento de enlace. El atributo debe configurarse para que coincida con el modo de credenciales y CORS del recurso, incluso cuando la recuperación no es de origen cruzado.

Nota: Recordemos que el intercambio de recursos de origen cruzado o CORS es un mecanismo que permite que se puedan solicitar recursos restringidos en una página web desde un dominio diferente del dominio que sirvió el primer recurso.

Como se mencionó anteriormente, un caso interesante en el que esto se aplica son los archivos de fuentes. Por varios motivos, estos deben obtenerse mediante CORS en modo anónimo; usando este caso como ejemplo resultaría en lo siguiente:

En este ejemplo no solo se proporcionan sugerencias de tipo MIME en los atributos de tipo, sino que también se proporciona el atributo de origen cruzado para asegurar que el modo CORS de la precarga coincida con la solicitud de recurso de fuente eventual.

Incluyendo Media

Una buena característica de los elementos "link" es su capacidad para aceptar atributos "media"; esto le permite aceptar "media types" (tipos de media) o "media queries" (consultas de medios), lo que permite realizar una precarga receptiva como se puede apreciar en el siguiente ejemplo:

En este caso, el código precarga una imagen a través de dos elementos "link"; esto debido a que se está asignando el uso de cada uno para una circunstancia en particular. En base al ancho de la pantalla en la que se visualice la página, se procederá a precargar una imagen grande o una pequeña. La ventaja de hacer esto es que se aumentan las posibilidades de que el recurso esté disponible para la presentación de la página, reduciendo el FOUT (flash de texto sin estilo).

Este tipo de prácticas no tiene por qué limitarse a imágenes o a archivos del mismo estilo; por ejemplo, se podría mostrar una imagen o gráfica SVG cuando se utilicen pantallas pequeñas, de ese modo se garantiza la calidad de esta, e incluso usar un script de JavaScript u otro dependiendo de las capacidades del navegador.

Precargar Script de JavaScript

Como ya se ha mencionado anteriormente, es posible precargar scripts de JavaScript. Recordemos que la precarga no significa que se ejecutará el script; por ejemplo, el siguiente código:

Aquí creamos una instancia de HTMLLinkElement y luego la adjuntamos al DOM; esto significa que el navegador precargará el archivo myscript.js, pero aún no lo usará. Para usarlo se podría hacer esto:

Esto es útil cuando desea precargar un script, pero luego posponer la ejecución hasta exactamente cuando lo necesite.

Otras formas de precargar recursos

Existen otras formas de precargar recursos, pese a que ninguna es tan adecuada como el atributo "preload". Estas formas son:

link rel='prefetch': Ha sido compatible con los navegadores durante mucho tiempo, pero está diseñado para obtener recursos que se utilizarán en la próxima carga de navegación/página (por ejemplo, cuando vaya a la página siguiente). En algunos casos puede ser útil, pero no lo es para la página actual, sin mencionar que los navegadores darán a los recursos de "prefetch" una prioridad más baja que los de "preload"; después de todo, la página actual es más importante que la siguiente.
link rel='prerender': Representa una página web específica en segundo plano, acelerando su carga si el usuario navega hacia ella. Debido al potencial de desperdiciar el ancho de banda de los usuarios, Chrome trata la representación previa como una captación previa de NoState.
link rel='subresource': (No forma parte del estándar) fue compatible con Chrome hace un tiempo y estaba destinado a abordar el mismo problema que la precarga, pero tenía un inconveniente: no había forma de determinar una prioridad para los elementos, por lo que todos fueron obtenidos con una prioridad bastante baja.
Hay una serie de cargadores de recursos basados en secuencias de comandos, pero no tienen ningún poder sobre la cola de priorización de recuperación del navegador y están sujetos a los mismos problemas de rendimiento.

Compatibilidad con Navegadores

A continuación se muestra una breve tabla de la compatibilidad de este atributo en las diferentes versiones de los principales navegadores: