Performance web et éco-socio-conception d’un site web : deux notions complémentaires ou opposées ?

Publié le 24 octobre 2024

9 minutes de lecture

Conjuguer performance web et éco-socio-conception paraît logique, pourtant de manière contre-intuitive, avoir un site éco-socio-conçu, ne signifie pas qu’il sera performant et vice-versa. Ces deux approches partagent des objectifs communs mais sont parfois en contradiction. Avec l’aide de Christophe Laffont, responsable conformité & excellence chez OpenStudio, nous allons voir que concevoir un outils web qui garde l’équilibre entre performance et frugalité n’est pas si simple.

Avant de tenter de concilier performance web et éco-socio-conception, il est fondamental de bien comprendre les indicateurs qui sont surveillés pour la performance web et ceux que l’on va regarder pour l’éco-socio-conception d’un site web, afin de comprendre les enjeux qu’impliquent les deux notions et les distinguer clairement.

Les objectifs principaux de la performance web et de l’éco-socio-conception

Perfomance web : l’expérience utilisateur en jeu

La performance web se concentre principalement sur l’amélioration de la vitesse de chargement et de la réactivité d’un site web. Son objectif est d’offrir une expérience utilisateur fluide et rapide, ce qui est désormais une condition sine qua non au succès d’un site web vitrine ou e-commerce.

Pour améliorer la performance d’un site, il existe de nombreuses techniques, on peut citer par exemple :

L’optimisation des images et des ressources
La mise en cache avancée
La minification des fichiers CSS et JavaScript
L’utilisation de CDN (Content Delivery Networks)
La réduction du temps de réponse du serveur (TTFB)

« La mesure actuelle de la performance web et la mise en œuvre relèvent principalement de la compétence d’un développeur front qui a le souci de mettre en place de bonnes pratiques de codage afin de réaliser un site web qui réponde à l’utilisateur aussi vite que possible. Il y a des études qui montrent qu’il y a un lien fort entre le taux de conversion et la performance d’un site. »

Christophe Laffont, responsable conformité & excellence

Le temps c’est de l’argent

En effet, de nombreuses études démontrent ce lien de cause à effet entre la rapidité d’un site et le passage à l’acte d’achat sur un e-commerce. Une étude de Google a mesuré qu’une augmentation d’une seconde du temps de chargement sur mobile avait un impact incroyable en réduisant le taux de conversion de 20 %. Et à l’inverse, si on gagne une seconde de temps de chargement, un site e-commerce verrait son taux de conversion augmenter de 7 % et son chiffre d’affaires de 10 % selon une autre étude menée par Akamai.¹

« La performance web a aussi une incidence sur le SEO d’un site web, c’est un critère que prend en compte Google. Plus un site est performant, plus le moteur de recherche aura tendance à le mettre en bonne position. D’autre part Google a ce qu’on appelle un crawl budget, cela signifie qu’il va crawler un site en passant de liens en liens dans un temps imparti. Autrement dit, si un site est trop lent, trop lourd, Google n’indexera pas toutes les pages puisqu’il n’aura pas eu le tempsde les crawler car il aura atteint sa limite de budget Crawl. »²

Christophe Laffont, responsable conformité & excellence

Éco-socio-conception : Réduire l’impact environnemental et améliorer l’inclusivité

De son côté, l’éco-socio conception regroupe de bonnes pratiques dans le but principal de minimiser l’empreinte écologique d’un site web et de le rendre le plus inclusif possible. Il s’agit d’un sujet sur lequel est particulièrement vigilante l’équipe Conformité d’OpenStudio pour être dans le respect de notre label numérique responsable. En résumé, les principes fondamentaux de l’éco-socio-conception reposent sur :

La Sobriété numérique : limiter le poids des pages et le nombre de requêtes ;
L’Accessibilité et l’inclusivité : le site doit être accessible par un utilisateur porteur d’un handicap mais aussi éviter la fracture numérique avec des personnes qui ont une connexion internet lente ou un matériel informatique vieillissant ;
La Durabilité : créer des sites qui restent fonctionnels sur le long terme en évitant l’obsolescence réelle ou perçue.

Pour creuser les principes de l’éco-socio-conception, nous avons déjà rédigé un article très complet sur le sujet :Écoconception et accessibilité, un duo indissociable

Si on résume, le principal but de la performance web est donc d’améliorer l’expérience utilisateur, en lui apportant rapidité et fluidité dans sa navigation, durant le chargement de la première page et tout au long de l’utilisation du site. L’éco-socio-conception de son côté a d’abord comme intérêt d’obtenir un site web moins énergivore et plus accessible. Les priorités de ces deux approches sont donc différentes mais elles peuvent se rejoindre en pratique.

Performance web et éco-socio-conception : des approches différentes qui s’entrecroisent et se confrontent

En effet, la performance web et l’éco-socio-conception partagent des bonnes pratiques qui vont dans le même sens.

L’optimisation des ressources (images, scripts, etc.) est l’exemple typique de la bonne pratique qui fonctionne aussi bien pour la performance que pour l’éco-conception de son site. En effet, des images légères prendront moins de bande passante et auront besoin de moins de place sur les serveurs pour les stocker.

