Quelques seuils d'alerte pour la performance web environnementale

D’un projet à un autre, en ma qualité d’analyste de la performance web environnementale, je suis souvent confronté aux mêmes interrogations :

• Quand faut-il s’alerter ?
• Quelles valeurs faut-il atteindre ?

Je réponds toujours, avec prudence, que l’on ne devrait pas s’en remettre à des objectifs qui n’ont pas été définis par nos soins, qu’il faut avant tout tenir compte de l’intention, et que mieux vaut un produit perfectible qui fonctionne qu’une solution, certes frugale, mais inutile.

Avec le temps toutefois, entre mes développements, ceux des clients que j’accompagne et les autres qu’il m’arrive d’étudier par curiosité, j’en suis venu à identifier quelques seuils au-delà desquels il peut être utile de s’interroger. Oh : l’objectif n’est pas d’affirmer que les dépasser est mal — ce serait me contredire — ; simplement, le cas échéant, ma curiosité est piquée au vif.

Je vous en partage quelques-uns ?

• Des SVG d’un poids supérieur à 10 Ko
• Des images d’un poids supérieur à 100 Ko
• Des fontes au format Woff2 d’un poids supérieur à 50 Ko
• Des feuilles de styles CSS d’un poids supérieur à 50 Ko
• Une durée de mise en cache client inférieure à 365 jours pour certains CSS et JS
• Un dernier mot sur la légitimité de ces seuils d’alerte

Des SVG d’un poids supérieur à 10 Ko

De plus en plus, le format SVG (image vectorielle) tend à remplacer le format PNG (image matricielle) pour les éléments d’interface, les logos, et plus encore. Ce serait aller un peu vite en besogne que de croire que le vectoriel est toujours le plus intéressant des deux !

Par exemple, les éléments d’interface (icônes) sont généralement rendus à l’écran dans des dimensions inférieures à 50 x 50 pixels. À l’export, une image PNG bien dimensionnée et compressée peut faire moins de 1 Ko.

Aussi :

• Si les dimensions de rendu à l’écran sont basses (inférieures à 300 x 300 pixels) ;
• Et si l’image n’apparait qu’une fois (ou alors, toujours dans les mêmes dimensions) ;
• Et si le poids du SVG choisi dépasse les 10 Ko (voire bien moins) ;

Donnez sa chance à un export PNG.

Des images d’un poids supérieur à 100 Ko

En fonction de sa nature et de ses dimensions réelles, il peut facilement arriver qu’une image fasse plus de 100 Ko sans que cela soit anormal. Pour autant, vous seriez surpris de constater le nombre de médias que l’ont peut trouver au-delà de ce seuil, alors que cela n’est pas légitime.

Les causes de surpoids sont toujours les mêmes :

• Un format d’image inadapté (typiquement, PNG à la place de JPG) ;
• Des dimensions réelles bien supérieures à ce qui est rendu à l’écran ;
• Une trop faible voire une absence de compression.

Je prends souvent en exemple ce portrait de 8,5 Mo déniché sur le site vitrine d’une solution pourtant dédiée à la communauté des développeurs. Avec les bonnes optimisations, il était possible de réduire son poids de plus de 99 % !

Dans la mesure où les images ne sont pas compressibles à travers le réseau, il faut être particulièrement vigilant quant à leur optimisation. Sachez que je traite ce sujet en profondeur dans la formation “Développer des sites web écoresponsables ”.

Des fontes au format Woff2 d’un poids supérieur à 50 Ko

De nombreuses fontes de type “sans-sérif” et “sérif” bien optimisées font moins de 50 Ko. Voici par exemple les poids que j’obtiens en compressant au format Woff2 les fontes suivantes :

• MontSerrat Regular : 17,3 Ko ;
• Ubuntu Regular : 21,3 Ko ;
• Playfair Display : 19,6 Ko.

Pour de tels résultats, il faut épurer les fontes de leurs glyphes inutiles. Au final, elles n’intègrent que les tables “Latin de base” et “Supplément Latin-1”, ce qui convient à l’essentiel de nos usages européens.

Des feuilles de styles CSS d’un poids supérieur à 50 Ko

À chaque fois que je vois une interface utilisateur épurée au possible, avec une bête composition en grilles, charger plus de 100 Ko de CSS, je sais qu’il y a anguille sous roche. Le cas échéant, un outil d’analyse de couverture CSS atteste d’une couverture risible (quantité de code utilisé au regard de la quantité de code chargé).

On peut tant faire en CSS ! Le puriste qui est en moi recommanderait d’être attentif dès lors que les styles CSS excèdent les 20 Ko. La vérité, c’est que les frameworks et autres design systems sont passés par-là, avec la fâcheuse tendance à balancer plus de code que nécessaire.

Faut-il se passer de ces outils ?
Parfois, peut-être, oui.

Une chose est sûre : il faut s’assurer de leur modularité, de leur capacité à déployer du code qui sera effectivement utilisé. Au-delà de 50 Ko, vous pouvez en douter.

Une durée de mise en cache client inférieure à 365 jours pour certains CSS et JS

Mais pas n’importe lesquels.

La mise en cache client, ou la capacité d’un navigateur web à recharger depuis le poste de l’utilisateur une ressource connue plutôt que de la retélécharger depuis le serveur d’origine est sans doute un axe d’optimisation parmi les plus importants.

En fonction des outils exploités en phase de développement d’un service numérique, scripts et styles peuvent être nommés selon leur contenu, leur version, ou encore leur date d’édition. S’ils venaient à changer, leur nom en ferait autant. De fait, l’URL finale à laquelle il sont disponibles changerait aussi. Puisque cela permet d’invalider à tout moment le cache côté client, la durée de mise en cache de ces fichiers ne devrait jamais être inférieure à 31536000 secondes, soit 1 an. Si c’est le cas, c’est anormal.

Quelques exemples de noms de fichiers éligibles à ce qui relève ici davantage de la bonne pratique :

• db38100.js
• 55dd3125ce3b67d97f279968accf8264.min.js?1699550586099
• css_i1wqik8YNw-xWWUyO83T9CtMgfLjhdk4UQBRtN9IHyU.css
• 1215662b6245a41c4bd4d78791794ad1.min.css?1695826848565

Un dernier mot sur la légitimité de ces seuils d’alerte

Les seuils d’alerte que j’expose dans cet article ont été définis de façon arbitraire par mes soins ; qu’ils soient fondés sur l’expérience n’y change rien.

Vous trouvez ces seuils élitistes ? Je vous invite à les ajuster avec vos équipes. Comme je l’ai précisé en préambule, je vous déconseille de vous y enfermer. Ma propre capacité d’analyse n’en est pas prisonnière.

Vous trouvez ces seuils permissifs ? Sachez que c’est aussi mon opinion ! J’aime à croire qu’il s’agit là d’un compromis acceptable entre le purisme et la réalité du terrain.

Et vous, de quel côté de la ligne vous situez-vous ?