Eco-conception  Web

La face cachée du numérique

Il est difficile de croire que l’on pollue quand on reste chez soi et que l’on regarde une vidéo sur internet ou que l’on fait une recherche sur Google... Et pourtant c’est le cas. Le web n’est pas totalement virtuel comme on pourrait le croire. Il repose sur des équipements et des infrastructures bien réels (smartphone, ordinateurs, antennes, cables, puces électroniques, batteries...) et consomme de l’électricité.

L’empreinte carbone du numérique en quelques chiffres...

Chaque geste effectué sur le web produit une empreinte carbone : visiter un site web, lire une vidéo, envoyer un mail. Un site web génère entre 2 et 10 grammes d’équivalent CO2 pour chaque page consultée. Multipliés par le nombre de visiteurs et le temps passé chaque jour, on obtient rapidement des chiffres énormes ! En juin 2020 on comptait plus d’1,93 milliard de sites web au monde. La dématérialisation de tous les services, le télétravail, la vente en ligne sont des formidables générateurs de croissance.

Si internet était un Etat, il serait le 6e pays le plus pollueur du monde, une pollution comparable à celle du trafic aérien mondial ! Selon The Shift Project, 4 % des émissions de gaz à effet de serre sont imputées à l’industrie du numérique. Et ce chiffre s’accroît de 6% par an. Ce n’est pas anodin.

Concevoir autrement les sites web

Chez Zedd on s’engage à notre échelle à réduire autant que possible l’empreinte carbone des sites web que nous réalisons. Ce n’est pas une simple façade. Depuis 25 ans que nous réalisons des sites, nous voyons l’évolution : technologies toujours plus complexes et énergivores, accumulation de contenus obèses, multiplication de publications pas toujours pertinentes... Elle est loin la page qui devait faire moins de 50Ko...

L’éco-conception web nous invite à repenser nos pratiques pour des sites internet moins énergivores et plus respectueux de l’environnement. Ce n’est pas si compliqué que ça. C’est même à votre portée aussi. Nous vous proposons ci-dessous 11 bonnes pratiques sélectionnées par nos intégrateurs et développeurs.

« Un site internet ne peut pas être écologique.
On peut en revanche éco-concevoir un service numérique pour réduire les impacts environnementaux associés. » Frédéric Bordage
ecoconceptionweb.com

Contact

Notre sélection de bonnes pratiques

1Optimisez les images

Les images sont un élément graphique important et facile à utiliser, mais saviez-vous qu’elles consomment beaucoup de ressources ? Des images lourdes occupent un espace important sur le disque dur du serveur et ralentissent le chargement de votre page ce qui pénalise le référencement de votre site ! Il est donc important d’enregistrer vos images dans des formats adaptés (png, jpg, webp) et de les optimiser aux tailles et poids adéquats ( 20Ko pour une vignette, 100Ko pour une petite image, 200Ko pour une grande image). Voici quelques liens pour optimiser vos images, en ligne ou avec un logiciel : www.iloveimg.com/fr www.irfanview.com (PC)

2Évitez les vidéos & les GIF animés

On estime que la consommation mondiale de streaming vidéo émet 300 millions de tonnes d’équivalent CO2 chaque année. Cela correspond à la pollution numérique d’un pays comme l’Espagne ! À titre d’exemple, les 2.7 milliards de vues de la vidéo Gangnam Style représentaient la consommation annuelle d’une petite centrale nucléaire !
Si possible, évitez l’utilisation des vidéos. Si vous estimez que c’est absolument primordial, optimisez leur poids et évitez l’auto-play ( c’est l’internaute qui choisira de la lancer ). Compressez vos vidéos en coupant ou en rognant ces vidéos, en ajustant les paramètres tels que la résolution, le débit, la fréquence de trame, etc... ou en les convertissant vers des formats vidéo plus petits. Quelques outils en ligne : www.zamzar.com www.videosmaller.com/fr

3Limitez vous à deux polices maximum

En dehors des fontes standards installées sur les systèmes d’exploitation comme Helvetica, Times, Verdana, Arial…, les autres typographies nécessitent des requêtes serveurs pour se charger sur l’écran du visiteur.
Sachez qu’un seul fichier de police (ou fonte) pèse en octets entre 30 et 600 Ko !
Optez donc pour deux à trois polices maximum. Cette bonne pratique vous incite à simplifier en même temps votre charte graphique web.
L’internaute vous dira merci ! Voir des exemples réalisés par Zedd

