L’essor de l’éco-conception web : avantages, outils, défis et perspectives pour un internet plus vert

Qu’est-ce que l’éco-conception web ?

L’éco-conception web est une approche de développement de sites internet visant à réduire leur impact environnemental. Elle implique une planification et une exécution minutieuses pour optimiser l’efficacité énergétique, l’utilisation des ressources et la durabilité. Cette démarche est en adéquation avec les principes de conception UX/UI, où l’expérience utilisateur et l’efficacité sont centrales. Elle englobe la minimisation de la taille des données transmises, l’utilisation de formats de fichiers économes en énergie, et le choix de technologies respectueuses de l’environnement.

Principes et règles de l’éco-conception web

• Minimisation des données transmises :
  Réduction de la taille des fichiers, compression efficace, et optimisation des images et vidéos.
• Design responsable :
  Adoption de designs réactifs et économes en ressources.
• Choix de technologies éco-efficaces :
  Sélection de langages de programmation et de frameworks légers et efficaces.
• Optimisation de l’interaction utilisateur :
  Simplification des parcours utilisateurs pour réduire la consommation d’énergie.

Les actions à mener pour un site web éco-responsable

• Audit énergétique :
  Utilisation d’outils pour évaluer l’empreinte carbone du site.
• Optimisation du contenu :
  Réduction de la taille du contenu sans affecter la qualité.
• Hébergement éco-responsable :
  Sélection d’hébergeurs web utilisant des énergies renouvelables.
• Maintenance durable :
  Application de stratégies de maintenance respectueuses de l’environnement.
• Monitoring continu :
  Surveillance régulière de la performance écologique du site.

Quels sont les avantages de l’éco-conception web ?

• Réduction de l’empreinte carbone :
  Un site éco-conçu consomme moins d’énergie, contribuant ainsi à diminuer les émissions de CO2.
• Amélioration de l’expérience utilisateur :
  Des sites plus rapides et plus réactifs offrent une meilleure expérience utilisateur.
• Réduction des coûts :
  L’éco-conception peut diminuer les coûts d’hébergement et de maintenance grâce à une utilisation plus efficace des ressources.
• Image de marque positive :
  Adopter une approche éco-responsable renforce l’image de marque et répond aux attentes des consommateurs soucieux de l’environnement.

Et les inconvénients ?

Malgré ses nombreux avantages, l’éco-conception web présente certains défis :

• Limitations en termes de design et de fonctionnalités :
  Certaines options de design peuvent être restreintes pour économiser de l’énergie.
• Coûts initiaux :
  L’investissement initial en ressources et en formation peut être supérieur.
• Apprentissage :
  Nécessité d’une adaptation aux nouvelles pratiques et outils.

Les outils pour une conception web plus verte

• Analyseurs de Performance :
  Des outils comme GTmetrix, ou Google PageSpeed Insights aident à identifier les aspects d’un site web qui peuvent être optimisés pour réduire sa consommation d’énergie.
• Mesure de l’Empreinte Carbone :
  Des outils comme Website Carbon ou encore Carbon Calculator évaluent l’empreinte carbone d’un site web, offrant un point de départ pour l’amélioration.
• Frameworks et Langages Éco-efficients :
  L’utilisation de frameworks légers et de langages de programmation efficaces contribue à une meilleure performance écologique.
• Hébergement Vert :
  Choisir un hébergeur web qui utilise des énergies renouvelables ou qui compense ses émissions carbone est un autre pas vers l’éco-conception.

L’importance de l’écologie dans le digital

L’adoption de l’éco-conception dans le digital est une étape clé dans la responsabilité sociale des entreprises (RSE). Elle aide non seulement à respecter les réglementations environnementales, mais stimule également l’innovation et renforce la compétitivité.

L’éco-conception web n’est pas seulement une tendance, c’est une nécessité pour un avenir durable. Elle ouvre la voie à des innovations en matière de design et de technologie et souligne l’importance d’intégrer des pratiques écologiques dans tous les aspects du numérique.

Conclusion

