Aller au contenu
Bientot le SIte Couillaman.VIP ×
Vie du geek le forum entre geek

Inscrivez-vous maintenant pour accéder à toutes nos fonctionnalités. Une fois inscrit et connecté, vous pourrez créer des sujets, publier des réponses aux discussions existantes, donner de la réputation à vos collègues, obtenir votre propre messager privé, publier des mises à jour de statut, gérer votre profil et bien plus encore. Si vous avez déjà un compte, connectez-vous ICI autrement Inscription un compte gratuit aujourd'hui!

dokkun

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

Messages recommandés

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.png

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.

Partager ce message


Lien à poster
Partager sur d’autres sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.

Chargement

×
×
  • Créer...