4Avez-vous vraiment besoin d’un carrousel ?

Savez-vous que seuls 1% sur 3 millions d’internautes cliquent sur le bouton de défilement des diapositives d’un carrousel ? C’est joli et agréable à la première visite, mais ça peut être envahissant et ralentir l’affichage de votre page d’accueil.
Le poids et les ressources nécessaires au fonctionnement d’un carrousel sont disproportionnés au regard de son utilité réelle. Pensez-y !

5Traquez le contenu inutile

Il s’agit de vous poser la question : "Est-ce que l’internaute a besoin de cette information ?"
Par exemple : infos trop anciennes, contenu dupliqué, témoignages clients envahissants, publicité invasive et dissuasive… Eh oui, structurer et concevoir une architecture optimisée pour votre site web est essentiel. En optimisant vos contenus vous optimiserez aussi le référencement de votre site ! Une stratégie gagnant-gagnant ! Faites confiance à Zedd pour vous y aider.

6Optimisez les documents pdf

Avant la mise en ligne de vos documents PDF, pensez à vérifier qu’ils ont été optimisés pour le web. On recommande un maximum de 1Mo par PDF. Au delà, cela ralentit son affichage et décourage l’internaute. Si votre document est très lourd, indiquez son poids à l’internaute. Vous pouvez aussi le découper en plusieurs documents séparés. Voici un lien pour optimiser vos PDF en ligne : www.ilovepdf.com/fr

7Évitez l’utilisation des cartes interactives

Un plan interactif est très pratique mais génère des requêtes sur des serveurs tiers (Google ou OpenStreetMap) lors de son utilisation. Ces requêtes consomment de l’énergie et ajoutent des cookies sur votre site. Alors plutôt qu’un iframe, pourquoi ne pas créer un plan d’accès sous forme d’image ou de schéma ? Et, si vous y tenez, ajoutez le lien personnalisé vers Open Street Map ou Google Map pour ceux qui en ont réellement besoin. www.openstreetmap.fr

8Sous Wordpress, évitez les thèmes trop lourds

Les thèmes ou templates contiennent des bibliothèques et des éditeurs WYSIWYG qui vous permettent de personnaliser vos pages sans coder. Tous possèdent un impact énergétique non négligeable et ralentissent votre site. Certains vous obligent à installer des plugins et l’ensemble doit être mis à jour régulièrement.
Une solution simple et efficace : se passer de thème et faire développer votre site à la main sans CMS. C’est possible avec ZEDD ! Pensez-y pour vos sites vitrines !
Evaluez le poids carbone de votre site (ou de celui de votre concurrent !) en ligne sur : websitecarbon.com muchas-glacias.com yellowlab.tools

9Choisir un hébergement vert et local

Un data center standard de 10 000 m2 consomme en moyenne autant qu’une ville de 50 000 habitants ! Et 40% de cette consommation électrique est utilisée uniquement pour le refroidir… Choisir un hébergement éco-responsable est une solution simple et économique pour diminuer l’impact environnemental de votre site web. Contactez Zedd pour un devis d’hébergement vert.

10Limitez le nombre de requêtes

Chaque visiteur sur votre site web occasionne des requêtes au serveur pour afficher vos pages web.
Plus une page web est chargée, plus elle contient de requêtes et plus son empreinte carbone est importante… On estime qu’une requête consomme autant d’électricité qu’une ampoule allumée pendant une heure.
Pour mesurer et optimiser vos pages, Zedd utilise l’extension : GreenIT-Analysis (ecoresponsable.numerique.gouv.fr)

11Minifiez les fichiers Javascript et CSS

JavaScript et CSS, deux outils de développeurs pour réaliser, entre autres, des animations et des interactions dans votre site. Sachez que les bibliothèques javascript, sont très lourdes et ralentissent le chargement de vos pages. Certaines ne sont pas nécessaires ni recommandées. Il s’agit de ne pas "envoyer la cavalerie" pour faire faire à votre site un léger effet de hover !
Chez Zedd, nous traquons les lignes de code inutiles (CSS et javascript, mais pas que), tout en conservant le rendu de votre site. C’est ce qu’on appelle la minification. N’est ce pas magnifique !
Voici un lien pour vous aider à traquer le CSS inutile : unused-css.com