Retour d’expérience : optimisation en éco-conception

Lors du Web2Day 2022, Empreinte Digitale a participé au Marché de l’Impact, une initiative portée par Toovalu regroupant dix acteurs de l’ouest engagés pour un numérique plus sobre et durable. À cette occasion, l’entreprise Greenspector a effectué un classement de l’empreinte environnementale de plus de 70 sites web de partenaires et participants à l’événement. 

Avec la troisième place (deuxième pour les entreprises), le site d’Empreinte Digitale se place en haut du classement ! Une performance qui met en lumière les récents travaux de notre équipe de développeurs pour améliorer l’éco-conception de notre site. Retour d’expérience avec Félix Girault, développeur front-end et Yann Olive, Directeur de Production et Président de la SCOP.

Après avoir remporté le Design4Green 2021, vous vous êtes attaqués aux améliorations de l’éco-conception du site empreintedigitale.coop. Quelles ont été les modifications apportées ?

Félix Girault : Notre principale problématique était le poids des scripts. Le site date un peu, nous utilisions exclusivement jQuery, un Framework JS assez vieux et lourd. Nous avons réécrit tous les scripts en n’utilisant que du Javascript natif disponible naturellement sur tous les navigateurs. ça a pris du temps mais ça a été efficace ! Nous avons également réduit le nombre de polices ainsi que les graisses ; puis enlevé quelques styles par défaut de WordPress inutilisés. Concernant les images, nous avions un problème avec les vignettes renvoyant sur les articles du blog qui sortaient très lourdes. On a fixé ce problème en allant plus loin pour que, suivant le terminal utilisé, un format d’image adapté soit toujours affiché. Le fait de passer sur la dernière version de WordPress avec PHP 7.4 a été aussi bénéfique : plus de légèreté, moins de ressources serveurs utilisées, donc plus de performance ! Nous avons également activé HTTP2 qui permet d’appeler plusieurs fichiers en parallèle et plus un par un comme c’était le cas auparavant. Là encore, on a gagné en performance. Enfin, nous avons rajouté une feuille de CSS impression : quand une page est imprimée, ça enlève automatiquement un certain nombres d’informations inutiles ou peu importantes.

Quels outils avez-vous utilisé pour vous aider dans ces améliorations ?

Nous nous sommes basés sur les outils de développement du navigateur qui permettent de voir le poids des ressources, toutes les requêtes appelées, celles qui peuvent être enlevées… On s’est aussi appuyé sur quelques outils de performance green comme Light House, Kastor.green, etc. Ces outils n’empêchent pas de faire une analyse plus poussée mais peuvent aider dans le cheminement. 

Quels sont les avantages d’avoir un site éco-conçu ? 

Évidemment, l’objectif c’est d’avoir un service numérique moins polluant et donc plus respectueux de l’environnement. Mais un site éco-conçu, c’est aussi un site plus rapide, plus performant. De ce point de vue, cela va aussi aider à réduire la fracture du numérique : si tu utilises un vieux terminal ou que tu es dans une zone où le réseau est réduit, tu pourras tout de même consulter le service. 

Quelles sont les prochaines étapes pour aller plus loin dans l’écoconception du site ?

Sur la question des images, on a des possibilités pour alléger encore plus : formats de compression encore plus élevés, dithering, remplacement des images par des illustrations SVG… On se renseigne également sur de nouveaux Framework JS qui peuvent découper les scripts par “morceau” de page, on serait quasiment dans l’instantané pour le premier chargement. Sur le côté back-end, il y a la piste site statique, quelque chose qu’on a testé – avec succès – lors du Design4Green. L’idée c’est de générer une fois pour toutes les pages du site, de les stocker sur le serveur en format HTML, le serveur faisant ensuite “passe-plat”. C’est une solution radicale qu’on souhaite mettre en place sur nos solutions sur-mesure maintenant. 

Les équipes d’Empreinte Digitale sont formées et engagées sur l’éco-conception ?

Yann Olive : Étant partenaires Fondateurs Opquast, toutes nos équipes (chefs de projet, développeurs, équipe communication..) sont formées depuis plus de 10 ans à la qualité web qui contient déjà un bon nombre de bonnes pratiques en lien avec l’éco-conception. Et l’ensemble des collaborateur est évidemment formé à l’accessibilité numérique qui est au cœur de notre activité. Plus récemment, côté développeurs, nous avons eu une formation avec Frédéric Bordage en 2019 sur l’éco-conception. Les chefs de projet ont également été formés en janvier 2021. On fait aussi de la veille régulière sur le sujet. Depuis quelques années, une vraie culture d’entreprise se met en place autour de l’écoconception : on met en place des process et on avance. On propose désormais à nos clients un audit complet d’éco-conception, incluant un score d’éco-conformité et des préconisations pour améliorer le service numérique.