On a éco-conçu notre site Web, sans compétences en code.

Les valeurs ne s’apprennent pas en quelques mois, les compétences oui ! Chez Wild&Slow on travaille chaque jour à ce que nos réalisations respectent la planète et ceux qui y résident. Cependant, on n’a pas toujours les compétences requises, ou du moins on se dit qu’on ne les a pas. Mais en se documentant et se challengeant un peu, on se rend compte que tout est à portée de main. 

Ce mois-ci, on voulait évoquer notre micro-aventure dans l’éco-conception de notre site web, sans compétences en code.

Retour en été 2020, pour le lancement de Wild&Slow. La création d’un site web est notre premier réflexe pour mettre en avant notre agence de communication responsable. Aucune compétence en développement à l’horizon mais Internet est rempli d’articles et de tutoriels pour nous aider, et on n’a pas peur, Julien ayant déjà piloté avec des développeurs partenaires la production d’une vingtaine de sites Web, dont une partie de grande échelle.

Avec toutes les avancées autour des services numériques depuis des années, on sait qu’un site vitrine ne nécessite pas de compétences en développement pour être conçu. La richesse du web nous offre des hébergements, CMS et templates pour chacun de nos besoins. Cette ouverture nous laisse la possibilité de concentrer notre énergie sur le discours, l’ergonomie et l’univers de notre marque.

On décide alors de partir sur un template Premium extrêmement personnalisable avec Uncode. L’éco-conception web commence initialement dès cette étape, via le choix du template (on vous conseille Neptune ou GeneratePress). Mais à cette époque, l’éco-conception web était une démarche que nous ne connaissions pas réellement, alors nous sommes restés aux bases. 

Lancement du site pendant l’été, orchestré à notre petite échelle, une vraie fierté.

On dit partout autour de nous : vous avez vu notre site ? On l’a fait tout seul, sans coder.

Janvier 2020, pour aller au bout de notre démarche de communication responsable, on se lance sur l’éco-conception, print et web. On se lance dedans avec une réelle envie d’avancer et d’engorger des connaissances et compétences sur ces sujets. Ensuite, on pourra alors les transmettre au mieux à nos clients.

Problème d’image, notre site nous a pris une énergie folle à produire (20 jours et de l’huile de coude) et utilise un template Premium Wordpress gourmand en énergie. Sans réflexion d’éco-conception au préalable, la tâche s’avère plus ardue, mais on ne perd pas espoir. On apprécie presque ce challenge. 

Commençons alors à rentrer dans le vif du sujet, en allégeant tout ce que l’on peut. On se sert alors de l’extension Green IT Analysis comme outil de mesure, pour comprendre l’impact de chaque action et laquelle est plus performante que l’autre. Nous partons alors d’un site avec une note F ou E sur certaines pages.

On commence par le plus instinctif et simple. Toutes les images sont compressées et retaillées en dehors du navigateur. Les sections et blocs sont restructurés pour éviter le changement constant des tailles d’images et les requêtes inutiles. Les plugins ne sont pas en reste. Mais avant de faire un tri dans ceux que nous avions, nous sommes passés par l’ajout de plugins de cache et de minification, sans réels résultats. Après quelques tests, la plupart des plugins ajoutés venaient au final alourdir notre site web. On continue alors de creuser, on progresse.

En février, un client nous demande un site vitrine éco-conçu, avec un objectif de note A sur l’extension Green IT. Malgré notre montée en compétences sur le sujet, on a peur de décevoir si nous ne remplissons pas les objectifs. Mais on ne peut pas dire non à ce challenge qui nous prend aux tripes.

On met alors plus d’énergie dans la recherche et le développement. On teste des thèmes éco-conçus tout juste sortis, d’autres déjà existants et vendus comme “léger”… Nous intégrons la dynamique d’éco-conception dès les premières étapes : choix du template, arborescence, gabarits de pages, univers graphique… On sort un site fictif non indexé pour faire nos tests et il en ressort une note A sur l’extension Green IT. On sait alors à quel point la conception de départ est importante. Avec un template frugal et efficace, un univers sobre en SVG et polices systèmes, le poids du site est grandement diminué. Et surtout, on a enfin la certitude qu’on n’est pas condamné en étant frugal, à sortir un site sans personnalité ou sans vie.

Nous sommes en mars 2021, retour à nos moutons. On se focalise à nouveau sur notre site web pour continuer d’y apporter des améliorations. Même si sa conception n’était pas pensée pour être frugale, il nous reste des pistes à creuser pour l’optimiser. Le résumé :

• Passage à PHP 7.4 (on va potentiellement encore upgrader)
• On applique le Mod_Pagespeed dans Apache
• On applique la compression Gzip dans Apache
• Suppression des blocs de contenus pour les intégrer directement dans nos pages
• Suppression des ¾ des autoplay
• On supprime tous les effets JS trop gourmands
• On supprime page par page les scripts et les styles chargés inutilement, via le plugin Asset Clean Up (le seul plugin d’optimisation performant que nous avons gardé)
• Ajout d’Etags
• On minifie manuellement les fichiers CSS et JS
• Côté police : on divise notre nombre de graisses de polices par deux, on passe sur des polices systèmes (présente à 98% sur Mac et Windows) notre seule font spéciale est hébergée sur nos serveurs
• Suppression de Google Analytics pour passer à Matomo en auto-hébergé
• On accélère nos serveurs DNS
• On change d’hébergeur pour choisir une offre plus durable et performante. L’heureux élu est Infomaniak.

Après de nombreux tests, du tâtonnement et quelques bugs réglés, on obtient la Note C sur l’extension Green IT, avec des contraintes de départ très lourdes. Alors on peut garantir des A ou des B pour des sites vitrines avec une réflexion d’éco-conception dès le départ.

On peut se demander pourquoi nous n’avons pas refait notre site ? 

Qui parle d’éco-conception parle forcément d’analyse du cycle de vie (ACV). Or en ACV, on analyse chacune des étapes d’un service ou produit et notamment sa fin de vie. Il ne nous semblait pas responsable de refaire un site qui a à peine 6 mois, sachant qu’il est clairement optimisable. L’éco-conception, c’est aussi jouer sur la durée de vie du service ou produit, qu’il soit numérique ou non.

Qui peut le plus peut le moins.

Maintenant, on sait éco-concevoir des sites vitrines.

On est passionnés par le sujet, et on veut le porter à une échelle plus large.

Maintenant on vend des sites éco-conçus à nos clients 🙂