Travailler avec un budget de performance

Il est facile et rapide d’évaluer la performance d’un site web avec Lighthouse, Web Page Test ou PageSpeed Insights. Toutefois, le travail sur un vrai budget de performance permet des négociations en amont. Puis une analyse à la mise en production. Enfin un suivi dans la durée.

Cette page est une ébauche. Elle sera retravaillée en même temps que le budget lui-même.

Qu’est-ce qu’un budget de perfomance?

Un budget de performance, ce sont les «coûts» acceptés pour l’affichage d’une page web. Par coûts, on entend:

• différents temps (début de l’affichage, fin de l’affichage, mouvements non souhaités, etc.)
• des tailles de fichiers (taille totale ou par type de ressources)
• un nombre de fichiers (nombre total ou par type de ressource)

Du côté des «actifs», on a:

• le temps que les internautes accordent pour l’affichage de la page
• la capacité des périphériques à gérer la mise en page
• la bande passante disponible, la latence, etc.
• ainsi que le rapport aux sites concurrents

Il s’agit donc de trouver une équilibre pour bien dépenser ce qui est accordé.

Exemple pratique

Le lancement de l’analyse par Lighthouse (npm doit être installé avant):

npx lighthouse https://nicolasfriedli.ch \
    --budget-path=budget.json \
    --view \
    --only-categories=performance

En utilisant un budget détaille dans un fichier JSON:

[
    {
        "timings": [
            {
                "metric": "total-blocking-time",
                "budget": 0
            },
            {
                "metric": "largest-contentful-paint",
                "budget": 1000
            },
            {
                "metric": "speed-index",
                "budget": 1000
            },
            {
                "metric": "cumulative-layout-shift",
                "budget": 0
            }
        ],
        "resourceSizes": [
            {
                "resourceType": "total",
                "budget": 500
            },
            {
                "resourceType": "document",
                "budget": 100
            },
            {
                "resourceType": "script",
                "budget": 0
            },
            {
                "resourceType": "font",
                "budget": 200
            },
            {
                "resourceType": "image",
                "budget": 400
            },
            {
                "resourceType": "third-party",
                "budget": 0
            },
            {
                "resourceType": "stylesheet",
                "budget": 50
            }
        ]
    }
]

Dans cet exemple précis, on souhaite:

• un affichage complet de la page en 1 seconde
• l’absence de mouvements parasites (Cumulative Layout Shift ou CLS nul)
• pas plus de 500ko pour l’ensemble des transferts

Dans le détail

• pas plus de 100ko pour la page HTML
• pas de scripts
• pas de ressources tièrces
• pas plus de 200ko pour les polices (qui ne devront donc pas être servies par un autre site)
• pas plus de 50ko de feuilles de style
• pas plus de 400ko d’image

L’intérêt interne d’un budget de perfomance

Comme pour tout budget, derrière les nombres se cachent des considérations politiques. L’élaboration d’un budget demande des négociation. Dans le cas de la performance web, il faudra discuter entre les services:

• les graphistes souhaites des polices d’écriture bien spécifiques
• les internautes des galeries d’images
• le service marketing veut des données statistiques
• la direction espère des encarts de réseaux sociaux
• les juristes souhaitent ne pas faire fuiter de donner à des tiers

Pour établir le budget, il faut donc parler et trouver des compromis. Et surtout trouver un ensemble de données crédibles. Il ne sert à rien de proposer une planification trop optimiste, dont on sait qu’elle ne sera pas tenue. Il ne sert à rien non plus de s’accorder des valeurs démesurées uniquement pour la satisfaction de les respecter.

Dans la durée, un fichier établi par consensus permet à la fois une évaluation régulière d’un nombre important de pages du corpus que constitue le site. Et surtout de ne pas se battre à chaque demande plus ou moins loufoque d’un des services de l’organisation.

La négociation avec un prestataire externe

Dans un travail avec une agence web, l’idée même de travailler avec un budget de performance annonce la couleur. Elle permet de se poser rapidement les bonnes questions:

• L’entreprise est-elle à l’aise avec ce genre d’outil?
• Est-ce qu’elle pose de bonnes questions sur les choix du mandataire?
• Est-ce qu’elle s’estime capable d’atteindre les objectifs? Si ce n’est pas le cas, est-ce qu’elle propose des corrections crédibles au budget?

Dans la relation entre mandant et mandataire, l’utilisations de métriques permet la clarté:

• arbitrage des demandes en cours de projet
• accord sur les termes (un site «performant»…, c’est quoi?)
• évaluation à la livraison

Ces derniers mois, j’ai vu plusieurs sites insitutionnels entrer en production alors qu’ils ne sont pas au point. Avec un budget de performance, il était possible de refuser la livraison, de demander des améliorations tangibles ou d’exiger un rabais.