éco-conception web

L’éco-conception d’un site internet fait partie des engagements RSE (Responsabilité Sociale et Environnementale) d’une entreprise. Mais quels sont les leviers pour un site éco-conçu, et comment mesurer leur efficacité ? Une fois que le diagnostic est posé, ou que des optimisations sont apportées pour être éco-responsable, est-ce définitif ? Nous avons posé ces questions aux équipes d’Arneo, agence web qui a développé son propre outil de diagnostic de performance environnementale. 

Rencontre avec Laura Migotti, Cheffe de projet, référente RSE chez ARNEO ; Farid El Ourat, Head of Performance ; et Rémi Gonseau, Consultant Performance Senior.

Fasterize : Vous avez développé votre propre outil de diagnostic de performance environnementale. Pourquoi, et quels critères prendre en compte pour évaluer l'empreinte carbone d’un site ?


Laura : Un site web doit générer du trafic et proposer une expérience agréable et engageante, c’est évident. Et c’est en tenant compte de ces pré-requis que nous souhaitons sensibiliser à l’importance de la sobriété numérique. Nous sommes conscients du fait que nous ne pouvons pas annuler notre empreinte environnementale, faisons au moins tout ce qui est en notre pouvoir pour la limiter ! Et c’est là que l’éco-conception entre en jeu, en agissant sur le développement et le frontend

C’est pourquoi nous avons développé un outil de diagnostic qui repose sur une grille d’une vingtaine de critères.
Nous évaluons notamment : la vitesse de chargement, le nombre d’images sur une page, leur dimensionnement, le poids des JavaScript, le nombre de polices de caractère utilisées, le fait que les vidéos se lancent automatiquement ou non lors du chargement…
Ce sont des critères qui peuvent être mesurés automatiquement, et qui ont un impact aussi bien sur l‘expérience utilisateur que sur la quantité d’énergie consommée lors de la visite du site.

La grille évolue régulièrement en fonction des pratiques pour rester en phase avec les usages sur internet.

Notre outil s'inscrit dans la suite logique des outils déjà existants et produits par les acteurs du numérique (certains étaient d'ailleurs déjà utilisés par nos développeurs). Nous avons travaillé pour réunir le meilleur des fonctionnalités qui nous semblaient les plus pertinentes tout en consolidant une grille de critères qui nous est propre. Nous essayons aussi d’aller plus loin en proposant des actions correctrices. L’usage était interne au départ, puis nous nous sommes rendus à l’évidence : la démarche peut servir à d’autres, et c’est en accompagnant le marché dans ce sens qu’un maximum d’acteurs pourront s’approprier le sujet de la Responsabilité Sociale et Environnementale, notamment à travers l’éco-conception et la sobriété numérique.

Fasterize : Quelles sont les bonnes pratiques essentielles pour un site éco-responsable ? 

Farid : Comme le soulignait Laura, un site web doit proposer une expérience utilisateur de qualité, surtout un site Ecommerce qui a des objectifs de chiffre d’affaires.
On peut être de bonne volonté pour aller vers l’éco-conception et la sobriété numérique, mais il y a malgré tout des objectifs de ventes, de taux de conversion… et l’interface doit contribuer à atteindre ces objectifs. 

Tout d’abord, le choix du CMS a son importance : certains proposent des templates prêts à l’emploi et offrent peu de marge de manœuvre ; d’autres, comme Magento par exemple, permettent une personnalisation poussée, et la possibilité d’ajouter des éléments qui peuvent alourdir les pages et consommer plus de ressources. Il faut donc arbitrer et veiller à privilégier les plugins ou extensions qui auront un impact bénéfique sur l’expérience utilisateur et les taux de conversion.

Ensuite, un certain nombre de trackers peuvent être nécessaires pour mesurer ses performances business, voire des outils de personnalisation ou d’optimisation tels que des tests A/B.
Or, plus il y a un grand nombre d’applications tierces sur un site web, plus le temps de chargement peut être long, et la qualité de l’expérience utilisateur risque d’être dégradée si les pages ont besoin de trop de temps pour se charger à cause de Third Parties mal implémentés… Performance, éco-responsabilité et business : toutes les actions sont liées, il faut donc croiser les enjeux et faire des choix.

Ainsi, en amont de tout projet, un audit permet de faire ressortir les données qui vont aider à la décision. Les parcours clients doivent être analysés pour identifier les fonctionnalités les plus utilisées et celles qui ne le sont pas… Il s’agit de rationaliser les ressources, prioriser celles qui sont essentielles et se défaire de ce qui n’a pas d’intérêt pour le business.
Cette question doit se poser pour l’ensemble des parcours utilisateur, et être le point de départ de la roadmap de tous les canaux digitaux. 

Je parle de business et de sobriété numérique, mais il faut savoir que ce travail de rationalisation sert aussi le SEO, parce qu’il contribue à l’hygiène du site.
Par exemple, s’il y a de nombreuses pages 404, des boucles de redirections, des pages zombies, des contenus dupliqués… Ce sont des ressources gaspillées pour l’utilisateur comme côté serveur, ce qui va à l’encontre de l’éco-conception.

Voici un exemple précis de pratique à proscrire, et que j’ai beaucoup observée sur les sites Ecommerce : les nouvelles pages à chaque édition des Soldes.
Il vaut mieux capitaliser sur une page unique avec du contenu actualisé, quitte à la mettre en retrait en fonction de la saisonnalité. Mais créer une nouvelle page à chaque édition des Soldes, c’est repartir de 0 pour le référencement, et prendre le risque de laisser traîner des pages zombies, ce qui n’est bon ni pour les clients, ni pour Google.

Aussi, en ce qui concerne les pages produit, si un produit n’est plus commercialisé, mieux vaut rediriger vers une page catégorie au lieu de laisser cette page produit mourir.

De manière générale, pour les utilisateurs, les moteurs de recherche et l’environnement, il faut valider que toutes les pages servent le référencement et l’activité commerciale.

Rémi : En effet, comme le souligne Farid, un site en bonne santé doit maîtriser sa production d’URLs, et aussi maîtriser le cycle de vie des pages entre celles qui sont pérennes, saisonnières ou périssables.

Par ailleurs, comme Google rapproche les bonnes pratiques UX et SEO (notamment avec les Core Web Vitals qui permettent de mesurer la qualité de l’expérience utilisateur, ndlr), tout ce qui permet d’optimiser l’un peut contribuer à améliorer l’autre.
Je pense notamment au fait de redimensionner les éléments en fonction de la taille de l’écran, et à ne pas appeler des ressources inadaptées par rapport à l’appareil utilisé.
En plus, si on visite une page identifiée dans les résultats de recherche de Google, que le chargement est lent et que l’expérience n’est pas satisfaisante, l’utilisateur revient en arrière pour trouver un meilleur résultat. C’est du trafic et des ventes perdues, et des ressources sollicitées pour rien.

Pour la webperf comme pour l’éco-conception d’un site internet, les enjeux UX croisent les enjeux SEO et les enjeux business, tous ces domaines sont connectés, et la mesure des KPIs est indispensable pour maintenir les performances sur ces différents aspects.

En pratique, pour le site Ecommerce de la marque Aigle (accéléré par Fasterize, ndlr), nous avons réalisé un rapport détaillé sur l’utilisation de certaines fonctionnalités selon les templates et le contexte d’utilisation. Nous avons alors pu constater que certains menus étaient dupliqués, d’autres très peu mis en avant mais avec des templates uniques qui demandaient beaucoup de ressources…
Ce bilan a permis de définir les développements à prévoir en fonction des appareils mobiles ou desktop. Le projet est ensuite de partager les données entre équipes UX et développeurs, pour organiser la conception du site web dans son ensemble, et garantir sa performance sur tous les plans : usabilité, parcours utilisateur, vitesse de chargement et consommation des ressources.

Fasterize : Avez-vous des exemples de bonnes pratiques dont l’impact est bénéfique autant pour la vitesse de chargement que pour aller vers plus de sobriété numérique ? 

