Mejorar y agilizar la carga de las páginas web precargando enlaces

Hace algún tiempo estuve presente en una conversación donde se discutía por qué las páginas de la documentación de cierto sitio web se cargaban de manera instantánea. Es decir, hacías click en un enlace y la carga era inmediata.

Analizando algunas cosas se descubrió que los componentes eran precargados cuando el usuario ponía el cursor sobre un enlace, es decir, cuando el usuario estaba a punto de hacer click para navegar a otro lugar.

Después de eso vi que se crearon muchas librerías, y justamente hoy vamos a ver cómo usar una de ellas para hacer más rápida la carga de una página web a la que navega el usuario: instant.page.

La ventaja de agilizar la carga de nuestros sitios web

Se supone que esto de la velocidad afecta o beneficia muchas cosas. Por ejemplo, un usuario puede abandonar nuestro sitio si tarda mucho en cargar, o no comprar algo en nuestra tienda en línea.

Funcionamiento de la librería

La librería funciona en móvil y PC (la diferencia es que en la PC hay un puntero y en el móvil no) detectando cuando un usuario está a punto de hacer click en un enlace.

Normalmente, antes de navegar a un enlace, ponemos el cursor sobre el enlace. Pues la librería aprovecha justamente ese instante (detecta si pusiste el cursor por más de 65 milisegundos) para cargar el enlace.

Cuando navegues al enlace, ya se habrá cargado y ahora se leerá desde el caché. Algo parecido sucede en el móvil.

De esta manera las páginas se “precargan” y el usuario percibe una mejora.

Precargar páginas con instant.page

Ahora sí a lo que venimos. No hay que saber mucho de programación, simplemente tienes que poner lo siguiente antes de cerrar tu etiqueta body:

<script src="//instant.page/1.1.0" type="module" integrity="sha384-EwBObn5QAxP8f09iemwAJljc+sU+eUXeL9vSBw1eNmVarwhKk2F9vBEpaN9rsrtp"></script>

Visita la página oficial para obtener una versión fresca del fragmento de código.

Después de incluir el script no tienes que hacer nada, la librería se encargará de precargar los enlaces por ti.

Demostración

Veamos este GIF en donde analizamos las peticiones de la red. Cuando ponemos el cursor sobre un enlace, se hace una nueva petición.

Después, al navegar a dicho enlace, se carga del caché.

Omitir o forzar algunos enlaces

La librería indica que por defecto no precarga los enlaces que tienen parámetros get. Por ejemplo hola?parámetro=valor por los efectos colaterales que podría causar.

Si queremos forzar a que se precarguen cuando el usuario pone el cursor sobre ellos, les ponemos un atributo llamado data-instant a los elementos a. Así:

<a href="algun_enlace?hola=mundo" data-instant>Soy un enlace</a>

De la misma manera, si queremos forzar a que sean ignorados les ponemos un atributo llamado data-no-instant a los elementos a. Así:

<a href="algun_enlace?hola=mundo" data-no-instant>Soy un enlace que no se precarga</a>

Finalmente, si tenemos muchos enlaces con parámetros get y queremos que todos sean precargados, agregamos el atributo data-instant-allow-query-string al elemento body.

Conclusiones

Cabe mencionar que la librería no hace magia ni hará tu sitio web más rápido; simplemente precarga los enlaces. De ahí, el tiempo de respuesta y la cantidad de datos dependen del administrador de la web.

Por cierto, ya dije que la carga del script debe ser puesta en todos los lugares en donde se desee tener esta característica; y funciona para cualquier preprocesador de HTML, por ejemplo, PHP.