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:

1. “écoconception web : les 100 bonnes pratiques” en octobre 2012
2. “écoconception web : les 115 bonnes pratiques, 2ème édition” en septembre 2015
3. “écoconception web : les 115 bonnes pratiques, 3ème édition” en avril 2019.
4. “é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.

• :infinity: Liste de toutes les discussions
• :heavy_plus_sign: Liste des discussions d'ajout de BP
• :memo: Liste des discussions de modification de BP
• :heavy_multiplication_x: 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 Service Worker
• 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