Les Patterns des Grands du Web - Fluidité de l’expérience l’utilisateur

le 14/05/2012 par Guillaume Plouin
Tags: Software Engineering

“L’ergonomie n’est plus négociable aujourd’hui”. OCTO Technology

L’aspect incontournable de la performance

Il existe une conviction partagée chez les grands du Web : la performance perçue par l’utilisateur est critique. Cette performance a en effet un impact direct sur l'adoption du service et son utilisation dans la durée. Et le ressenti utilisateur est directement lié à la rapidité d’affichage des interfaces.

Le grand public se moque bien de l’architecture logicielle, de la puissance des serveurs, de la latence réseau provoquée par l’appel à des Web services... Tout ce qui lui importe, c’est l’impression de fluidité dans l’usage.

Les grands du Web l’ont bien compris et parlent ainsi de mesure en “battement de cils”. Tout se joue donc à l’échelle du 1/10ème de seconde. Leurs études, réalisées notamment grâce à du test A/B (cf. article à ce sujet), le démontrent clairement :

  • Amazon : une augmentation de + 100 ms de la latence signifie -1 % de ventes
  • Google : plus de 500 ms au chargement signifie - 20 % de trafic (pages vues)
  • Yahoo : plus de 400 ms au chargement signifie + 5 à  9 % d’abandon (rebond)
  • Bing : plus d’une 1 seconde au chargement signifie - 2,8 % de revenu publicitaire

Comment assurer cette performance

Suivant en cela le Pattern “device agnostic”, les grands du Web développent parfois des interfaces natives, parfois des interfaces Web, afin de toujours offrir la meilleure expérience utilisateur. Dans les deux cas, la performance perçue par l’utilisateur doit être maximisée.

Applications natives

Avec l’iPhone, Apple a réintroduit le développement au plus près du matériel (sans revenir à l’assembleur, tout de même) pour maximiser les performances perçues. Ainsi les technologies Java et Flash sont bannies de l’iPhone. La plateforme utilise aussi des artifices visuels : au lancement d’une application, il peut charger la vue du dernier état de l’application pour maximiser l’impression d’instantanéité, la véritable application étant chargée en tâche de fond. Sur Android, les applications Java sont exécutées sur une machine virtuelle optimisée pour la plateforme. Elles peuvent aussi être écrite en C pour maximiser les performances.

De manière générale, un consensus s’est dessiné autour du développement natif, en particulier sur plateformes mobiles : il doit être au plus près du matériel. Et des technologies multiplateformes comme JME, Flash ou Silverlight tendent à tomber en désuétude pour privilégier l’expérience utilisateur.

Applications Web

Le chargement complet d’un écran Web est souvent de l’ordre de 4 à 10 secondes tout compris (avec les images, le JavaScript, Le Flash, etc.)

Il apparaît que la lenteur d’affichage perçue est généralement liée pour 5% aux traitements sur serveurs, et pour 95% aux traitements du navigateur. Les grands du Web apportent donc un soin tout particulier à l’optimisation de l’affichage des pages Web.

Voici une liste des principales bonnes pratiques qui font consensus :

  • Il est crucial de mettre en cache les ressources statiques (les images, les feuilles de style CSS, les scripts JavaScript, les films Flash, etc.) lorsque c’est possible. Il existe pour cela diverses technologies de cache HTTP. L’optimisation de la durée de vie des ressources dans le cache est ainsi une compétence à acquérir.
  • Il est recommandé d’utiliser un réseau de cache, ou Content Delivery Network (CDN),  pour placer les ressources au plus près des utilisateurs et limiter l’impact de la latence réseau. Disposer de serveurs de cache dans tous les pays où résident des utilisateurs est vivement recommandé.
  • Le chargement en tâche de fond permet de masquer la lenteur d’affichage de certains éléments de la page.
  • Une pratique, très fréquente consiste à utiliser des “sprites” : il s’agit d’agréger des images dans un même fichier pour limiter le nombre de ressources à charger ; elles seront ensuite découpées à la volée par le navigateur (voir l’exemple Gmail ci dessous).
  • Le recours à des noms de domaines multiples permet de maximiser la parallélisation dans le chargement simultané de ressources par le navigateur. En effet, les navigateurs sont soumis à un nombre maximal de requêtes simultanées sur un même domaine. Ainsi Yahoo.fr charge ses images à partir de l.yimg.com
  • Placer les ressources JavaScript en toute fin de page pour que le visuel apparaisse le plus vite possible
  • Minifier, c’est à dire supprimer du code tous les caractères (retour chariot, commentaires) servant à la relecture mais pas l’exécution du code.
  • Compacter les différents fichiers de code source tels que JavaScript dans un seul fichier, quand c’est possible

Chez qui ça fonctionne ?

Les exemples d’usage du pattern sont nombreux chez les grands du Web : on peut citer Google, Gmail, Amazon, Yahoo, ...

Les références chez les grands du Web

Google possède le réseau de cache distribué le plus maillé des grands du Web : le géant de la recherche disposerait de machines dans toutes les grandes villes, et même d’un réseau privé mondial, selon des rumeurs difficiles à vérifier.

Google Search pousse l’expérience utilisateur temps réel très loin avec “Instant Search” qui charge les résultats de recherche au fur et à mesure de la frappe clavier. Cette fonction est une prouesse technique : elle a soulevé nombre de questions dans la communauté des architectes (cf. liens ci dessous).

Gmail est construit quasiment en HTML : les images de l‘interface sont réduites au strict nécessaire (2 “sprites” d’icônes, voir ci dessous), et  le site fait un usage extensif du cache et du chargement JavaScript en tâche de fond.

France

Sites utilisant ou ayant utilisé le réseau de cache distribué (CDN) Akamai :

  • cite-sciences.fr
  • LeMonde.fr
  • Allocine.com
  • UrbanDive.com

Et chez moi ?

L’effet de la latence d’affichage est le même sur les applications internes, propres à une DSI : exaspération des utilisateurs et abandon du recours à l’application.

Le pattern s’applique donc parfaitement en interne.

Exceptions !

Elles sont rares : on peut évoquer les applications asynchrones et les batchs.

Retrouver toutes les pratiques des Géants du Web sur le site dédié (www.geantsduweb.com) : pdf de l'ouvrage à télécharger, vidéo et compte-rendu de la présentation "Décrypter les secrets des Géants du Web"

Sources