Un budget pour accélérer vos sites web

Face à cela, un constat : le web grossit. En 4 ans, le poids moyen d’une page d’accueil a été multiplié par 3 (source). Les sites sont de plus en plus riches, du point de vue du contenu, mais aussi du point de vue fonctionnel.

Alors comment éviter qu’un site ne devienne obèse ? Comment garder le contrôle sur le temps de chargement, malgré les différents intervenants, les évolutions technologiques et fonctionnelles ? Je vous propose un résumé des éléments clefs de cet article dédié aux budgets de performance, un outil, un cadre, qui va vous permettre de répondre à cette problématique et de faire les premiers pas vers une véritable culture de la performance web.

La vitesse comme fonctionnalité principale

As a product manager you should know that speed is product feature number one.

(traduction : en tant que responsable produit, tu devrais savoir que la vitesse est la fonctionnalité numéro un du produit)
C’est un propos de Larry Page (cofondateur de Google) rapporté par Urs Hölzle, qui se prête très bien à l’illustration de la nécessité de mettre en place des budgets de performance.
Si votre site est (excessivement) lent, toutes les fonctionnalités perdront leur sens.
En effet, 67% des utilisateurs demandent un temps de chargement inférieur à 4 secondes (données Keynote).

Voir la vitesse comme fonctionnalité principale, c’est s’assurer de prendre en compte cette contrainte, et de ne pas dégrader l’expérience utilisateur, au risque de nuire aux autres fonctionnalités.

Prenons un exemple exagéré : je souhaite mettre en place un click-to-chat, car d’après une étude lambda cela permet d’augmenter le temps de conversion de mon site. Et si l’installation de cette fonctionnalité ralentissait de 10 secondes l’affichage de ma page ? Évidemment, ce n’est plus une augmentation de la conversion à laquelle il faudra s’attendre, mais bien à l’inverse, à une chute dramatique !  

Les budgets de performance vont vous permettre de prendre en compte la nécessité de rapidité à toutes les étapes de vos projets, et d’éviter ce genre de situation, même si la réalité sera généralement plus nuancée évidemment.

Quand et comment définir un budget ?

Comme évoqué plus tôt, les budgets de performance visent à encadrer vos projets, pour que la vitesse et l’expérience utilisateur en soient des composantes essentielles.

Plus ce cadre sera posé tôt, plus il sera facile de le respecter !

Brad Frost, web designer de renom, a écrit à ce propos :

Statements of work, project proposals and design briefs should explicitly and repeatedly call out performance as a primary goal. “The goal of this project is to create a stunning, flexible, lightning-fast experience…”

(Les cahiers des charges, réponses à appels d’offres, et briefs de conception devraient explicitement et de manière répétée mentionner la performance comme objectif principal. “Le but de ce projet est de créer une expérience à couper le souffle, souple, rapide comme l’éclair …”)

Plutôt qu’une explication théorique, voici quelques exemples de budgets, qui pourront s’appliquer à différentes phases de vos projets, mais aussi à différents profils d’interlocuteurs :

• La maquette ne doit pas utiliser plus de 2 polices de caractères
• Le temps de réponse du serveur doit être inférieur à 200ms
• La page d’accueil doit faire moins d’1 Mo
• La partie visible de la page doit d’afficher en moins d’une seconde sur une connexion ADSL (Visually Complete < 1 sec)
• Le speedindex de la landing page doit être inférieur à 2000 sur une connexion 3G

Vous l’aurez probablement remarqué, la nature d’un budget de performance peut énormément varier. Tim Kaldec a proposé un découpage ingénieux (en) des différentes options qui s’offrent à vous (disponible ici en français).
L’exercice de choisir un seuil n’est pas aisé, mais dès lors qu’on se pose la question du choix du seuil, le budget aura déjà commencé à remplir sa fonction ! Se positionner par rapport à ses concurrents est une bonne stratégie : un écart inférieur à 20% ne sera pas perçu, vous pourrez donc envisager d’être au moins 20% plus rapide pour construire un avantage concurrentiel supplémentaire !

Vous pourrez également vous baser sur les recommandations d’acteurs comme Google. Ce qui vous permettra très probablement d’éviter une mauvaise surprise si un mécanisme comme le “Red Slow Label”, testé en début d’année, venait à voir le jour.

Comment gérer son budget et rester dans le vert ?

Les budgets de performance web, tout comme les budgets financiers, peuvent se retrouver dépassés. La bonne nouvelle, c’est que nous ne sommes pas totalement désarmés dans un tel cas !
Lorsqu’un budget est enfreint, vous pourrez successivement vous interroger sur ces différentes possibilités :

• optimiser : est-ce qu’il est possible d’optimiser techniquement un élément pour que le budget soit à nouveau respecté (exemple: compresser une image)
• épurer : est-ce que tout ce qui est présent sur la page est vraiment utile ? Des éléments obsolètes à supprimer ?
• abandonner : est-ce que ce qui m’a conduit à enfreindre le budget apporte suffisamment de valeur ? Sinon, c’est sans doute une erreur que de faire ce changement !

Si aucun point de cette liste ne vous a permis de respecter à nouveau vos budgets, il ne vous reste donc plus qu’à les faire évoluer. Les budgets ne doivent pas être abandonnés mais bien vivre et accompagner votre site web tout a long de son cycle de vie.

Il ne vous reste plus qu’à essayer d’appliquer ces principes à vos projets, et vous réunirez vos interlocuteurs vers un but commun : un site rapide, une expérience utilisateur irréprochable et un business florissant !