AccueilClientsExpertisesBlogOpen SourceContact

É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.

Éco-conception Web

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.

Plus d'informations sur collectif.greenit.fr et ecoconceptionweb.com.
18 avenue Parmentier
75011 Paris
+33 1 43 57 39 11
hello@premieroctet.com

Suivez nos aventures

GitHub
X (Twitter)
Flux RSS

Naviguez à vue