Performance web et éco-socio-conception se corrèlent aussi sur l’amélioration de l’expérience utilisateur. Un site éco-socio-conçu aura un parcours utilisateur le plus simple possible. Lorsque les utilisateurs accèdent rapidement à ce qu’ils recherchent, l’utilisation du service génère forcément moins de consommation de ressources, et en bonus les utilisateurs seront satisfaits d’avoir trouver ce qu’ils voulaient rapidement.

On voit bien que ces deux disciplines ont des points communs évidents dans leurs enjeux et dans la pratique, l’une pouvant nourrir l’autre. Cependant, les chemins empruntés pour arriver à la performance d’un site internet sont aussi susceptibles d’entrer en conflit avec l’éco-socio-conception.

Prenons plusieurs exemples concrets :

Technologies dernier cri VS Compatibilité avec tous les terminaux :

Pour la performance web, le meilleur choix est d’utiliser des technologies récentes pour des chargements plus rapides. Mais pour l’éco-socio-conception, on va privilégier des technologies qui resteront compatibles avec d’anciens appareils pour éviter leur obsolescence.

Images WebP VS Formats supportés partout :

L’utilisation des images est souvent au cœur des deux approches, puisque c’est ce qui pèse le plus lourd sur des pages web. Du côté de la performance web, la facilité serait d’adopter des nouveaux formats d’images ultra légers, qui conservent néanmoins une bonne qualité comme le WebP. Problème réglé. Sauf que…ce format n’est pas supporté par tous les appareils, donc adieu aux bons indicateurs d’éco-socio-conception.

Vitesse VS Frugalité :

Il ne faut pas oublier que la priorité de la performance web est la vitesse de chargement, et que celle de l’éco-socio-conception est son impact environnemental et sociétal. De ce fait, pour avoir un site performant, on peut tout à fait utiliser des serveurs surdimensionnés, des datas centers puissants et énergivores, ou encore multiplier les CDN qui distribuent le contenu à partir de plusieurs serveurs répartis géographiquement, ce qui réduit la latence et accélère l’accès au contenu pour les utilisateurs dans différentes régions. Forcément avec une telle armada en sous-marin, votre site sera performant. En revanche, la consommation d’électricité et d’eau va exploser pour alimenter et refroidir tous ces data centers, et va plomber l’indice d’éco-socio-conception de votre site.

Mise en cache VS Éliminer les Données inutiles :

En perfomance web, l’une des bonnes pratiques est la mise en cache des ressources (images, scripts, feuilles de styles), ce qui a pour effet de charger plus rapidement un site en re-téléchargeant les fichiers à chaque visite. C’est pratique, mais ce n’est pas bon pour l’éco-conception. Si les ressources mises en cache sont volumineuses ou rarement utilisées, elles prennent de la place inutilement et prolongent la durée de vie des données sur les appareils des utilisateurs, ce qui entraîne un gaspillage d’énergie et un gaspillage d’espace disque (cela devient rapidement un problème pour les téléphones portables). De plus, la gestion incorrecte de la mise à jour des caches risque de forcer des téléchargements inutiles de nouvelles versions.

PWA (Progressive Web Apps) VS Consommation d’énergie prolongée :

Les Progressive Web Apps (PWA) servent à rendre des fonctionnalités disponibles hors ligne, ce qui est une bonne idée pour améliorer la fluidité et la performance des applications. Elles sont aussi destinées à exécuter des tâches en arrière-plan via des services Workers. Les PWA sont néanmoins une mauvaise idée sur le plan de l’éco-conception puisqu’elles sont susceptibles d’exécuter des processus en arrière-plan qui consomment de l’énergie même lorsque l’application n’est pas activement utilisée. En bref, de l’énergie consommée pour rien. L’utilisation de PWA a également un impact sur la capacité d’un mobile, car la mise en cache de ces éléments va prendre de la place, de l’espace disque sur le téléphone et donc, les utilisateurs seront forcés de changer de téléphone pour avoir plus de mémoire.

Client-Side Rendering VS Obsolescence anticipée

Le Client-Side Rendering ou l’optimisation du rendu côté client est une manière d’alléger la charge du serveur en déportant une partie du travail sur l’appareil de l’utilisateur. Autrement dit, quand le navigateur fait une requête au serveur, si on passe par le client-side on aura un document HTML avec un fichier JavaScript pour générer le reste du site, ce qui va plus vite puisque le serveur n’est pas sollicité à chaque requête. Intuitivement on pourrait penser que si on communique moins avec le serveur, le gain de performance s’accompagnera d’une diminution de la consommation d’énergie. C’est faux. Cela déplace simplement la consommation d’énergie du serveur vers le périphérique utilisateur. C’est même pire puisque les ordinateurs ou smartphones doivent travailler plus pour interpréter et rendre le contenu, et donc consomment d’avantage d’énergie. Le Client-Side Rendering nuit particulièrement aux utilisateurs avec des appareils plus anciens, les poussant à les remplacer plus tôt.

Comment équilibrer la conception d’un site web pour allier performance et écologie/accessibilité ?

De nombreuses bonnes pratiques pour rendre plus performant sont outil web sont donc néfastes pour l’éco-socio-conception. Comment faire dans ces cas-là pour équilibrer les deux et arriver à des scores de performance et d’éco-socio-conception honorables ?

Analyser en profondeur l’impact de chaque décision technique

L’analyse approfondie de l’impact de chaque décision technique vous paraît peut-être une étape longue et rébarbative, mais pour trouver le juste équilibre entre performance et éco-socio-conception, cette démarche est essentielle.

L’évaluation de l’empreinte environnementale des choix technologiques est possible grâce à des outils d’analyse du cycle de vie (ACV) spécifiques au numérique.

« Pour prendre les meilleures décisions, j’utilise des outils comme Lighthouse, DevTools ou WebPageTest qui mesurent l’impact sur la performance du site. »

Christophe Laffont, responsable conformité & excellence chez OpenStudio

Comparer différentes solutions techniques est un bon moyen d’ouvrir le champ des possibles afin de choisir celle offrant le meilleur compromis entre performance et impact écologique. Il faut aussi considérer les effets à long terme des décisions, notamment en termes de maintenance et d’évolutivité du site.

Optimiser les ressources sans nuire à l’accessibilité

L’optimisation des ressources est importante à la fois pour l’éco-conception et la performance du site, mais elle ne doit pas se faire au détriment de l’accessibilité. Pour y parvenir :

Utilisez des techniques de compression d’images avancées (Squoosh) qui préservent la qualité visuelle tout en réduisant le poids des fichiers.
Dans le même esprit que pour les images, optimisez les fonts avec des outils comme fontTools.
Implémenter le chargement progressif (lazyloading) pour les images et les contenus non essentiels.
Adoptez des polices système ou des polices web optimisées pour réduire le temps de chargement sans nuire à la lisibilité.
Soyez vigilant sur la conception des interfaces pour qu’elle soient adaptatives et s’ajustent à différents appareils et connexions, assurant ainsi une expérience utilisateur optimale pour tous.

Privilégier des solutions durables plutôt que des tendances éphémères

Pour créer des sites web à la fois performants et écologiques sur le long terme :

Optez pour des technologies éprouvées et stables plutôt que pour les dernières tendances qui pourraient rapidement devenir obsolètes.
Pour des projets complexes, concevez une architecture modulaire facilitant des mises à jour partielles sans nécessiter une refonte complète du site.
Utilisez des frameworks et des bibliothèques légères et maintenues sur le long terme.
Privilégiez des solutions open source qui bénéficient d’une large communauté de support et d’évolution.

Autre point à ne pas négliger pour un site performant et éco-conçu, il faut prendre le temps de supprimer ce qui n’est plus utile, utilisé et utilisable. Autrement-dit, faire le ménage régulièrement évite d’alourdir son site inutilement.

Dashmaster, un outil de monitoring pour contrôler la performance et l’éco-socio-conception en un coup d’œil

Pour concilier performance et éco-socio-conception, OpenStudio a développé son propre outil de monitoring baptisé Dashmaster, inspiré par DashLord, un projet initié par la Fabrique Numérique des Ministères Sociaux, conçu comme un outil open source pour scanner des sites web.

Dashmaster regroupe tous les indicateurs Qualité en un seul et même tableau de bord intuitif, notamment la performance et l’éco-socio-conception, mais aussi la sécurité et toutes les bonnes pratiques relatives à la conception d’un site (qualité du code de la page, détection des liens morts, présence des mentions légales sur le site…). Le tableau de bord présente principalement les résultats des scans qu’il a effectué et un rapport sur tous les sites maintenus par OpenStudio est généré chaque mois avec la totalité des outils disponibles.

« Ce rapport mensuel est un suivi détaillé et historisé des indicateurs clés pour chaque site. L’objectif est de garantir un haut niveau de qualité constant pour les sites que nous concevons et suivons. Il détecte également si de récentes mises à jour ont engendré des problèmes, et planifie des mesures correctives si nécessaire. Ce processus contribue à maintenir nos standards élevés en matière de performance et de fiabilité web.«

Christophe Laffont, responsable conformité & excellence

Une application web est également à la disposition de nos collaborateurs pour qu’ils génèrent leurs propres tableaux de bord incluant les sites et outils de leur choix. Elle peut être utilisée de façon ponctuelle et à la demande aussi bien sur des sites internet publics que sur ceux en pré-production sur notre réseau interne. Cette fonctionnalité est particulièrement utile à nos développeurs lors de la conception du site mais aussi à nos chefs de projet et qualiticiens au moment des recettes.

Grâce au Dashmaster, nous avons une vue d’ensemble de tous les indicateurs ce qui est très intéressant pour conjuguer performance et éco-socio-conception, puisque nous voyons directement l’impact de telle ou telle décision sur l’un ou l’autre critère.

Pour approfondir encore le sujet du couple performance web / éco-socio-conception, voici une liste de ressources conseillées par Christophe Laffont :