Laura : Web performance et éco-conception sont imbriquées. La première bonne pratique qui me vient à l’esprit, c’est le fait d’optimiser, compresser et redimensionner les images. Des images trop lourdes ou inadaptées à la taille de l’écran peuvent évidemment dégrader l’expérience utilisateur parce qu’elles ralentissent le chargement de la page, ou qu’elles ne s’affichent pas correctement dans le navigateur.
La technique du lazyloading va aussi dans le sens de l’éco-conception. Charger l’image au moment où elle est utile, qui plus est aux bonnes dimensions par rapport à l’écran, c’est très important en Ecommerce, pour demander moins de ressources côté navigateur et côté serveur.

Farid : Je pense qu’il faut concevoir l’ensemble des leviers marketing digital pour qu’ils soient performants et éco-responsables.
Nous venons de parler de l’optimisation des images sur des pages web, mais il faut aussi se soucier des e-mails marketing. Là aussi il faut optimiser le poids des images, mais aussi nettoyer ses bases de données pour s’assurer que les messages parviennent à des destinataires pertinents et engagés, plutôt que de générer de gros volumes d’envoi qui gaspillent des ressources. La sobriété doit s’appliquer jusque dans les moindres détails.

Aussi, à partir du moment où la prise de conscience existe autour de l’impact environnemental du numérique, tout dispositif peut être évalué. Il s’agit de se mettre dans un état d’esprit qui consiste à s’interroger en continu sur son empreinte carbone.
C’est la même logique que celle qui consiste à vérifier l’impact d’une nouvelle fonctionnalité sur la vitesse et les performances d’un site : le suivi et l’amélioration doivent être constants pour être durables.

Fasterize : Sur la question du suivi continu, si on compare l’éco-conception à la webperf, ou même au SEO… Ça veut dire qu’un site n’est pas éco-conçu de manière définitive ? 

Farid : Eh non, comme pour la performance web et le SEO, l’éco-conception n’a pas d’effet définitif. Ce serait trop beau !
C’est une excellente chose de prévoir un socle de départ éco-conçu, mais un site internet vit. Il y a une saisonnalité, des contributions (landing pages, images, médias, fonctionnalités, campagnes…) et c’est précisément pour ces raisons que le questionnement et le monitoring doivent être continus.
J’évoquais un peu plus tôt des scripts tiers : on peut en avoir besoin pour suivre une campagne à un instant T, et il faut alors les prioriser et organiser leur chargement sur la page ; et une fois que la campagne est finie, il faut penser à supprimer le script sinon il continue d’être chargé pour rien.
Maintenir la sobriété numérique tout au long de la vie du site demande une vigilance constante.

Laura : En effet, sur ce point, l’éco-conception fonctionne comme la webperf : l’amélioration doit être continue. Il faut donc se poser ces questions à chaque projet ou développement : à qui ça va servir ? Est-ce que ça va servir tout court ? Est-il possible de capitaliser sur des modules déjà développés ? L’idéal est de disposer d’une bibliothèque de base pour ne pas avoir besoin de réinventer la roue à chaque développement.

Notre outil de diagnostic permet justement de mesurer l’impact environnemental d’un site web dans son ensemble, et d’évaluer l'impact de l’ajout d’une fonctionnalité en continu.
La grille d’évaluation avec un système de notation de A à G permet de fixer des valeurs à ne pas dépasser, et ainsi arbitrer sur certains développements. C’est le même principe qu’un Budget Performance !

A présent, les ponts entre webperf et éco-conception vous semblent sûrement évidents : si un site est performant, et donc léger et rapide, il consomme moins de ressources côté serveur et utilisateur, et a donc un impact moindre sur l'environnement.
C’est un objectif vers lequel nous tendons aussi en accompagnant nos clients pour optimiser la vitesse de chargement de leurs pages !

Pour comprendre l’impact de la vitesse de chargement
sur l’ensemble de votre stratégie digitale :

Je télécharge le livre blanc


Hello SMX Paris !