Des instructions à donner à votre agence Web!
Les organisations ayant inscrit le développement durable ou l’écoresponsabilité dans leurs valeurs sans valider l’empreinte environnementale de leur présence Web sont à risque d’être accusées d'écoblanchiment ou de «Greenwashing».
C’est l’objectif de ce billet de vous offrir les critères et les clés d’un site Web réellement «vert».
Selon l’office de la langue française, l’écoconception, c’est :
«la conception de produits ou de procédés caractérisée par le souci de réduire ou de prévenir les impacts environnementaux tout au long de leur cycle de vie.»
Appliqué au Web, on parle alors d’écoconception Web, de Web écoresponsable ou de «Green Web». En 2024, les entreprises, les start-ups, les organismes publics, les institutions et les OBNL ne peuvent plus négliger l’impact environnemental de leurs sites ou de leurs applications en ligne.
Voici pourquoi :
- Internet représente 10 à 15% de la consommation mondiale d'électricité, l’équivalent de 100 réacteurs nucléaires. Cette consommation pourrait représenter plus de 20% des besoins mondiaux en électricité dès 2030.
- Si Internet était un pays, il serait le troisième plus gros consommateur d'électricité au monde (avec 1500 TWH par an), derrière la Chine et les États-Unis.
- Internet est responsable de 4 % des émissions de gaz à effet de serre, un pourcentage comparable aux émissions émises par le transport aérien (!)
- Un site web moyen produit 4,61 grammes de CO2 par page vue. Pour les sites web qui ont une moyenne de 10 000 pages vues par mois, cela représente 553 kilogrammes de CO2 par an.
- Au 31 décembre 2023, il existait plus de 2 milliards de sites Web.
Un site Web génère les 6 principaux types d’impacts environnementaux suivants :
- Émissions de gaz à effet de serre.
- Épuisement des ressources en eau (Besoin accru de refroidissement).
- Consommation excessive d'électricité.
- Épuisement des ressources naturelles.
- Pollution électronique.
- Déforestation indirecte.
En adoptant des pratiques écologiquement durables, les entreprises et les propriétaires de sites web peuvent contribuer à réduire ces conséquences néfastes et à minimiser l'empreinte environnementale de leurs activités en ligne. Rendre un site web écologiquement durable implique de minimiser son impact sur l'environnement tout en maintenant une performance et une fonctionnalité optimales.
Il y a 4 axes principaux qui influent sur l’obtention ou non d’un site Web durable :
- Le temps de chargement
- Le nombre de requêtes serveur
- Le poids de chaque page Web
- L’imprimé du site
Avec ces infos en tête, voici donc les 5 clés d’un site vert :
1. Alléger : optimiser votre site Web et augmenter sa vitesse de chargement
Minification, optimisation du code et regroupement des fichiers : Faites réduire le nombre de requêtes serveur en combinant et minifiant les fichiers CSS, JavaScript et HTML. Cela permet de diminuer le temps de chargement du site. Plus le temps de chargement augmente, plus il y a de consommation d’énergie. Des outils peuvent aussi aider à optimiser le code CSS (suppression des espaces, commentaires, etc.)
Caching efficace : Demander l’utilisation de mécanismes de mise en cache pour réduire le nombre de requêtes au serveur et améliorer la vitesse de chargement des pages Web. Un cache est une zone de stockage temporaire. Le contenu est caché et stocké, mais se charge immédiatement lors d’une autre visite. Cela évite de solliciter à chaque fois un serveur.
Analytiques légères : Assurez-vous que les outils d'analyse minimisent leur impact sur la performance de votre site Web. Demander à votre agence Web d’éviter les scripts lourds qui ralentissent le chargement des pages.
Chargement paresseux : Demander à ne charger que des images ou des gros fichiers lorsque requis. Cela consiste à attendre que l'utilisateur ou le navigateur ait besoin du contenu d'une page Web pour que ce dernier soit chargé. Le navigateur attend que le lecteur fasse défiler la page jusqu'à l’élément plus lourd à charger. De cette façon, la page se charge plus rapidement au début, le navigateur ne chargeant que ce qui est vu à l’arrivée.
Limiter le nombre de redirections : elles ralentissent le temps de réponse et consomment de l’énergie additionnelle.
Supprimer les contenus Web désuets : Faites supprimer les contenus ou pages Web désuets, obsolètes ou au taux de visite inexistant. Lorsqu’un site Web n’est plus utile ou pertinent, planifier sa fin de vie. En libérant de l’espace sur les serveurs Web, on contribue à son niveau à réduire le taux faramineux de sites Web inactifs, inutilisables et inutilisés. Ceux-ci représentent 75% des 2 milliards de sites Web dans le monde.
2. Épurer : appliquer la sobriété énergétique et le design éco-graphique à votre site :
Éco-typographie : L’utilisation d’une éco-typographie réduit le temps de chargement et par conséquent la pollution numérique. Ces polices de caractère consomment aussi moins d’encre à l’impression. Demander à votre agence Web :
- D’utiliser des polices optimisées pour le Web tels que les formats WOFF/WOFF2 (Web Open Font Format versions 1 et 2 : la taille de leur fichier est moindre.
- D’utiliser des polices simples et standard plutôt que complexes, et Websafe ou « polices de navigateur », c’est-à-dire accessibles par défaut sur les appareils et navigateurs. (Times New Roman, Verdana, Arial, etc.)
- D’utiliser des polices dont la taille des lettres et l’espacement sont minimes (sans toutefois compromettre la lisibilité)
- D’utiliser des polices peu grasses (ex : Garamond, laquelle consomme 24% d’encre en moins).
- D’utiliser des polices ajourées (ex : Eco Font).
- Réduire au minimum le nombre de polices d'écriture.
Éco-branding :
- Webdesign minimaliste, de type «mobile first» ou applicatif (économie de bande-passante).
- Identité visuelle éco-responsable : se doter d’un logo dont les lettres ou symboles sont évidés plutôt que remplis, et dont les lignes sont minces.
- Utiliser des couleurs moins denses, et moins d’aplats.
- Privilégier un fond noir (60 % d’énergie en moins).
- Intégrer un mode sombre (dark mode). Il s’agit d’assombrir les teintes et couleurs pour tous les éléments affichés d’un site (y compris le fond), et réduire le contraste entre les divers éléments.
Éviter WordPress : Wordpress est conçu sur la base d’une multitude de «plugins» ou modules d’extension. Les plugins alourdissent le code des sites Web et allongent leur temps de chargement. Plus de temps de chargement signifie plus de CO2. D'un point de vue écologique tout autant que d’un point de vue commercial ou corporatif, la lourdeur, la lenteur et le code excessif de WordPress sont en votre défaveur. Parce que les plugins de WordPress et la plateforme elle-même sont énergivores, ils ne répondent pas aux critères d'un site Web éco-conçu. Pour en savoir plus sur les autres failles de WordPress, lisez notre billet à ce sujet.
Choisir une application Web PWA :
Le développement d’une application native sur des systèmes d’exploitation tels qu’Android ou Appstore exigent un double voire un triple développement, sans compter de fréquentes maintenances. La PWA étant plus légère et non liée à un système d’exploitation, elle utilisera moins de bande passante et ne risque pas d’être affectée par l’obsolescence de l’appareil mobile.
Courriels envoi de masse :
Un des principaux outils du marketing numérique est l’envoi de courriel de masse. Une multitude de logiciels fournissent ce service (Hubspot, mailchimp, courrielleur, cyberimpact, etc.) L’impact environnemental de ces envois est important.
- 15 milliards de courriels sont envoyés chaque heure dans le monde.
- 140kg de CO2 en moyenne sont produits en 5 ans pour chaque citoyen qui ne supprime pas ses vieux courriels.
L’envoi de courriels de masse est loin d’être pertinent. Souvent peu ciblé, peu personnalisé, les résultats obtenus ne sont souvent pas à la hauteur. La solution : Segmenter et cibler les destinataires afin de réduire le volume d'envoi.
Fonctionnalités utiles : Se baser sur un énoncé porteur afin de concentrer les efforts sur la réelle valeur ajoutée d’un site Web. Tout le reste doit être élagué : animations énergivores, appels à l’action trop nombreux, contenus textuels et visuels périphériques et non-prioritaires, etc. Garder des pages aérées et s’abstenir de submerger les utilisateurs avec un nombre de pages Web trop élevé.
Images et vidéos :
- Réduire le nombre d’images.
- Réduire les dimensions des images.
- Ne pas héberger de vidéos sur le site lui-même si celles-ci sont déjà disponibles sur un «chanel» ou une plateforme de streaming vidéo externes. Rediriger les utilisateurs vers ces plateformes.
Gestionnaire de contenu (CMS) «Headless» : Privilégiez l’option d’un gestionnaire de contenu headless. Avec ce type de gestionnaire ou CMS, l’interface d’administration et l’interface public (front-end) ne sont pas liés par une base de données mais communiquent plutôt par API. Ce procédé augmente la rapidité de chargement et diminue la consommation d’énergie.
3. Automatiser et virtualiser : pour réduire la pollution numérique.
Automatisation des processus métiers : Un processus métier comprend une séquence d’actions complémentaires et de tâches à réaliser afin d’atteindre les objectifs d’une organisation. Voici en exemples 5 types de processus métiers :
- Rapports et formulaires
- Gestion des commandes, des expéditions, des paiements et des inventaires.
- Processus d'inscription.
- Relation client.
- Marketing.
L’automatisation des tâches répétitives et chronophages au sein de ces processus accroît l’efficacité, la rapidité et l’économie en énergie. Ces automatisations facilitent la mise en place de pratiques durables et écoresponsables en dégageant des ressources pour des tâches à plus grande valeur ajoutée. Exemples d’économies réalisées :
- Réduction des erreurs menant à reprendre des opérations énergivores.
- Réduction des déchets.
- Réduction des déplacements et du transport.
- Réduction du papier et de l’impression.
- Réduction de l’énergie consommée pour assurer une traçabilité.
Automatisation des sites Web : Grâce à l’automatisation et l’intelligence artificielle, des outils d'automatisation permettent une consommation économe du contenu d’un site Web. En diminuant le temps de chargement, en monitorant et en consommant au minimum la bande passante, ces outils rendent les sites Web qui les utilisent plus verts.
Plateformes de vente en ligne, de collaboration, d’économie de partage et de commerce électronique :
Ces plateformes permettent une énorme économie énergétique en réduisant le nombre de magasins physiques. Elles réduisent l’empreinte carbone du commerce de détail traditionnel, en particulier les déplacements et l’énergie consommée par les salles de montre et les magasins accessibles au public.
Évènements virtuels :
La pandémie 2020-2022 a fait réaliser aux entreprises et aux organisations l’importance de ne pas entièrement dépendre des rencontres ou événements en personne. Puis, la pandémie est passée mais la virtualisation, tout comme le télétravail, sont restés.
Les événements virtuels permettent de réduire les coûts mais aussi de réduire la dépense énergétique de ces événements qui génèrent une forte empreinte carbone. Le site Web ou une application Web permettent aujourd’hui d’intégrer des événements virtuels et de renforcer les pratiques durables. Voici de nombreux exemples de plateformes centrées sur des événements virtuels :
- Salles de spectacles en ligne.
- Diffusion (streaming) live ou en différé.
- Formations Webinaires.
- Kiosques d'exposition virtuels.
- Forums, congrès, conférences, colloques et foires virtuelles.
4. Héberger sur des serveurs locaux : solution essentielle pour réduire l’empreinte environnementale.
Le temps de réponse initial du serveur :
Comme nous l’avons vu tout au long de ce billet, la vitesse de chargement de votre site Web est un élément crucial dans la dépense d’énergie et la pollution numérique qu’il génère.
Tout site Web est hébergé sur des serveurs via un hébergeur Web. Ces serveurs consomment une importante quantité d’énergie. En électricité, mais aussi en eau. Les salles de serveurs (aussi appelées Datacenter ou centre de données), sont maintenues entre 10 et 27 °C.
Pour conserver cette température, de très grandes quantités d’eau douce doivent être puisées pour refroidir les circuits de ces serveurs.
Héberger local réduit le temps de réponse initial du serveur :
- En règle générale, un serveur local aura une latence plus faible par rapport à un serveur distant. La distance physique que les données doivent parcourir entre le serveur et l'utilisateur peut affecter la vitesse de chargement. Les serveurs locaux ont tendance à offrir des temps de réponse plus rapides pour les visiteurs situés dans la même région.
- La localisation du serveur peut aussi avoir un impact variable en fonction du type de contenu hébergé. Les sites avec beaucoup de contenus dynamiques bénéficient d'un hébergement plus proche de leurs utilisateurs.
Les sites web sont d’ailleurs de plus en plus dynamiques. Les applications web progressives (PWA) - des applications web combinant des fonctionnalités des sites web et d’applications natives- offrent une expérience utilisateur fluide, même en l'absence de connexion Internet, et ont contribué à la popularité des sites web dynamiques. L'évolution des technologies web, notamment du côté client et du côté serveur, a aussi facilité la création des sites web dynamiques.
Ces sites dynamiques sont plus énergivores que les sites Web statiques, car ils effectuent souvent des opérations de traitement intensives du côté serveur pour générer des pages personnalisées en temps réel.
Malgré cet handicap, les sites dynamiques sont maintenant incontournables : ils offrent une expérience utilisateur plus interactive et personnalisée, conçue davantage en fonction du comportement de l'utilisateur, de ses préférences et de ses interactions passées. Les visiteurs peuvent interagir avec le contenu, recevoir des mises à jour en temps réel, et bénéficier de fonctionnalités avancées qui améliorent leur expérience en ligne. Cela est particulièrement important dans les domaines du commerce électronique et des services en ligne.
En conséquence, héberger localement les sites dynamiques permet de :
- Réduire la charge des serveurs
- Augmenter la réactivité en temps réel
- Accélérer l’accès aux bases de données, aux composants du site et aux services tiers.
- Gérer directement les serveurs, ce qui optimise la performance des sites.
5. Le développement sur mesure des sites Web : du développement Web éco responsable.
Le développement sur mesure répond mieux aux besoins spécifiques des projets dynamiques car il offre des solutions uniques et adaptées aux exigences de l'utilisateur final tout en réduisant la pollution numérique de ces sites :
Du mobile plus rapide, plus optimisé et plus écologique : Avec la popularité croissante des appareils mobiles, la conception sur mesure garantit une expérience utilisateur cohérente et optimisée, quel que soit le dispositif utilisé.
Sur mesure et écoconception vont de pair : Le développement sur mesure optimise les performances en veillant à ce que les éléments graphiques et interactifs soient bien intégrés, optimisés pour la vitesse de chargement, et conformes aux meilleures pratiques de conception web.
Développement sur mesure évolutif contre les fonctionnalités inutiles : Les sites web dynamiques évoluent souvent avec le temps pour s'adapter aux besoins changeants de l'entreprise ou des utilisateurs. La conception sur mesure peut anticiper la capacité évolutive des sites Web dynamiques et maximiser ce potentiel dans les interfaces utilisateurs. Se faisant, le développement sur mesure contribue à la sobriété énergétique en réduisant les fonctionnalités inutiles, et en s’assurant qu’un site Web reste léger, actuel, utilisable et fonctionnel toute sa vie durant.