InstantClick: Reduce la latencia en los enlaces

InstantClick es una propuesta interesante y que trabaja en un aspecto casi olvidado por la mayoría de nosotros: la latencia que provoca visitar una pagina.

Esta latencia se refiere al tiempo que pasa entre que hacemos click en un enlace hasta que finalmente se carga la pagina de destino, según el autor de este proyecto este tiempo oscila entre los 200 y 300ms.

La propuesta de InstantClick consiste en precargar los destinos de los enlaces para que cuando una persona presione un enlace el destino se muestre inmediatamente después.

precargar enlaces html

El principal problema de esto es que muchas paginas se estarían precargando sin necesidad, recordamos que no todo el mundo visita todos los enlaces contenidos en un documento HTML, para evitar esto InstantClick nos brinda la posibilidad de precargar solo el contenido según el estado hover de un enlace.

Otra opción para decidir que destinos se van a precargar es utilizando el evento mousedown, esta es otra posibilidad provista por InstantClick. Estas opciones las tendremos que evaluar según nuestras necesidades.

Si hablamos de aspectos técnicos, InstantClick emplea pjax para funcionar, una combinación de Ajax y PushSate. Pjax es un plugin jQuery que facilita el proceso de precargar enlaces con unas muy pocas lineas de código.

Esta tecnica tiene algunas ventajas significativas: el navegador no necesita volver a cargar los script y estilos para ir a otra pagina y probablemente ventaja más importante: el visitante no verá nunca la pantalla blanca que surge de saltar de pagina en pagina.

Ejemplo de uso:

<script src="instantclick.min.js" data-no-instant></script>
<script data-no-instant>InstantClick.init();</script>

También podemos definir cuando InstantClick debe realizar la precarga:

InstantClick.init('mousedown');

Demo: InstantClick

Categorizado en: