Les 115 bonnes pratiques
Le projet
Le contenu du référentiel d'écoconception a été publié par Frédéric Bordage / GreenIT.fr chez Eyrolles sous le titre:
- “écoconception web : les 100 bonnes pratiques” en octobre 2012
- “écoconception web : les 115 bonnes pratiques, 2ème édition” en septembre 2015
- “écoconception web : les 115 bonnes pratiques, 3ème édition” en avril 2019.
- “écoconception web : les 115 bonnes pratiques, 4ème édition” en mai 2022
Nous remercions chaleureusement l'ensemble des contributrices et contributeurs qui ont participé à la mise au point de ce référentiel et le font évoluer.
Les besoins
Étant donné les évolutions continues du web, ce référentiel a besoin de régulièrement être mis à jour. Toute proposition ou idée d'amélioration, de modification ou de suppression est bienvenue.
Comment contribuer ?
N'hésitez pas à lire le guide des contributeurs.
Raccourci vers les discussions :
Pour simplifier vos recherches, n'oubliez pas d’utiliser les filtres disponibles sur la page de discussions.
- ♾️ Liste de toutes les discussions
- ➕ Liste des discussions d'ajout de BP
- 📝 Liste des discussions de modification de BP
- ✖️ Liste des discussions de suppression de BP
La liste des Bonnes Pratiques
- Éliminer les fonctionnalités non essentielles
- Quantifier précisément le besoin
- Optimiser le parcours utilisateur
- Préférer la saisie assistée à l'autocomplétion
- Favoriser un design simple, épuré, adapté au web
- Privilégier une approche "mobile first", à défaut un chargement adaptatif
- Respecter le principe de navigation rapide dans l’historique
- Proposer un traitement asynchrone lorsque c'est possible
- Limiter le nombre de requêtes HTTP
- Stocker les données statiques localement
- Favoriser un développement sur-mesure à l'usage d'un CMS
- Favoriser les pages statiques
- Créer une architecture applicative modulaire
- Choisir les technologies les plus adaptées
- Utiliser certains forks applicatifs orientés "performance"
- Choisir un format de données adapté
- Limiter le nombre de domaine servant les ressources
- Remplacer les boutons officiels de partage des réseaux sociaux
- Découper les CSS
- Limiter le nombre de CSS
- Préférer les CSS aux images
- Écrire des sélecteurs CSS efficaces
- Grouper les déclarations CSS similaires
- Utiliser les notations CSS abrégées
- Fournir une CSS print
- Favoriser les polices standards
- Préférer les glyphs aux images
- Valider les pages auprès du W3C
- Externaliser les CSS et JavaScript
- Ne pas redimensionner les images coté navigateur
- Éviter d'utiliser des images matricielles pour l'interface
- Optimiser les images vectorielles
- Utiliser le chargement paresseux
- Utiliser le rechargement partiel d'une zone de contenu
- Éviter les animations JavaScript / CSS
- N'utilisez que les portions indispensables des librairies JavaScript et frameworks CSS
- Ne pas faire de modification du DOM lorsqu’on le traverse
- Rendre les éléments du DOM invisibles lors de leur modification
- Réduire au maximum le repaint (appearence) et le reflow (layout)
- Utiliser la délégation d'évènements
- Modifier plusieurs propriétés CSS en 1 seule fois
- Valider votre code avec un Linter
- Mettre en cache les objets souvent accédés en JavaScript
- Réduire les accès au DOM via JavaScript
- Utiliser tous les niveaux de cache du CMS
- Optimiser et générer les médias avant importation sur un CMS
- Encoder les sons en dehors du CMS
- Mettre en cache les données calculées souvent utilisées
- Supprimer tous les warning et toutes les notices
- Éviter d'effectuer des requêtes SQL à l’intérieur d’une boucle
- Ne se connecter à une base de données que si nécessaire
- Optimiser les requêtes aux bases de données
- Éviter le transfert d'une grande quantité de données pour réaliser un traitement
- Minifier les fichiers CSS, JavaScript, HTML et SVG
- Compresser les fichiers CSS, JavaScript, HTML et SVG
- Combiner les fichiers CSS et JavaScript
- Optimiser les images
- Optimiser la taille des cookies
- Favoriser HSTS Preload list aux redirections 301
- Mettre en place un plan de fin de vie du site
- Choisir un hébergeur "éco-responsable"
- Privilégier un fournisseur d'électricité écoresponsable
- 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
- Mettre les caches entièrement en RAM (opcode et kvs)
- Stocker les données dans le cloud
- Héberger les ressources (CSS/JS) sur un domaine sans cookie
- Éviter les redirections
- Afficher des pages d'erreur statiques
- Utiliser un serveur asynchrone
- Utiliser un CDN
- Utiliser un cache HTTP
- Ajouter des entêtes Expires ou Cache-Control
- Mettre en cache les réponses Ajax
- Réduire au nécessaire les logs des serveurs
- Désactiver le DNS lookup d’Apache
- Apache Vhost : désactiver le AllowOverride
- Désactiver les logs binaires
- Compresser les documents
- Optimiser les PDF
- Limiter les e-mails lourds et redondants
- N'utiliser que des fichiers double opt-in
- Limiter la taille des e-mails envoyés
- Adapter les sons aux contextes d'écoute
- Adapter les textes au web
- Adapter les vidéos aux contextes de visualisation
- Limiter les outils d'analytics et les données collectées
- Limiter l'utilisation des GIFs animés
- Éviter la lecture et le chargement automatique des vidéos et des sons
- Utiliser les compartiments CSS
- Fournir une alternative textuelle aux contenus multimédias
- Privilégier HTTP/2 à HTTP/1
- Économiser de la bande passante grace à un ServiceWorker
- Mettre en place un sitemap efficient
- Assurer la compatibilité avec les plus anciens appareils et logiciels du parc
- Réduire le volume de données stockées au strict nécessaire
- Mettre en place une politique d'expiration et suppression des données
- Limiter le recours aux canvas
- S'assurer que les parcours utilisateurs permettent de réaliser leur action prévue
- Avoir un titre de page et une metadescription pertinents avec le contenu de la page
- Utiliser la version la plus récente du langage
- Ne charger des données/du code que lorsqu'elles sont/il est nécessaire
- Éliminer les fonctionnalités non utilisées
- Préférer une PWA à une application mobile native similaire au site web
- Éviter les temps de blocages par des traitements JavaScript trop longs
- Mettre en place une architecture élastique
- Limiter le nombre d'appels aux API HTTP
- Limiter le recours aux carrousels
- Avoir une stratégie de fin de vie des contenus
- Mettre en place un "Circuit breaker"
- Favoriser le "Request collapsing"
- S’appuyer sur les services managés
- Préférer la pagination au défilement infini
- Entretenir son site régulièrement
- Limiter le nombre d'extensions dans un CMS
- Sécuriser l'accès à l'administration
- Ne pas afficher les documents à l'intérieur des pages
Licence
Les sources et contenus de ce projet sont protégés