Retour d'expérience sur l'éco-conception du site de SCORE DDB

C’était une mission sur-mesure pour Internet 2000. 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. Alors, voici comment nous avons fait, et les résultats que nous avons obtenus.

Avant la refonte

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 - pour comprendre ce score, voir notre article “Mesurer l’empreinte d’un site internet avec websitecarbon.com”.
• 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. 

Une vraie volonté du client SCORE DDB 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.

Dès le départ, nous avions une grosse contrainte : une vidéo background à déclenchement automatique sur la home. La bête noire de l’éco-conception.

Ce qu’on a fait pour éco-concevoir scoreddb.fr

Nous avons travaillé main dans la main avec les équipes de SCORE DDB pour convenir d’un design et de contenus optimisés. Aussi, l’ensemble des fonctionnalités du site a été passé en revue pour s’en tenir seulement aux plus pertinentes.

Nous avons évidemment développé un site statique, car c’est la technologie la plus adaptée aux sites vitrine. L’adéquation des moyens est un principe fondamental de l’éco-conception. Le serveur travaille moins, donc chauffe moins, puisque les pages ne sont générées qu’une seule fois, et non à chaque fois qu’un nouvel utilisateur les consulte. Les pages sont légères car le code statique est simple et léger. Nous avons encore diminué le poids des pages en optimisant les formats et la compression des images, et en utilisant le plus possible les fonctionnalités des navigateurs. Nous avons servi les bons formats d’images en fonction du contexte - plus petites tailles sur mobile par exemple, Webp et svg en priorité. Les fonts sont variables, l’utilisation du JavaScript limitée au minimum, et tout un tas de bonnes pratiques, dont les règles de cache et le lazy loading, ont été respectées, pour éviter tout gaspillage.

Nous avons livré une première version du site à SCORE DDB, avec d’excellents scores Website Carbon, éco-Index et PageSpeed. Nous étions assez sûrs de nous : sur 16 pages, nous en avions 5 en A, 9 en B et seulement 2 en C, celles qui avaient le plus de contenu. Il s’agissait déjà d’un tour de force pour un site aussi visuel. Nous avions activé tous les leviers habituels chez Internet 2000, notre site était bien plus propre que la moyenne.

C’était sans compter l'exigence de notre client, qui nous a challengés pour aller plus loin. Comme on aime se dépasser, on a remis la main à la pâte; en plus le client est vraiment sympa, et le site est beau. On est allés chercher dans chaque recoin comment optimiser encore nos pages :

• Ajustement au pixel des tailles de toutes les images (chargées vs affichage)
• Optimisation du fonctionnement de la video de la home
• Optimisation des scripts et styles avec un plugin spécialement développé par Alex Hoyau, notre CTO, pour l’occasion :  « Concat » dispo maintenant en Open Source - ça c’est cadeau.
• Les résultats de la refonte de SCORE DDB : un site éco-conçu ET beau

Après refonte, le site https://scoreddb.fr/ affiche ces scores : 

• 0,04gr de CO2 produit à chaque visite (websitecarbon.com), pour la page la plus lourde, soit un site moins polluant que 92% des pages testées, et une baisse de 95% des émissions de CO2.
• Score ecoIndex : A (moyenne des pages du site). Pages légères, simples, avec peu de requêtes. ecoIndex indique, lui, une diminution de 46,5% des émissions de CO2 par rapport au site initial.
• Score Google PageSpeed Insight : 96% en mobile, pour un gain de 78 points.
• Le site bénéficie, comme avant sa refonte, d’un hébergement éco-responsable, utilisant 100% d’énergies renouvelables.

Le poids moyen d’une page du site est de 500Ko, soit la moitié du poids médian d’une page sur internet actuellement (source).

Le gain, avec tous ces bons scores, c’est moins d’impact environnemental, mais aussi plus de confort pour l’utilisateur, même sur mobile, même avec une mauvaise connexion. 

SCORE DDB x Internet 2000 : une collaboration efficace pour un site fluide, agréable à consulter, et avec un impact environnemental maîtrisé. Moyenne de kiffance à faire ce projet : A.