Chez Perfekto, nous sommes convaincus que l’éco-conception web est l’avenir de la création de sites internet. En combinant nos compétences en UX/UI design avec une approche éco-responsable, nous aidons nos clients à créer des sites web non seulement esthétiquement attrayants et fonctionnels, mais aussi respectueux de l’environnement. Rejoignez-nous dans cette aventure vers un internet plus vert !

---

En bonus :
Écoconception web : les 115 bonnes pratiques *

En bonus, voici la liste des bonnes pratiques à respecter pour réaliser un site en « éco-conception ». Les contraintes sont nombreuses c’est peu de le dire… Sans tout appliquer à la lettre, ce qui serait impossible, le tout est de rester intelligent et pragmatique et d’essayer d’être responsable dans la conception des sites sans tomber dans l’irréalisable…

La checklist de l’écoconception :

Spécifications

• Ne pas retenir les fonctionnalités non essentielles
• Quantifier précisément le besoin
• Supprimer les fonctionnalités non utilisées
• Privilégier une approche « mobile first »

Conception

• Optimiser le parcours utilisateur
• Valider le parcours utilisateur
• Proposer un traitement asynchrone lorsque c’est possible
• Respecter le principe de navigation rapide dans l’historique
• Éviter les animations Javascript / CSS
• Limiter le recours aux carrousels
• Avoir un titre de page et une metadescription pertinents
• Favoriser un design simple, épuré, adapté au web
• Préférer la pagination au défilement infini
• Préférer la saisie assistée à l’autocomplétion
• N’utilisez que les portions indispensables des bibliothèques JS et CSS
• Mettre en cache les données calculées souvent utilisées
• Éviter le transfert de grandes quantités de données
• Favoriser les pages statiques
• Préférer une PWA à une application mobile native similaire au site web
• Afficher des pages d’erreur statiques
• Limiter le nombre d’appels aux API HTTP
• Favoriser un développement sur-mesure à l’usage d’un CMS
• Réduire le volume de données stockées au strict nécessaire
• Ne se connecter à une base de données que si nécessaire
• Favoriser le « Request collapsing »
• Mettre en place un « Circuit breaker »
• Mettre en place une architecture élastique
• Créer une architecture applicative modulaire
• Utiliser la version la plus récente du langage

Réalisation

• Fournir une alternative textuelle aux contenus multimédias
• Fournir une CSS print
• Favoriser les polices standards
• Ne pas afficher les documents à l’intérieur des pages
• Utiliser le rechargement partiel d’une zone de contenu
• Limiter le nombre de CSS
• Découper les CSS
• Préférer les CSS aux images
• Utiliser les compartiments CSS
• Modifier plusieurs propriétés CSS en 1 seule fois
• Ecrire des sélecteurs CSS efficaces
• Externaliser les CSS et JavaScript
• Valider votre code avec un Linter
• Ne pas faire de modification du DOM lorsqu’on le traverse
• Rendre les éléments du DOM invisibles lors de leur modification
• Ne charger des données ou du code que lorsque c’est indispensable
• Limiter le nombre de requêtes HTTP
• Ne pas redimensionner les images coté navigateur
• Optimiser les images
• Préférer les glyphs aux images
• Utiliser le chargement paresseux
• Réduire au maximum le repaint et le reflow
• Eviter les blocages dus aux traitements javascript trop longs
• Mettre en cache les objets souvent accédés en JavaScript
• Limiter le recours aux canvas
• Utiliser la délégation d’évènements
• Réduire les accès au DOM via JavaScript
• Assurer la compatibilité avec les anciens appareils et logiciels
• Remplacer les boutons officiels de partage des réseaux sociaux
• Économiser la bande passante grâce aux ServiceWorker
• Valider les pages auprès du W3C
• Optimiser la taille des cookies
• Choisir un format de données adapté
• Stocker les données statiques localement
• Eviter d’effectuer des requêtes SQL à l’intérieur d’une boucle
• Optimiser les requêtes aux bases de données
• Choisir les technologies les plus adaptées
• Utiliser certains forks applicatifs orientés « performance »
• Bien choisir son thème et limiter les extensions dans un CMS

Production

