Update : nous avons depuis ce billet publié un article complet sur les budgets de performance.
Il y a quelques mois je suis tombé sur l’article de Tim Kadlec, que j’avais trouvé très pertinent. Tim a très gentiment accepté que nous le traduisions ici, pour contribuer au développement de la culture de la performance web auprès du public francophone.
L’article original : Setting a Performance Budget (janvier 2013)
En bref : la performance web est un sujet qui doit être traité dès le début de vos projets, un bon moyen de gérer celle-ci est de définir un budget (ex : « La page doit faire moins de 500Ko »).
Jason Grigsby avait lancé ce trait d’humour : “Nous avons fait Internet à notre image… obèse.” Il avait raison évidemment, le poids moyen des pages et le nombre de connexions a augmenté de façon préoccupante.
C’est pourquoi je me suis tellement réjoui de l’explosion récente du nombre de billets abordant la performance comme composante fondamentale de la conception. Le dernier nous vient de M. Brad Frost. Il y prône le fait que la performance n’est pas uniquement quelque chose dont les développeurs doivent se préoccuper, mais que c’est une « essential design feature » (caractéristique de conception essentielle).
Une de ses suggestions est de mentionner la performance dans les documents des projets.
Spécifications, propositions commerciales et briefs de conception devrait explicitement et de façon répétée mentionner la performance comme objectif premier. “Le but de ce projet est de créer une expérience à couper le souffle, flexible, rapide comme l’éclair…”
C’est une excellente remarque, la performance devrait être abordée très tôt et souvent pour renforcer son importance. Ne pas la prendre en compte dès les premières phases d’un projet c’est la certitude de terminer avec des sites web lents et bedonnants. Une décision prise en début de projet sur l’apparence visuelle d’un site peut avoir un impact très important sur la rapidité du site finalement réalisé.
Au début du projet, des propos tels que « expérience ultra-rapide » seront probablement suffisants, mais peu-à-peu les choses devront se préciser.
C’est à ce moment qu’intervient la notion de budget de performance, que nous allons ici détailler.
Un budget de performance revient à associer des seuils à vos pages, quelque chose que vous ne devez pas dépasser. Cela peut être un temps de chargement particulier par exemple, mais les échanges seront généralement facilités si vous utilisez le poids ou le nombre de requêtes de la page.
La BBC s’est basée sur cela pour son site mobile responsive. Ils ont déterminé que la page devait être utilisable en moins de 10 secondes sur une connexion GPRS et ils ont ensuite établis des objectifs en terme de poids et de nombre de requêtes.
Une fois ces objectifs définis, il faut s’y tenir. A chaque fois que vous souhaitez ajouter quelque chose à la page, vous devez vous assurer que le budget est respecté. Steve Souders a listé les 3 options possibles si quelque chose ne rentre pas dans le budget :
- Optimiser une fonctionnalité ou une ressource existante de la page
- Supprimer de la page une fonctionnalité ou une ressource existante
- Ne pas ajouter la nouvelle fonctionnalité ou la nouvelle ressource
Si l’on respecte ceci, il suffit de s’assurer d’avoir défini le budget très tôt. Définir le budget de performance après avoir finalisé l’apparence d’un site va fortement diminuer l’intérêt de cette technique. Cela peut toujours faciliter certaines décisions sur l’intégration de plugins ou autres. Mais décider que la page ne doit pas dépasser 500 ko quand une maquette contient 3 carrousels et une photo HD en fond de page ne risque pas de vous aider beaucoup.
Clearleft a récemment écrit un article sur son expérience du budget de performance et sur les impacts sur leur projet :
Le point important est de considérer chaque décision, de la conception à l’implémentation, comme quelque chose ayant des conséquences. Avoir un ‘budget’ prédéfini est une manière claire et tangible d’encadrer les décisions concernant ce qui peut ou ne peut pas être inclus, si cela intervient suffisamment tôt dans le projet. De plus, cela peut potentiellement aider à expliquer à un client pourquoi certains élément ont été omis (ou plus exactement, remplacé par d’autres).
C’est ce qu’apporte le budget de performance : un cadre de discussion qui suit votre avancement. Il vous sert de point de référence pour décider quel composant devrait, ou ne devrait pas, être ajouté à une page.
Évidemment, vous avez déjà déterminé dès le début quel contenu devait être présent sur une page. Le budget de performance ne vous guide pas sur la décision de quel contenu afficher. Il vous guide sur comment vous choisissez d’afficher ce contenu.
Supprimer tout contenu important d’une page pour en diminuer le poids n’est pas une stratégie de performance.
Comme Brad l’a déclaré, il est temps de donner à la performance web l’attention qu’elle mérite, et définir une surveillance de site web avec des budgets de performance est une excellente façon de commencer.
L’article original de Tim Kadlec: Setting a Performance Budget