Best Of Développement Web E-commerce — 02 avril 2015 — 4 commentaires
Comment faire oublier les temps de chargement à vos visiteurs ?

Le temps de chargement figure parmi les variables importantes qui influencent le succès d’un site internet. Il y a quelques mois, nous vous rappelions quelques erreurs qui ralentissent votre site

Nous éditons un service en ligne spécialisé dans la détection des problèmes et l’optimisation des sites web (dareboost.com). Malheureusement, il est impossible d’avoir un site qui se charge instantanément, certains temps d’attente sont techniquement incompressibles. C’est pourquoi aujourd’hui nous vous proposons une autre vision de l’optimisation des performances web.

Et s’il était possible de faire oublier à un internaute qu’il est en train d’attendre ?

Astuce: vous manquez de temps ? Chaque paragraphe se termine par un bref résumé !

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 : facile à mesurer, 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 : la mesure du temps perçu est un exercice complexe. En effet, on s’intéresse ici à un sujet qui va dépendre de nombreux critères (temps de chargement effectif bien sûr, mais aussi des variables liées au contexte et à l’environnement de l’utilisateur).

perception-temps-subjective

Une étude s’est penchée sur la perception du temps de chargement et nous remonte ces informations :

  • 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.

(source – en anglais :  www.nngroup.com/articles/powers-of-10-time-scales-in-ux/ )

Ces premiers éléments étant apportés, 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 : c’est le sujet de la suite de cet article.

 

Privilégiez les contenus importants et les actions essentielles

Et si l’on commençait tout simplement par reformuler le problème de base ? 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, …

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).

Cette approche est d’autant plus intéressante lorsque votre page est longue. La mise en oeuvre de ce concept est cependant assez technique (images en base 64, inlining du CSS, etc), nous ne rentrerons donc pas dans les détails ici, mais n’hésitez pas à poser vos questions en commentaire.

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.

Notifiez l’utilisateur de la prise en compte de son action

Lorsque sur votre site, certaines opérations ne renvoient pas une réponse instantanée à l’utilisateur, veillez à signaler à ce dernier que sa demande a bien été prise en compte.

 

L'indicateur de chargement de Twitter
Twitter remplace son logo par un indicateur de chargement lors d’une recherche

Pour rappel, vous pouvez considérer une réponse instantanée pour un délai inférieur à 100ms.

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 message indiquant que la demande est en cours de traitement.

Cela vous apparaît certainement comme coulant de source, mais n’oubliez pas que souvent, les sites sont testés dans des conditions qui ne reflètent pas la réalité. Une action dont la réponse est instantanée sur un site en recette sur le réseau local d’une société aura nécessairement des résultats bien plus performants que ceux d’un internaute en 3G sur un mobile d’ancienne génération.

Toutes vos actions entraînent bien un signal de prise en compte ? C’est bien, mais nous pouvons aller plus loin !

Prenons l’exemple d’un internaute attribuant une note sur une fiche produit. Cette opération n’est pas critique et le risque d’erreur est presque nul. Pourquoi attendre pour informer l’internaute de la prise en compte de son action ? 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, puisque une éventuelle erreur n’aura pas de conséquence significative.

Faites le test avec la barre de partage sur les réseaux sociaux de cet article 😉 C’est une très bonne illustration puisque certains widgets sociaux vont même jusqu’à incrémenter leur compteur de partages dès votre premier clic, avant même de vous afficher la popup pour vous permettre de publier !

Vous trouverez probablement sur votre site des actions comparables, que vous pouvez traiter de manière optimiste sans aucun préjudice pour vos utilisateurs.

En bref : assurez-vous que toute interaction d’un utilisateur avec votre site donne lieu à une notification visuelle (en testant votre site dans des conditions dégradées). Identifiez les actions non critiques, qui peuvent être traitées de façon optimiste pour indiquer directement à l’utilisateur que le résultat de son action a été obtenu, même si vous n’en avez pas l’absolue certitude.

Utilisez des indicateurs de chargement pertinents

Malheureusement, 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 des contenus ou un résultat.

Il existe des cas dans lesquels l’attente peut être significative, car certaines opérations sont complexes et lourdes (recherche du billet d’avion au meilleur prix, etc)

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) par exemple.

barre-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. Cependant, veillez à ne pas sous-estimer le temps d’attente annoncé : auquel cas vous provoqueriez une frustration importante.

Le choix de l’indicateur n’est pas anodin, puisque vous pouvez même donner une illusion de vitesse (page en anglais). Dans cet article, on se rend bien compte de l’importance du temps perçu : en jouant uniquement sur l’aspect graphique d’une barre de chargement, vos utilisateurs peuvent penser que l’attente est 10% moins longue !

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.