• Utiliser un CDN
• Utiliser tous les niveaux de cache du CMS
• Mettre en cache les réponses Ajax
• Mettre les caches entièrement en RAM
• Utiliser un cache HTTP
• Ajouter des entêtes Expires ou Cache-Control
• Combiner les fichiers CSS et JavaScript
• Compresser les fichiers texte : CSS, JS, HTML et SVG
• Minifier les fichiers CSS, JavaScript, HTML et SVG
• Définir une politique d’expiration et suppression des données
• Stocker les données dans le cloud
• Héberger les ressources statiques sur un domaine sans cookie
• Limiter le nombre de domaine servant les ressources
• Privilégier HTTP/2 à HTTP/1
• Favoriser HSTS Preload list aux redirections 301
• Désactiver le DNS lookup d’Apache
• Utiliser un serveur asynchrone
• Réduire au nécessaire les logs des serveurs
• Supprimer tous les warning et toutes les notices
• Apache Vhost : désactiver le AllowOverride
• Mettre en place un sitemap efficient
• Adapter la qualité de service et le niveau de disponibilité
• Utiliser des serveurs virtualisés
• Optimiser l’efficacité énergétique des serveurs
• Installer le minimum requis sur le serveur
• Privilégier une électricité à plus faibles impacts environnementaux
• Choisir un hébergeur éco-responsable
• S’appuyer sur les services managés

Utilisation

• Optimiser et générer les médias avant importation sur un CMS
• Limiter l’utilisation des GIFs animés
• Optimiser les images vectorielles
• Eviter d’utiliser des images matricielles pour l’interface
• N’utiliser que des fichiers double opt-in
• Limiter la taille des emails envoyés
• Limiter les emails lourds et redondants
• Encoder les sons en dehors du CMS
• Adapter les sons aux contextes d’écoute
• Éviter la lecture et le chargement automatique des vidéos et des sons
• Adapter les vidéos aux contextes de visualisation
• Compresser les documents
• Optimiser les PDF
• Adapter les textes au web
• Limiter les outils d’analytics et les données collectées

Support / Maintenance

• Eviter les redirections
• Désactiver les logs binaires
• Avoir une stratégie de fin de vie des contenus
• Mettre en place un plan de fin de vie du site

* Contenu
Cette checklist est un extrait du référentiel publié par Frédéric Bordage / GreenIT.fr chez Eyrolles sous le titre : « écoconception web : les 115 bonnes pratiques, 4ème édition » en mai 2022.
Nous remercions chaleureusement l’ensemble des contributeurs qui ont participé à la mise au point de ce référentiel et le font évoluer depuis plus de 10 ans.

Licence
Licence CC-By-NC-ND
Vous avez l’obligation de transmettre ce document en l’état, sans modification, intégralement, en incluant les informations contenues sur cette page.
Le document « Checklist écoconception web v3 » de GreenIT.fr est publiée par le Collectif conception numérique responsable selon les termes de la licence Creative Commons Attribution – Pas d’Utilisation Commerciale – Pas de Modification 4.0 International.
Fondé(e) sur une œuvre disponible à http://collectif.greenit.fr/
Cette oeuvre, création, site ou texte est sous licence Creative Commons Attribution – Pas d’Utilisation Commerciale – Pas de Modification 4.0 International. Pour accéder à une copie de cette licence, merci de vous rendre à l’adresse suivante http://creativecommons.org/licenses/by-nc-nd/4.0/ ou envoyez un courrier à Creative Commons, 444 Castro Street, Suite 900, Mountain View, California, 94041, USA.

Utilisation
Cette checklist est publiée sous licence Creative Commons BY-NC-ND. Cela signifie que vous pouvez l’utiliser librement pour des utilisations non commerciales, à la condition de maintenir la paternité du contenu, via un lien vers https://collectif.greenit.fr et https://www.ecoconceptionweb.com. Le contenu du référentiel publié chez Eyrolles est protégé par le droit d’auteur (http://www.culture.gouv.fr/culture/infos-pratiques/droits/protection.htm).

Titre du document
Checklist écoconception web
Version 4.0
Auteur principal : Frédéric Bordage, GreenIT.fr