Le temps de chargement figure parmi les variables importantes qui influencent le succès d’un site internet. Malheureusement, il est impossible d’avoir un site qui se charge instantanément. C’est pourquoi je vous propose une autre vision de l’optimisation des performances.

Temps d’attente, notre perception est très subjective

Pour commencer, il est bon de distinguer deux niveaux différents :

Le temps de chargement effectif : il représente l’intervalle entre l’action de l’utilisateur et l’obtention du résultat.

Le temps d’attente perçu par l’utilisateur : il représente le temps de chargement effectif bien sûr, mais aussi des variables liées au contexte et à l’environnement de l’utilisateur.

Une étude s’est penchée sur la perception du temps de chargement et nous avons pu y découvrir que :

• Moins de 100ms : le délai n’est pas perceptible ;
• Moins d’une seconde : le délai est perceptible, mais l’utilisateur suppose que le traitement est en cours et que ce n’est pas anormal ;
• Plus d’une seconde : on perd la sensation de rapidité ;
• Plus de 10 secondes : on a perdu l’essentiel de l’attention de l’utilisateur. Même s’il n’abandonne pas son action, il risque d’avoir oublié une partie du contexte associé et la reprise de l’action en cours risque d’être problématique.

On voit bien la difficulté des enjeux : presque aucune page web ne s’affiche en moins d’une seconde et encore moins en 100ms, même dans des conditions idéales.

Nous allons donc voir comment jouer sur la perception du temps de chargement, c’est à dire comment faire penser à vos visiteurs que votre page est plus rapide qu’elle ne l’est en réalité.

En bref, notre perception du temps varie selon le contexte et bien d’autres éléments. Là où le temps de chargement effectif peut être techniquement incompressible, il existe souvent des solutions pour jouer sur le temps perçu.

Privilégiez les contenus importants et les actions essentielles

Dans l’absolu, un internaute ne s’intéresse pas au temps de chargement de votre page. Il cherche à effectuer une action ou à consulter un contenu. C’est donc le temps d’attente avant disponibilité de cette action ou de ce contenu qui doit vous intéresser.

Vous pouvez assez naturellement établir une hiérarchie sur l’importance des contenus d’une page donnée, même s’il faut prendre en compte que tous vos internautes n’ont pas les mêmes intérêts ni les mêmes comportements.

En affichant au plus tôt le contenu le plus important de votre page, vous permettez à vos internautes d’obtenir rapidement les informations qu’ils recherchent et diminuez ainsi la sensation d’attente.

Par exemple lorsqu’un internaute arrive sur une fiche produit, vous devez lui fournir en premier ce qui concerne directement le produit : description, prix, illustrations, etc.

Inversement, certains contenus ou fonctionnalités n’ont pas d’utilité immédiate pour le visiteur. C’est le cas par exemple des widgets sociaux : on conçoit très facilement que charger cette fonctionnalité avant le contenu principal n’a aucun intérêt. Pourquoi un utilisateur partagerait un contenu qu’il n’a pas encore consulté ?

Dans le même ordre d’idée, il est important de rendre prioritaire l’affichage du contenu au-dessus de la ligne de flottaison, c’est à dire le contenu qui est immédiatement visible par un internaute (sans avoir à scroller pour faire défiler la page).

En bref : vos contenus les plus importants doivent être présents au-dessus de la ligne de flottaison (l’utilisateur ne doit pas scroller pour les voir) et chargés en priorité. Vous devez veiller à ce que les contenus secondaires (widgets sociaux, etc) ne retardent pas le chargement des contenus principaux.

Il y a fort à parier qu’il vous est arrivé de cliquer de façon répétée sur un bouton, pensant que l’action n’avait pas été prise en compte. Puis de comprendre quelques instants plus tard que le résultat était tout simplement lent à arriver. Nous avons tous vécu des expériences de ce type et pourtant cette frustration peut, dans la plupart des cas, être évitée très simplement.

