Cachez les chargements de page Pjax et NProgress

Catégorie: Web (Mis à jour le 23-03-2016 21:22:00)

On dit ouvent que la rapidité d'un site est un facteur déterminant pour fidéliser vos utilisateurs. Comme le web est de plus en plus accessible de partout, les utilisateurs s'attendent à surfer sur un site à la vitesse ou ils se servent des applications lourdes sur leur ordinateur.

Le web aujourd'hui est très bien et permet de faire de très belles choses. Mais quand on compare un site web avec une application native, on retrouve toujours le fameux clignottement à chaque changement de page. Ce n'est qu'un détail, mais cela casse totalement l'expérience utilisateur.

Une excellente expérience utilisateur se construit à partir des soins apportés aux détails.

Personnellement je trouve dommage de faire un site web avec un design ergonomique et travaillé si c'est pour casser toute l'immersion du visiteur au premier clic sur un lien!

Quoi faire?

J'avais envie d'apporter une touche de modernisme et de réactivité à mon site web. Et puis il n'y a pas de raison pour que mon site n'aie pas droit a une barre de chargement ergonomique alors que pleins de sites comme youtube ou medium en ont une!

Seulement voila, les techniques pour optimiser son interface sont complexes et souvent demandent du travail! Si comme moi vous n'avez pas une grosse équipe pour gérer la maintenance de votre site, il faut trouver une solution rapide et facile à mettre en place.

Comme en plus je veux garder mon site compatible même avec des navigateurs non mis à jour, ça deviens un vrai casse-tête car il faut trouver une solution non intrusive et qui se dégrade parfaitement sur les anciens navigateurs.

J'ai perdu plusieurs heures et quelques cheveux blancs pour trouver la solution parfaite, mais normalement si vous êtes ici vous n'aurez pas à endurer la même chose que moi.

Pjax et NProgress, le combo parfait

Le premier est un code javascript qui transforme tous les liens internes d'un site en appels ajax. Le second est une librairie qui affiche une barre de chargement en haut de la page.

Pjax est la contraction de pushState + ajax. PushState est la technologie apparue avec HTML5 qui permet de changer l'adresse en haut du navigateur depuis un script sans déclencher le chargement de la nouvelle page. Ajax est la technologie vieille comme les navigateurs qui permet à un script javascript de lancer un chargement de page en arriére plan et d'effectuer un traitement sur le contenu reçu.

La mise en commun des deux permet de déclencher un chargement de page invisible (ajax), tout en modifiant la page visible (contenu + url) de manière rapide et ergonomique. Ce changement se fait sans clignottement car la page n'est jamais totalement rechargée. Certaines parties sont simplement remplacées avec le nouveau contenu.

Si vous voulez une démonstration, je vous invite à cliquer sur un lien de mon site (par exemple ici ou la). Normalement une barre bleue en haut doit apparaitre. Sinon, votre navigateur est peut être trop ancien ou alors j'ai changé quelque chose qu'il ne fallait pas...

Mise en place

C'est bien beau de faire une démonstration, mais je sens déjà que certains s'impatientent.

Il existe plusieurs librairies pjax disponibles. J'ai choisi celle de MoOx car elle me semblait la plus simple à mettre en place.

Je vous invite donc à télécharger pjax.js, ainsi que nprogress.js et nprogress.css. N'oubliez pas d'inclure ces fichiers dans le head de vos documents html!

L'utilisation tient en quelque lignes de script qu'il faudra aussi inclure dans le document html:

N'oubliez pas d'adapter les valeurs de configuration (surtout les champs elements et selectors de pjax).

Normalement à partir de maintenant vous pouvez dire adieu aux changements de pages moches sur votre site web!

Cet article vous à été utile? J'ai oublié un détail important? N'hésitez pas à commenter pour me le faire savoir.

A lire aussi:

[PHP] [Laravel] Changer le format de date Eloquent

[Web] Voici un petit bout de code bien utile qui permet de changer le format de date retourné par défaut par les modeles Eloquent. Utile pour localiser simplement les dates de son site dynamiquement par exemple.
Suite...

Un forum avec laravel

[Web] Les forums sont courants sur le web. J'ai donc pris l'initiative de créer un package pour laravel permettant d'integrer rapidement un forum basique et customisable à votre site web.
Suite...