Les bonnes pratiques pour créer un site web écoresponsable

On en parle encore trop peu, mais la pollution numérique existe. Chaque recherche que nous faisons, chaque fichier que nous stockons sur le cloud, chaque vidéo que nous regardons en streaming, se traduisent en émissions de CO2. La production d’électricité rejette du CO2 dans l’atmosphère, tandis que les datacenters génèrent tellement de chaleur qu’il faut les réfrigérer : vous voyez le cercle vicieux ?

Le monde numérique est concerné par la transition écologique, tout autant que le secteur du transport ou de l’alimentation. Si vous avez un site web, ou si vous envisagez d’en créer un, voici comment apporter votre pierre à l’édifice.

À quoi ressemble un site web écoresponsable ?

Le but d’un site écoresponsable, c’est de consommer moins d’énergie : il est conçu en vue d’une utilisation la moins énergivore possible. Pour ce faire, on pense qualité et pas quantité, essentiel et non superflu.

Le résultat :

• un site simple, qui répond aux besoins de manière complète, sans artifices supplémentaires ;
• un site rapide, car plus léger.

Côté utilisateur :

• la navigation gagne en qualité ;
• les contenus sont plus percutants.

La rapidité de chargement du site écoresponsable est un atout en matière de référencement naturel (SEO). C’est en effet l’un des critères de référencement des moteurs de recherche.

Comment optimiser les ressources de votre site web ?

Les stratégies écoresponsables interviennent sur plusieurs plans afin de limiter les ressources employées par votre site. Pour ne rien perdre en performance tout en minimisant votre empreinte carbone, des solutions existent.

Hébergement « vert »

Plus votre hébergeur est proche de vous, moins vous consommez d’énergie. À condition de choisir le bon hébergeur ! Un hébergeur écologique alimente ses datacenters avec des énergies renouvelables. En France, n’hésitez pas à jeter un œil à la société Ikoula ou o2switch.

Langage de programmation adapté

Chaque langage de programmation dispose de caractéristiques spécifiques, y compris en matière d’émissions carbone. Le langage le plus économe en énergie serait C, suivi de Rust, C++, Ada et Java. Au contraire, les langages Python, Perl, JRuby et Lua ne sont pas recommandés pour l’écoconception de votre site web.

Code minifié

Que vous écriviez le code source de votre site en HTML, JavaScript ou CSS, cherchez toujours à le minimiser : réfléchissez bien en amont afin d’éviter au maximum les répétitions et les éléments inutiles. L’utilisation de Divs et de classes augmente par exemple le poids de votre code source.

• UnCSS Online! : ne conservez que l’essentiel de votre fichier CSS
• Compresseur Infowebmaster : compressez votre code JavaScript
• Refresh-sf : intervient sur JavaScript, CSS et HTML

Ergonomie épurée

À chaque visite, la requête HTTP va automatiquement charger tous les fichiers nécessaires à l’affichage de votre site. Pour alléger cette opération, vous pouvez empêcher le chargement de fichiers inutiles, tels que certaines polices ou vidéos YouTube.

Tous les médias (fichiers texte ou audio, images, vidéo, etc.) peuvent être compressés sans perte de qualité. Posez-vous la question du format le mieux approprié à vos fichiers (HTML, photos, etc.). Cette optimisation permet de diminuer le temps de chargement des pages.

Focus : design écoresponsable

Pour éviter les surcharges visuelles, choisissez judicieusement votre charte graphique et faites-le tri des boutons, animations, etc. Une expérience utilisateur (UX) optimisée repose sur le juste équilibre entre visuel et efficacité.

Certaines astuces très simples permettent de ne pas alourdir les bandes passantes et les serveurs.

• Les animations 2D sont plus légères que les animations 3D.
• Les vidéos sont les plus gourmandes en ressources.
• Choisissez des fichiers inférieurs à 1080 pixels de large, pour un poids de moins de 200 ko.
• Les formats photos à privilégier sont WebP, WebM ou SVG. À l’inverse, JPG, PNG et MP4 figurent parmi les moins écologiques.

Vous avez un site WordPress ?

Nous vous présentons deux exemples de plugins spécifiques à WordPress, particulièrement utiles pour nettoyer en profondeur la pollution numérique de votre site.

WP Rocket

L’extension WP Rocket est accessible en version gratuite ou payante. Très simple d’utilisation, WP Rocket sert à :

• compresser les caches et alléger ainsi le CSS ;
• alléger JavaScript ;
• diminuer le poids des images ;
• éviter les appels serveur.

ShortPixel

Vous connaissez désormais l’impact des visuels sur l’empreinte carbone de votre site. ShortPixel vous permet d’optimiser la taille et le poids de vos visuels existants. L’extension intégrera également tous vos futurs visuels.

Testez l’empreinte carbone de votre site

Des calculateurs en ligne tels que Website Carbon Calculator vous permettent d’estimer rapidement l’équivalent CO2 de votre site web. De quoi vous donner matière à réfléchir sur vos axes d’amélioration…

Une fois mises en place vos stratégies écoresponsables, celles-ci deviennent un argument marketing : en partageant le résultat du calculateur, vous inciterez peut-être d’autres personnes à s’engager sur la voie de l’écoresponsabilité !