Un simple changement d’état du bouton par exemple ou un message indiquant que la demande est en cours de traitement. Dès le clic de l’internaute, vous pouvez le remercier de son action, inutile d’attendre le résultat de la requête au serveur.

Assurez-vous que toute interaction d’un utilisateur avec votre site donne lieu à une notification visuelle. Identifiez les actions non critiques, qui peuvent être traitées de façon optimiste pour indiquer à l’utilisateur que le résultat de son action a été obtenu.

Utilisez des indicateurs de chargement pertinents

Par contre, toutes les interactions ne peuvent pas être traitées de manière optimiste. La raison la plus simple et la plus courante : vous avez besoin d’interroger le serveur pour y récupérer du contenu ou un résultat. Il existe des cas dans lesquels l’attente peut être significative, car certaines opérations sont complexes et lourdes.

Une action doit renvoyer un signal et ce signal doit être cohérent avec l’attente qui va suivre. Lorsque vous savez qu’un temps d’attente conséquent va être nécessaire, pensez à utiliser une barre de chargement ou de progression.

En effet, il est impératif de signaler à votre utilisateur, non seulement que l’action a été prise en compte, mais également que le traitement est en cours. Sans cela, vous vous exposez à ce que l’utilisateur pense à un dysfonctionnement, relance son action ou l’abandonne complètement.

Les barres de progression offrent en plus l’avantage de donner une idée du temps d’attente restant à l’utilisateur, délivrant donc une information supplémentaire. 

Attention toutefois, n’abusez pas des indicateurs de chargement. Si l’attente est faible, la présence d’un indicateur sera néfaste, puisque même si son affichage est bref, vous avez envoyé à l’internaute un signal lui indiquant que le traitement est lent.

Tirez profit de vos pop-ups

Nombreux sont les sites internet à afficher, via une pop-up, du contenu promotionnel. 

Qui n’a jamais vu une page se charger, commencer à y lire quelques mots, et se voir subitement interrompu par l’apparition d’une pop-up ? Pourquoi cette pop-up ne s’est elle pas chargée en priorité si l’on souhaite nous l’imposer ?

Une utilisation plus pertinente d’une telle pop-up consisterait à l’afficher le plus rapidement possible, et permettre ainsi à la page de se charger en arrière-plan de manière invisible, puisque masquée par la pop-up.

En effet le temps que le visiteur consulte la promotion présentée, une partie de la page demandée aura eu le temps de se charger. On évite ainsi la frustration d’interrompre une action entamée par l’utilisateur, et d’autre part, on masque en grande partie le temps de chargement de la page principale (qui se fait en arrière-plan pendant la consultation du contenu de la pop-up par l’utilisateur).

Alors que les pop-ups sont souvent source de frustration parce qu’elles interrompent la navigation de l’internaute, elles pourraient être affichées immédiatement et utilisées de façon pertinente pour précharger le contenu de la page en arrière-plan.

Apprenez de vos utilisateurs

Plusieurs techniques existent pour précharger une page web à différents niveaux. Le concept général est d’anticiper qu’un élément va être nécessaire lors d’une prochaine action de l’utilisateur et donc d’anticiper les traitements requis par cette action. Ainsi, on va accélérer le chargement lorsque l’utilisateur déclenchera l’étape concernée.

Quelques cas d’utilisation simples du préchargement existent, mais l’exploitation poussée de cette technique est un sujet complexe. Heureusement, plusieurs outils se développent en ce sens, pour automatiser sa mise en place à partir de l’exploitation des données de navigation.

En étudiant le comportement des visiteurs d’un site, on est amené à anticiper certains schémas de navigation. On peut tirer profit de cette connaissance pour effectuer des pré-traitements en vue d’améliorer le temps de chargement. Un sujet vraisemblablement plein d’avenir.

Conclusion

L’attente est parfois nécessaire, certains traitements sont incompressibles. Mais avec les techniques que nous avons évoquées, vous disposez des bases qui vous permettront de minimiser l’attente ressentie par vos visiteurs. Leur satisfaction sur votre site en sera améliorée.