Au commencement, Dev’Impulse faisait de « simples sites », puis, la sagesse et le savoir venant, nous avons commencé à créer des sites WordPress écoresponsables. Et comme bien souvent, nous n’avons pas eu le temps de revoir notre site en conséquence (les cordonniers les plus mal chaussés, tout ça, tout ça !)
Mais enfin, ça y est ! Nous avons planché tout l’été sur le sujet et notre tout nouveau site est en ligne. Plus beau, plus fort, plus performant et surtout beaucoup plus écologique. On vous emmène dans les coulisses de notre transition écologique !
Quel impact écologique au départ ?
Comme le site n’a pas été écoconçu à la base, nous ne savions pas si nous devions seulement modifier quelques petites choses ou tout revoir de zéro. Il fallait donc commencer par certaines mesures pour découvrir notre empreinte carbone avant de démarrer les travaux.
Ayant déjà fait un article sur les outils de calcul de l’empreinte écologique d’un site web, nous ne reviendrons pas dessus aujourd’hui mais nous vous invitons à le consulter.
Le site Website Carbon Calculator, calculateur d’empreinte écologique, nous a donné les résultats suivants :
Notre page d’accueil était plus propre que 73% des pages testées et elle rejetait 0.43g de CO2 par visite. Ce n’est pas trop mal, mais pas top non plus.
Pour découvrir quelles pistes suivre pour améliorer ces résultats, nous avons utilisé l’extension de navigateur GreenIT Analysis.
Elle nous a donné une note EcoIndex D (un site très peu polluant à une note de A). Les points majeurs à améliorer réduire son impact sur l’environnement étants :
- le poids total de la page (923Ko),
- la taille du DOM (979) soit, en très gros, le nombre d’éléments sur la page.
Nous voici avec un plan d’action, alors c’est parti !
Les travaux démarrent !
Un site WordPress plus accessible
L’accessibilité d’un site, c’est le rendre consultable par tous, y compris par les personnes en situation de handicap, quel qu’il soit (visuel, auditif, physique, d’attention, …)
Il ne s’agit pas d’une démarche écologique mais d’une démarche éco responsable, centrée autour d’objectifs sociétaux autant qu’environnementaux. C’est une démarche qui nous tient à cœur.
En plus, travailler l’accessibilité d’un site c’est aussi le rendre plus clair pour tous les visiteurs, c’est bien vu par les robots Google et donc c’est super pour le référencement naturel !
De notre côté, nous avons :
- Vérifié l’arborescence de notre site WordPress pour nous assurer du bien fondé de chaque page.
- Clarifié les menus pour améliorer la navigation dans le site
- Travaillé chaque section de page pour quelle apporte une information simple et rapide
- Revu les couleurs utilisées pour que les contrastes soient suffisamment importants
- Changé la police d’écriture des textes pour un modèle plus facile à lire
- Augmenté la taille des textes pour une meilleure lisibilité.
Un design plus épuré
D’après nos mesures, notre score écologique pouvait être amélioré en diminuant le nombre d’éléments par page (taille du DOM). Cela passait donc par un design plus simple, même si notre design originel n’était pas particulièrement alambiqué.
Nous avons cherché à enlever les éléments qui ne servaient pas vraiment dans le site. Il y en avait peu.
Du coup, on a voulu simplifier les éléments qui restaient :
- La boite à onglet pour expliquer notre méthode est devenu un ensemble de blocs de textes,
- Le carrousel qui faisait défiler nos réalisations s’est transformé en 3 logos fixes
- Les boutons ont perdu leur animation
A l’échelle du site, nous avons réussi à mettre moins d’éléments et surtout des éléments moins complexes. Le design a gagné en sobriété et en clarté et a perdu en impact sur l’environnement !
Des images optimisées
L’autre point noir de notre analyse était le poids de la page. Il est majoritairement dû aux images, trop nombreuses, trop lourdes et représente la plus grande partie de l’empreinte environnementale de notre site.
La suppression du carrousel de 6 logos, au profit de 3 images fixes, a déjà permis de réduire le nombre d’images.
Les images inutiles ont été supprimées et/ou remplacées par des pictogrammes qui illustrent mieux le propos développé dans les textes. En plus, ils sont beaucoup plus légers que des photos classiques car ils contiennent moins de données (1 ou 2 couleurs au lieu de plusieurs centaines).
Pour diminuer encore plus le poids de ces pictogrammes, nous les avons compressés avant de les intégrer au site avec TinyJPG. Leur poids a encore bien été réduit mais pas leur qualité !
Quel impact écologique à l’arrivée ?
Le suspens est à son comble ! Est-ce que nos efforts ont payés ? Avons-nous pu diminuer l’impact écologique de notre site WordPress ? Testons notre nouveau site :
GreenIT Analysis trouve :
- Un poids de la page de 442Ko (contre 923Ko), soit un résultat divisé par 2 ;
- Une taille de DOM de 517 (contre 979), là aussi, une très belle réduction ;
Notre EcoIndex passe de D à B !
Et selon Website Carbon Calculator, nous sommes devenus plus propre que 90% des sites testés (contre 73%), pour une consommation de CO2 de 0.10g au lieu de 0.43g, soit un impact carbone divisé par 4 !
Conclusion
Notre site a subi certaines modifications pour améliorer sa note éco responsable. Celles ayant eues le plus d’effet concernant l’accessibilité, le design et les images.
Finalement, grâce à quelques changements et un peu de bon sens, l’impact écologique de notre site WordPress est divisé par 4. Pour fêter ça, nous avons compensé l’émission carbone restante en plantant un arbre grâce à Ecotree.
Nous sommes ravis du chemin parcouru mais nous nous remettons au travail pour décrocher un A la prochaine fois !
Et vous ? Qu’allez-vous mettre en place pour réduire l’impact environnemental de votre site web ? Si vous ne savez pas par où commencer, nous avons réuni pour vous « les 7 bonnes pratiques pour rendre votre site éco-responsable ».
Et sinon, que vous cherchiez à créer votre site web ou à rendre un site existant plus écologique, nous sommes à votre dispositions pour vous accompagner ou simplement vous conseiller. N’hésitez pas à prendre rendez-vous.
