Cachez les chargements de page Pjax et NProgress

La rapidité est un paramétre important a prendre en compte quand on doit se mesurer aux applications natives. Face a la concurence des applications natives, une simple latence lors du changement de page peut casser toute l'expérience utilisateur de votre site.

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

Il existe de nombreuses techniques pour rendre un site plus réactif, mais beaucoup doivent être appliquées dés la conception. Dans ce post, je vais plutôt vous montrer une alternative simple et qui s'adapte trés bien à n'importe quel site existant.

D'ou viennent les temps d'attente ?

Il existe deux types de latences quand il s'agit de changement de page.

Il y a d'abord la latence du réseau: C'est elle qui va determiner le temps que l'utilisateur va attendre entre le clic sur le lien, et le moment ou la page actuelle s'efface.

Il y a ensuite la latence du rendu: Une fois que le contenu a afficher est reçu, votre navigateur va devoir le dessiner a l'écran. Cette latence détermine le temps d'attente entre le moment ou l'ancienne page s'efface et ou la nouvelle s'affiche.

Comment les réduire ?

Pour réduire ces deux temps d'attente, il n'y a qu'une seule solution: il faut optimiser le contenu transféré. On peux par exemple ne renvoyer que les parties qui changent entre les pages, et laisser le navigateur ne redessiner que ces parties la de notre site

Par exemple si votre menu ne change pas entre les pages, il est inutile de le renvoyer a chaque fois. Autant le laisser afficher et ne changer uniquement que le contenu.

C'est à ce moment qu'entre en jeu la librairie pJax. Cette librairie open source à pour objectif de remplacer tous les liens standards par des appels Ajax. Une fois le contenu reçu, elle va ensuite remplacer une partie du DOM de votre page par le nouveau contenu.

L'implémentation est triviale: Importez le fichier source de pjax, et executez ce code au chargement de page:

//Configure pjax
new Pjax({
  elements: "a",                                          //Quel type d'élément binder (les liens)
  selectors: ["title", ".mainContent", ".top-nav-menu"],  //Quels parties du html peuvent changer entre les pages
});

Sans rentrer dans les détails trop techniques, pJax va intercepter les liens, tenter de charger la page cible, puis effectuer un remplacement des zones du DOM configurées si elles sont présentes dans le DOM reçu. La librairie fourni aussi différents fallbacks pour revenir a un chargement standard si le contenu reçu ne rentre pas dans ses critéres.

NProgress: La petite touche supplémentaire

Avec la solution précédente, on voit bien que la page ne clignotte plus lors du chargement de page. Mais lorsqu'on clique sur un lien, le contenu met toujours du temps a changer. Ce n'est pas encore optimal car lors du clic, l'utilisateur ne voit pas directement que quelque chose se passe.

Pour arranger ça, nous allons utiliser la librairie nProgress afin de rajouter une barre de chargement pour indiquer que le clic a bien été pris en compte.

L'implémentation avec PJax est aussi trés simple, on charge la source de nprogress, puis on bind les events de pjax pour déclencher son affichage:

//Configure NProgress
NProgress.configure({ 
  minimum: 0.1,
  rickleRate: 0.2,
  trickleSpeed: 250
});
  
//Start loading on pjax request
$(document).on('pjax:send', function() {
  NProgress.start();
})
//Stop loading when pjax is done (success or error)
$(document).on('pjax:complete', function() {
  NProgress.done();
})

Si tout va bien maintenant vous aurez une barre de chargement en haut de votre écran.

Aller plus loin

Pour l'instant nous remplaçons juste le contenu qui nous interesse dans la page, mais le serveur lui continue d'envoyer la totalité de la page au navigateur. Il existe des plugins pour les frameworks les plus courant qui permettent de filtrer et de ne renvoyer que le html intéréssant.

Voici une liste non exhaustive: