Le recours aux SPA offre deux grandes possibilités dont vous pouvez tirer parti pour améliorer l'expérience des utilisateurs :
Moins de contenu téléchargé
Si vous avez des pages HTML différentes pour chaque page de votre application, vous devrez télécharger chacune d'entre elles dans son intégralité. Si votre site partage un balisage commun entre les pages, il sera retéléchargé pour chaque page. Comparez cela avec un SPA où, au minimum, vous ne téléchargez que les modifications nécessaires pour passer de la page actuelle à la suivante. Dans certains cas, l'amélioration sera minime, dans d'autres, elle sera assez importante.
Un autre moyen d'améliorer l'efficacité des SPA consiste à séparer la logique de construction du balisage et les données. Prenons l'exemple d'une liste contenant 100 noms et scores :
Traditionnel :
<ul id="myList">
<li><strong>Name 1</strong> score 1</li>
<li><strong>Name 2</strong> score 2</li>
<li><strong>Name 3</strong> score 3</li>
...
<li><strong>Name 100</strong> score 100</li>
<ul>
SPA :
<ul id="myList"></ul>
var myData = {
"Name 1" : "score 1",
"Name 2" : "score 2",
"Name 3" : "score 3",
...
"Name 100" : "score 100"
}
var html = '';
for (var name in myData) {
var html += '<li><strong>' + name + '</strong> ' + myData[name] + '</li>';
}
document.getElementById('myList').innerHTML = html;
Le modèle SPA peut économiser des octets même lors de la construction du DOM. De plus, la logique est réutilisable, donc si vous devez reconstruire la liste avec plus de contenu, il vous suffit d'ajouter des éléments à un objet et d'appeler une méthode.
Trouver l'équilibre parfait entre la taille du téléchargement et le traitement nécessaire est un problème très difficile qui dépend de nombreux facteurs, notamment des particularités de l'application, du périphérique, des autres astuces possibles, etc. Heureusement, une approche fondée sur le bon sens donne d'assez bons résultats la plupart du temps.
Transitions
À part quelques expériences avec IE, il est impossible de modifier les transitions entre les différentes pages dans le navigateur. Il s'agit d'un argument de vente important pour les SPA car, grâce à des transitions astucieuses, vous pouvez donner une impression de rapidité même si le site n'est pas si rapide. Même sans transitions, un SPA est bien mieux adapté qu'un site ordinaire pour donner un feedback à l'utilisateur pendant le chargement.
Il convient de noter que vous devez vous concentrer sur le chargement initial de la page pour qu'il soit le plus fluide possible (en ne chargeant que le strict minimum) et ensuite regrouper les demandes autant que possible. Un gros problème avec la latence mobile est que si l'appareil n'a pas besoin d'utiliser la radio pendant un certain temps, elle sera désactivée. Le fait de la rallumer entraîne une surcharge importante, c'est pourquoi les demandes doivent être groupées autant que possible.
Mon conseil personnel est que si vous pouvez aller au SPA, vous devriez le faire. Il y a très peu de choses qui peuvent être faites pour améliorer l'efficacité des sites HTML ordinaires, alors que je soupçonne que les SPAs continueront à être améliorés constamment dans le futur. Au minimum, vous pouvez attendre d'un SPA soigneusement construit des performances similaires à celles d'un site HTML classique, et les opportunités potentielles peuvent apporter de grandes récompenses.
