Fluidit

de lexprience
utilisateur
LES GANTS DU WEB

> retour table des matires

 CULTURE / FLUIDIT DE LEXPRIENCE LUTILISATEUR

Description
La performance, un enjeu incontournable

Il existe une conviction partage chez les gants du Web : la

performance perue par lutilisateur est critique. Cette performance
a en effet un impact direct sur ladoption du service et son utilisation
dans la dure. Et le ressenti utilisateur est directement li la rapidit
daffichage des interfaces graphiques (IHM).

Le grand public se moque bien de larchitecture logicielle, de la puissance

des serveurs, de la latence rseau provoque par lappel des web services...
Tout ce qui lui importe, cest limpression de fluidit dans lusage.

lergonomie nest plus ngociable aujourdhui

Les gants du Web lont bien compris et parlent ainsi de mesure en

battement de cils . Tout se joue donc lchelle du 1/10e de seconde.
Leurs tudes, ralises notamment grce du test A/B (cf. Test A/B
p. 117), le dmontrent clairement :

Amazon :
une augmentation de 100 ms de la latence signifie une baisse de 1 %
de ventes.

Google :
plus de 500 ms au chargement signifie 20 % de trafic perdu (pages
vues).

Yahoo! :
plus de 400 ms au chargement signifie + 5 9 % dabandons.

Bing :
plus dune 1 seconde au chargement signifie une perte de 2,8 %
de revenu publicitaire.

Comment assurer cette performance ?

Suivant en cela le pattern Device Agnostic (cf. Device

Agnostic p. 123), les gants du Web dveloppent selon les cas
des interfaces natives, ou des interfaces Web, afin de toujours offrir la
meilleure exprience utilisateur. Dans les deux cas, la performance perue
par lutilisateur doit tre maximise.

> retour table des matires

29
LES GANTS DU WEB

Applications natives

Avec liPhone, Apple a rintroduit le dveloppement au plus prs du

matriel (sans revenir lassembleur, tout de mme) pour maximiser
les performances perues. Ainsi les technologies Java et Flash sont
bannies de liPhone. La plateforme utilise aussi des artifices visuels : au
lancement dune application, la vue du dernier tat de lapplication est
charge par le systme pour maximiser limpression dinstantanit, la
vritable application tant charge en tche de fond. Sur Android, les
applications Java sont excutes sur une machine virtuelle optimise pour
la plateforme. Elles peuvent aussi tre crites en C pour maximiser les
performances.

De manire gnrale, un consensus sest dessin autour du dveloppe-

ment natif, en particulier sur plateformes mobiles : il doit tre au plus prs
du matriel. Et des technologies multi-plateformes comme Java ME, Flash
ou Silverlight tendent tre cartes au profit de lexprience utilisateur.

Applications Web

Le chargement complet dun cran Web est souvent de lordre de 4 10

secondes tout compris (avec les images, le JavaScript, Le Flash, etc.).

Or, il apparat que la lenteur daffichage perue est gnralement lie

pour 5 % aux traitements sur les serveurs, et pour 95 % aux traitements
sur le navigateur. Les gants du Web apportent donc un soin tout
particulier loptimisation de laffichage des pages Web.

titre dillustration, voici une liste des principales bonnes pratiques qui
font consensus, pour optimiser le ressenti de lutilisarteur :

Il est crucial de mettre en cache les ressources statiques (les

images, les feuilles de style CSS, les scripts JavaScript, les anima-
tions Flash, etc.) lorsque cest possible. Il existe pour cela diverses
technologies de cache HTTP. Loptimisation de la dure de vie des
ressources dans le cache est ainsi une comptence acqurir.

Il est recommand dutiliser un rseau de cache, ou Content Delivery

Network (CDN), pour placer les ressources au plus prs des utilisateurs
et limiter limpact de la latence rseau. Disposer de serveurs de cache
dans les pays o rsident la majorit des utilisateurs est vivement
recommand.

> retour table des matires

30
 CULTURE / FLUIDIT DE LEXPRIENCE LUTILISATEUR

Le chargement en tche de fond permet de masquer la lenteur

daffichage de certains lments de la page.

Une pratique trs frquente consiste utiliser des sprites : il sagit

dagrger des images dans un mme fichier pour limiter le nombre
de ressources charger ; elles seront ensuite dcoupes la vole
par le navigateur (voir lexemple Gmail ci-aprs).

Le recours des noms de domaines multiples permet de maximiser

la paralllisation dans le chargement simultan de ressources par
le navigateur. En effet, les navigateurs sont soumis un nombre
maximal de requtes simultanes sur un mme 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, laide doutils, cest dire supprimer du code (JavaScript,

HTML, etc.) tous les caractres (retours chariot, commentaires) servant
la relecture mais pas lexcution du code, et minimiser la longueur
des noms des fonctions.

Compacter les diffrents fichiers de code source tels que JavaScript

dans un seul fichier, quand cest possible.

Chez qui a fonctionne ?

Les exemples de ces pratiques sont nombreux chez les gants du Web :
on peut citer Google, Gmail, Viadeo, Amazon, Yahoo!...

Les rfrences chez les gants du Web

Google possde le rseau de cache distribu le plus maill des gants

du Web : le gant de la recherche disposerait de machines dans toutes
les grandes villes, et mme dun rseau priv mondial, selon des rumeurs
difficiles vrifier.

Google Search pousse lexprience utilisateur temps-rel trs loin avec

Instant Search qui charge les rsultats 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.

> retour table des matires

31
LES GANTS DU WEB

Les images de linterface Gmail sont rduites au strict ncessaire

(deux sprites dicnes prsents sur la figure 1), et le site fait un usage
intensif du cache et du chargement JavaScript en tche de fond.

NDLR : Les sprites tant

par dfinition prvus pour
un affichage cran, nous ne
pouvons pas vous assurer
une meilleure dfinition
dimpression pour cet
exemple. Merci de votre
comprhension.

Figure 1 : Sprites dicnes de Gmail.

France
Sites utilisant ou ayant utilis le rseau de cache distribu (CDN) Akamai :

cite-sciences.fr

lemonde.fr

allocine.com

urbandive.com

Et chez moi ?
Leffet de la latence daffichage est le mme sur les applications internes,
propres une DSI : exaspration des utilisateurs et abandon du recours
lapplication. Le pattern sapplique donc parfaitement en interne.

Sources
Eric Daspet, Performance des applications Web, quoi faire et
pourquoi ? USI 2011 :
> http://www.usievents.com/fr/conferences/10-casablanca-usi-2011/
sessions/997-performance-des-applications-web-quoi-faire-et-pourquoi

Articles sur Google Instant Search :

> http://highscalability.com/blog/2010/9/9/how-did-google-instant-
become-faster-with-5-7x-more-results.html

> http://googleblog.blogspot.com/2010/09/google-instant-behind-
scenes.html
> retour table des matires
32