En bref : les barres de chargement ou de progression sont des indicateurs pertinents lorsqu’une action entraîne un traitement assez lent. Attention à ne pas les utiliser dans le cas contraire. Travailler l’aspect graphique de ces éléments peut représenter un gain de 10% sur l’attente perçue.

Tirez profit de vos pop-ups (de choix de langue, de promo…)

Nombreux sont les sites internet à afficher, via une pop-up, du contenu promotionnel par exemple ou encore une demande du choix de pays. Des géants du e-commerce utilisent régulièrement cette technique et n’en tirent que rarement profit pour améliorer l’expérience de leurs utilisateurs. Au contraire les pop-ups contribuent le plus souvent à la dégrader.

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 ?

Exemple de popup, dont l'utilisation est obligatoire avant d'accéder aux contenus pourtant déjà chargés en arrière plan

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 (ou autre), une partie de la page demandée aura eu le temps de se charger.

Contrairement à certaines approches utilisées, d’une part, on évite 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 pourquoi cette technique n’est que rarement appliquée ? Probablement parce que si le site n’a techniquement pas été conçu pour anticiper ce genre d’usage, cela devient assez complexe à mettre en oeuvre. Nous le rappelons : le temps de chargement de votre site est un facteur clé de succès, la vitesse de votre site doit être envisagée comme une fonctionnalité prioritaire dans votre cahier des charges ! Une bonne solution est de se fixer un budget de performance web.

En bref : 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, préchargez les contenus

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.

Un exemple simple : vous disposez d’une landing page A, qui mène 95% de ses visiteurs à une page B. Dans un tel cas, il est possible de précharger les contenus de la page B dès la fin du chargement de la page A.

Et l’on peut aller encore plus loin puisque certains navigateurs permettent non seulement d’anticiper la récupération des contenus, mais aussi de précalculer le rendu de la page. Ainsi quand l’utilisateur passe de la page A à la B, le résultat est presque instantané, car il a déjà téléchargé les contenus et le navigateur a fait en amont les traitements nécessaires à l’affichage de B !

L’avenir semble assez prometteur sur ce sujet. Par exemple, des approches probabilistes sont en train de se développer, notamment pour prendre en compte les contraintes de bande passante ou de batterie (mobile) de l’internaute.

Si un internaute en fibre optique a 30% de chance de consulter une page C, on peut considérer intéressant de la précharger, car sa connexion le permet. Si on parle d’un mobinaute en Edge avec une batterie faible, prendre le risque de charger une page qui n’a qu’une chance sur 3 d’être consultée n’est sans doute pas un bon calcul.

Quelques cas d’utilisation simples du préchargement existent, mais l’exploitation poussée de cette technique est un sujet souvent 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 bref : 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.

Assurez-vous également d’avoir optimisé vos temps de chargement. Masquer l’attente est une bonne chose, la réduire concrètement est nécessaire voire indispensable ! Vous pouvez gratuitement prendre connaissance des optimisations techniques envisageables sur votre site en l’analysant sur dareboost.com.

Articles similaires

Articles Recommandés



L'auteur

Damien Jubeau

Je suis le CEO de DareBoost, une startup qui fournit un outil en ligne (SaaS) d'analyse de sites Internet : www.dareboost.com. Nous proposons une expertise unique et automatisée pour l'optimisation du temps de chargement de votre site web, mais aussi l'amélioration de sa qualité.Je suis ingénieur informatique et réseaux. J'ai auparavant travaillé pour un éditeur de logiciels pour le marketing mobile. J'ai également été concepteur web en freelance pendant 5 ans.

 


4 Commentaires

  1. Personnellement sur mon blog, avec wordpress j’ai vu de réellement changement sur mon nb de visite et la qualité, grâce au chargement rapide des images (Smush.It) et WP-Rocket..

    L’importance du chargement est vraiment très important surtout pour fidéliser les utilisateurs.

    Encore un très bon article,

    Bonne continuation.

  2. Merci Maxence pour votre commentaire !

  3. De très bons conseils dans l’ensemble, car le temps de chargement est souvent la dernière chose à laquelle on pense lors d’une refonte ou d’un nouveau projet, et c’est dommage !

    Une petite remarque toutefois : je suis complètement d’accord pour le chargement différé des widget réseaux sociaux (d’ailleurs sont-ils bien utiles ? Une simple image ou font icon pourrait parfaitement remplir la même fonction), autant pour le popup overt automatiquement je pense que c’est un mauvais choix à la base, sur desktop ou pire sur mobile, et qui est ou sera sanctionné par les internautes (et Google). Le contenu d’un blog m’intéresse ? Je m’abonne à son fil RSS. Pas besoin qu’on me force la main dès la première visite avec une popup m’incitant à m’inscrire à une newsletter.

  4. Je vous rejoins tout à fait Nicolas, mais il reste quelques cas dans lesquels cette popup peut se justifier !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *