← Retour aux faqs


Peut-on éviter le rechargement total de la page d'un site web lors du passage d'une page à l'autre ?

Catégorie : Développement Web 

Oui, cela s'appelle une Single Page Application (SPA) site monopage en français. Mais cela ne veut pas dire que votre site n'aura qu'une page ! En effet, un site SPA peut simuler un site multipage tout en ayant techniquement une seule page.

L'avantage d'une SPA réside dans l'expérience utilisateur : pas de chargement de page donc fini le clignotement au changement de page. Sur ce genre de site le taux de rebonds est bien moindre que sur un site classique.

Pour faire une SPA, il y a 2 solutions : soit on charge tout le site au début de la connexion, soit on charge une partie du site et ensuite on fait des échanges asynchrones avec le serveur (on appelle cela de l'ajax) pour charger silencieusement ce que l'utilisateur veut.

Evidemment il y a un hic !

Charger tout le site d'un coup au démarrage, cela pénalise la première impression de l'utilisateur.

Faire de l'ajax partout, c'est écrire un code spagetti peu maintenable.

En fait, il existe 2 cas de figure :

1. La solution facile : le site est petit

Le développeur web charge tout le site sur une page et les différentes sections sont atteintes par scroll. Un exemple : http://bessieres.biz/.

Avantages : c'est simple à réaliser.

Inconvénients :

- Vous n'avez qu'une seule page d'un point de vue SEO, c'est limité.

- Vous devez charger pas mal de choses au démarrage ce qui pénalise la rapidité du site (donc son SEO et l'expérience utilisateur). C'est tout simplement impossible pour les gros sites ou applications.

- La navigation avec le bouton 'back' du navigateur ne marche pas.

2. La solution propre

Une vrai SPA fait appel au serveur de façon asynchrone, en ajax ou via des sockets bidirectionnelles. Les échanges sont invisibles pour l'utilisateur. Les techniques ont progressé et les frameworks comme Angular.js ou React.js permettent de faire des appels asynchrones sans surcharger le code. Des applications entières peuvent ainsi être développées sur une page alors qu'auparavant seuls quelques appels étaient faits en ajax et le code était difficilement maintenable.

Avantages : le chargement de la page est normal au début et le code est maintenable pour des grosses applications.

Inconvénients : Ce système pose différents problèmes que les développeurs web résolvent avec des techniques bien rodées. La première est l'historique de navigation. En effet, le navigateur ne peut enregistrer l'historique des pages chargées en ajax. Le bouton retour en arrière ne marche plus. Second inconvénient : les liens profonds et le SEO. Il faut pouvoir atteindre les pages profondes du site via l'url pour les utilisateurs mais surtout pour les moteurs de recherche. Les développeurs web disposent de différentes techniques pour résoudre ce genre de problèmes mais cela représente un coût.

 

Crédit photo : Paul Smith

Autres faqs sur la gestion de projet web et le développement web

Qu'est ce que le viewport d'une page web ?LIRE

Qu'est ce que le rendu côté serveur ?LIRE