Applications et sites
E-commerce & SaaS
Intelligence artificielle
Expertises techniques
Éco-conception Web
Chaque octet a un impact sur notre environnement.
Retrouvez ici les bonnes pratiques du CNUMR ainsi que nos recommandations pour concevoir des sites Web plus éco-responsables.
Les bonnes pratiques
#1
Éliminer les fonctionnalités non essentielles
Spécification
#2
Quantifier précisément le besoin
Spécification
#3
Préférer la saisie assistée à l'autocomplétion
Spécification
#4
S'assurer que les parcours utilisateurs permettent de réaliser leur action prévue
Spécification
#5
Éliminer les fonctionnalités non utilisées
Spécification
#6
Optimiser le parcours utilisateur
Conception
#7
Favoriser un design simple, épuré, adapté au web
Conception
#8
Privilégier une approche "mobile first", à défaut un chargement adaptatif
Conception
#9
Respecter le principe de navigation rapide dans l’historique
Conception
#10
Proposer un traitement asynchrone lorsque c'est possible
Conception
#11
Favoriser un développement sur-mesure à l'usage d'un CMS
Conception
#12
Favoriser les pages statiques
Conception
#13
Créer une architecture applicative modulaire
Conception
#14
Éviter les animations JavaScript / CSS
Conception
#15
N'utilisez que les portions indispensables des bibliothèques JavaScript et frameworks CSS
Conception
#16
Mettre en cache les données calculées souvent utilisées
Conception
#17
Ne se connecter à une base de données que si nécessaire
Conception
#18
Éviter le transfert d'une grande quantité de données pour réaliser un traitement
Conception
#19
Afficher des pages d'erreurs statiques
Conception
#20
N'utiliser que des fichiers double opt-in
Conception
#21
Réduire le volume de données stockées au strict nécessaire
Conception
#22
Avoir un titre de page et une metadescription pertinents avec le contenu de la page
Conception
#23
Utiliser la version la plus récente du langage
Conception
#24
Préférer une PWA à une application mobile native similaire au site web
Conception
#25
Mettre en place une architecture élastique
Conception
#26
Limiter le nombre d'appels aux API HTTP
Conception
#27
Limiter le recours aux carrousels
Conception
#28
Mettre en place un "Circuit breaker"
Conception
#29
Favoriser le "Request collapsing"
Conception
#30
Préférer la pagination au défilement infini
Conception
#31
Limiter le nombre de requêtes HTTP
Développement
#32
Stocker les données statiques localement
Développement
#33
Choisir les technologies les plus adaptées
Développement
#34
Utiliser certains forks applicatifs orientés "performance"
Développement
#35
Choisir un format de données adapté
Développement
#36
Remplacer les boutons officiels de partage des réseaux sociaux
Développement
#37
Découper les CSS
Développement
#38
Limiter le nombre de CSS
Développement
#39
Préférer les CSS aux images
Développement
#40
Écrire des sélecteurs CSS efficaces
Développement
#41
Grouper les déclarations CSS similaires
Développement
#42
Utiliser les notations CSS abrégées
Développement
#43
Fournir une CSS print
Développement
#44
Favoriser les polices standards
Développement
#45
Préférer les glyphes aux images
Développement
#46
Valider les pages auprès du W3C
Développement
#47
Externaliser les CSS et JavaScript
Développement
#48
Ne pas redimensionner les images coté navigateur
Développement
#49
Utiliser le chargement paresseux
Développement
#50
Utiliser le rechargement partiel d'une zone de contenu
Développement
#51
Ne pas faire de modification du DOM lorsqu’on le traverse
Développement
#52
Rendre les éléments du DOM invisibles lors de leur modification
Développement
#53
Réduire au maximum le repaint (appearence) et le reflow (layout)
Développement
#54
Utiliser la délégation d'évènements
Développement
#55
Modifier plusieurs propriétés CSS en 1 seule fois
Développement
#56
Valider votre code avec un Linter
Développement
#57
Mettre en cache les objets souvent accédés en JavaScript
Développement
#58
Réduire les accès au DOM via JavaScript
Développement
#59
Éviter d'effectuer des requêtes SQL à l’intérieur d’une boucle
Développement
#60
Optimiser les requêtes aux bases de données
Développement
#61
Compresser les fichiers CSS, JavaScript, HTML et SVG
Développement
#62
Optimiser les images
Développement
#63
Optimiser la taille des cookies
Développement
#64
Utiliser les compartiments CSS
Développement
#65
Fournir une alternative textuelle aux contenus multimédias
Développement
#66
Économiser de la bande passante grace à un ServiceWorker
Développement
#67
Assurer la compatibilité avec les plus anciens appareils et logiciels du parc
Développement
#68
Limiter le recours aux canvas
Développement
#69
Ne charger des données/du code que lorsqu'elles sont/il est nécessaire
Développement
#70
Éviter les temps de blocages par des traitements javascript trop longs
Développement
#71
Bien choisir son thème et limiter le nombre d'extensions dans un CMS
Développement
#72
Sécuriser l'accès à l'administration
Développement
#73
Ne pas afficher les documents à l'intérieur des pages
Développement
#74
Limiter le nombre de domaines servant les ressources
Production
#75
Utiliser tous les niveaux de cache du CMS
Production
#76
Supprimer tous les warnings et toutes les notices
Production
#77
Minifier les fichiers CSS, JavaScript, HTML et SVG
Production
#78
Combiner les fichiers CSS et JavaScript
Production
#79
Favoriser HSTS Preload list aux redirections 301
Production
#80
Choisir un hébergeur "éco-responsable"
Production
#81
Privilégier un fournisseur d'électricité écoresponsable
Production
#82
Adapter la qualité de service et le niveau de disponibilité
Production
#83
Utiliser des serveurs virtualisés
Production
#84
Optimiser l'efficacité énergétique des serveurs
Production
#85
Installer le minimum requis sur le serveur
Production
#86
Mettre les caches entièrement en RAM (opcode et kvs)
Production
#87
Stocker les données dans le cloud
Production
#88
Héberger les ressources (CSS/JS) sur un domaine sans cookie
Production
#89
Utiliser un serveur asynchrone
Production
#90
Utiliser un CDN
Production
#91
Utiliser un cache HTTP
Production
#92
Ajouter des entêtes Expires ou Cache-Control
Production
#93
Mettre en cache les réponses AJAX
Production
#94
Réduire au nécessaire les logs des serveurs
Production
#95
Désactiver le DNS lookup d’Apache
Production
#96
Apache Vhost : désactiver le AllowOverride
Production
#97
Privilégier HTTP/2 à HTTP/1
Production
#98
Mettre en place un sitemap efficient
Production
#99
Mettre en place une politique d'expiration et suppression des données
Production
#100
S’appuyer sur les services managés
Production
#101
Eviter d'utiliser des images matricielles pour l'interface
Utilisation
#102
Optimiser les images vectorielles
Utilisation
#103
Optimiser et générer les médias avant importation sur un CMS
Utilisation
#104
Encoder les sons en dehors du CMS
Utilisation
#105
Compresser les documents
Utilisation
#106
Optimiser les PDF
Utilisation
#107
Limiter les e-mails lourds et redondants
Utilisation
#108
Limiter la taille des e-mails envoyés
Utilisation
#109
Adapter les sons aux contextes d'écoute
Utilisation
#110
Adapter les textes au web
Utilisation
#111
Adapter les vidéos aux contextes de visualisation
Utilisation
#112
Limiter les outils d'analytics et les données collectées
Utilisation
#113
Limiter l'utilisation des GIFs animés
Utilisation
#114
Éviter la lecture et le chargement automatique des vidéos et des sons
Utilisation
#115
Entretenir son site régulièrement
Utilisation
#116
Éviter les redirections
Maintenance
#117
Désactiver les logs binaires
Maintenance
#118
Mettre en place un plan de fin de vie du site
Fin de vie
#119
Avoir une stratégie de fin de vie des contenus
Fin de vie
Le "Référentiel d'écoconception web (REW)" est publié par GreenIT.fr dans le cadre des travaux du Collectif conception numérique responsable selon les termes de la licence Creative Commons Attribution.