instant-click

InstantClick: accélérer la navigation sur son site web

Temps de lecture : 2 minutes

InstantClick est une petite bibliothèque JavaScript bien sympathique puisque celle-ci permet d’accélérer la navigation sur un site internet.

Pour cela, InstantClick va précharger les pages lors de la navigation en se basant sur trois types d’évènements au choix :

  • au hover sur un lien
  • au hover sur un lien et après un délai
  • au mousedown (un lien n’est ouvert que lorsque le bouton de la souris est relâché, on gagne donc quelques millisecondes qui participent tout de même à donner cette impression de vitesse)

Si vous êtes un peu dubitatif sur le fonctionnement, je vous encourage à faire le test du clic sur la page suivante. Ainsi, on remarque que le délai écoulé entre le hover sur un lien et le clic est en général situé entre 200 et 500 ms.

instant click InstantClick: accélérer la navigation sur son site web

InstantClick va alors tirer profit de ce délai pour faire une requête en utilisant le combo pushState + Ajax (plus connu sous le nom de pjax) et propose de ce fait plusieurs avantages :

  • les fichiers JS et CSS ne sont pas recompilés à chaque changement de page
  • le chargement est casi imperceptible (pas de flash)
  • la navigation n’est pas cassée (un point crucial dans l’expérience utilisateur)

Maintenant, si vous choisissiez d’implémenter la lib sur votre site, je vous encourage à bien réfléchir avant au type d’évènement que vous souhaitez utiliser :

  • L’évènement hover sur un site contenant énormément de liens pourrait entrainer trop de requêtes superflues vers le serveur (et donc surcharger celui-ci inutilement)
  • L’évènement mousedown sera inefficace avec l’utilisation d’un trackpad. J’ai fait le test sur mon mac, le mousedown levé par un clic au trackpad génère un délai d’environ 7 ms (contre 100 ms avec le bouton physique).
  • L’évènement hover + délai semble lui être un bon compromis, à condition que le délai soit en dessous de la barre des 100 ms (sinon le mousedown lui sera préférable)

Pour finir, sachez qu’il ne vous suffira pas de charger InstantClick pour que tout se fasse comme par magie et vous aurez probablement besoin de faire quelques ajustements pour éviter le conflit avec vos autres scripts (notamment parce que l’évènement DOMContentLoaded ne sera pas déclenché par la lib).De plus, il faut être conscient que le script permettra d’accélérer la navigation et non d’améliorer les performances globales de votre site.

Réagissez à l'article