Exemples de sites web éco-responsables

Les équipes de SCORE DDB nous ont choisis pour exécuter leur refonte et, au passage, réduire les émissions de CO2 causées par l'utilisation de leur site. Objectif : un site ultra-propre et très visuel. Le site vitrine d’une agence de publicité, cela relève du défi technique : qui dit publicité, dit beaucoup de visuels et de vidéos. Voici comment nous avons fait, et les résultats que nous avons obtenus.

Avant refonte, le site scoreddb.fr, vieux de quelques années, affichait ces scores : 

- 1,60gr de CO2 produit à chaque visite, selon websitecarbon.com. Le site était plus polluant que 86% des pages testées.
- Score ecoIndex : F (moyenne des pages du site). Pages trop lourdes, trop complexes, trop de requêtes (237).
- Score Google PageSpeed Insights : 18% en mobile, site très lent et lourd.
- Le site bénéficiait déjà d’un hébergement éco-responsable.

Ces scores sont classiques pour un site pas tout récent, avec beaucoup de contenu, d’images et de vidéos. La refonte a donc été l’occasion d’améliorer tout ça. 

SCORE DDB avait une vraie volonté de pousser loin les curseurs d’éco-conception digitale :

« En temps qu’agence de communication, il nous paraissait impossible de nous priver de couleurs, visuels ou vidéo pour ce nouveau site ou incohérent de mettre en place des artifices comme un switch « mode basse consommation ». L’expérience sur le site devait rester la plus efficace possible tout en obtenant les meilleurs scores de performance environnementale et en réduisant son empreinte carbone. »
Gautier Linard, qui a piloté le projet chez SCORE DDB.

Pour son offre aux entreprises, Surfrider Foundation Europe avait besoin d'un site web dédié,et d'un site éco-conçu, évidemment. C’est de l'indbound marketing, donc le site devait être très visuel et attractif, et contenir beaucoup d'images, tout en restant léger et performant… Une mission pour Internet 2000, et l'agence 83° Nord.

Défi n°1 : Comment obtenir un très bon score Google PageSpeed Insights pour doper ses performances marketing ? En codant éco-conçu bien sûr : avec des pages statiques, des formats d’image modernes et légers - webp et svg, et tout une série d’optimisations dont nous avons le secret chez Internet 2000. Résultat au PageSpeed Insights : 93/100 sur mobile, et 99/100 sur desktop sur la home, pourtant riche en images. Notre client pourra maintenir ces scores dans la durée grâce à l’automatisation des optimisations, comme par exemple celle des formats des images via leur back-office simple et intuitif.

Défi n°2 : comment faire un site éco-conçu mais très visuel et attrayant ?

L’UX fluide et claire et la sobriété éditoriale, assurées par l’agence 83° Nord, couplée au développement éco-conçu de notre studio a permis de relever ce défi.  Résultats : un score ecoIndex moyen de B sur le site, soit  76,4/100, et un site plus simple, plus léger et avec moins de requêtes que la médiane.

Le groupe Lagarigue, concepteur et fabricant d’appareillage orthopédique externe sur mesure pour des personnes en situation de handicap, est devenu Eqwal. L’agence Shortlinks est à l’origine de ce nouveau nom, évoquant égalité et équité.

Le site, qui lançe le changement de nom du groupe, se devait d'être innovant, respectueux de l'environnement, donc éco-conçu, et de mettre en valeur sa nouvelle identité, élégante et travaillée, avec une forte dimension humaine. Dès lors, un certain niveau de design se devait d'être respecté. Un site institutionnel, multilingue, qui comprend une partie "Actualités" / système de blog, et qui porte les valeurs de la marque : sérieux, performance, équité, et responsabilité environnementale. Dans le footer, on retrouve les "badges" mesurant l'empreinte carbone du site, et les preuves de sa conformité aux principes du green IT.

La forte dimension humaine traduite par de grandes images impliquait donc un socle technologique assez léger pour pouvoir ne pas faire trop de concessions sur le design, et donc sur la taille des visuels... C'est exactement ce que nous a permis la technologie statique, couplée aux bonnes pratiques de l'éco-conception digitale, comme les formats d'images - webp et svg, les images servies de façon adaptées au device - une petite image pour un mobile, une grande pour un desktop, etc - un système de cache, du lazy loading, un parcours utilisateur simple et clair, et bien d'autres.