Ecoconception web : les 115 bonnes pratiques

Présentation de l’écoconception web

• Pourquoi réduire les impacts environnementaux du Web ?
• L’écoconception à la rescousse

Présentation du livre

• Des bonnes pratiques consensuelles, issues du terrain
• Les auteurs, contributeurs et soutiens du référentiel
• Comment utiliser ce référentiel ?
• Outils complémentaires

Spécification

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

Conception
FRONT

• 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é et adapté au Web
• Préférer la pagination au défilement infini
• Préférer la saisie assistée à l’autocomplétion
• N’utiliser 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 depuis le SGBD
• Favoriser les pages statiques
• Préférer une PWA à une application mobile native similaire au site web

BACK

• 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[…]
• 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 et de la plate-forme

Réalisation
FRONT

• Fournir une transcription 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
• Éviter d’utiliser des images matricielles pour l’interface
• Utiliser les compartiments CSS
• Modifier plusieurs propriétés CSS en une seule fois
• Écrire des sélecteurs CSS efficaces
• Externaliser les CSS et JavaScript
• Valider son code avec un linter
• Limiter le nombre de modifications 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
• Dimensionner correctement les images côté navigateur
• Optimiser les images
• Préférer les glyphes aux images
• Utiliser le chargement paresseux
• Réduire au maximum le repaint et le reflow
• Éviter les blocages dus aux traitements JavaScript trop longs
• Mettre en cache les objets souvent accédés en JavaScript

FRONT

• 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 Service Workers
• Valider les pages auprès du W3C

BACK

• Optimiser la taille des cookies
• Choisir un format de données adapté pour la base de données
• Stocker les données statiques localement
• Regrouper les requêtes à la base de données quand c’est possible
• 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
OPTIMISATIONS

• Utiliser un CDN
• Utiliser tous les niveaux de cache du serveur d’application / CMS
• Mettre en cache les réponses Ajax
• Mettre les caches entièrement en RAM
• Utiliser un cache HTTP
• Ajouter des en-têtes Expires ou Cache-Control
• Compresser les fichiers texte : CSS, JS, HTML et SVG
• Minifier les fichiers texte : CSS, JS, HTML et SVG
• Combiner les fichiers CSS et JavaScript
• Définir une politique d’expiration et de suppression des données
• Stocker les ressources et données dans le cloud
• Héberger les ressources statiques sur un domaine sans cookie
• Limiter le nombre de domaines servant les ressources
• Privilégier HTTP/2 à HTTP/1
• Favoriser HSTS Preload List aux redirections 301
• Désactiver le DNS Lookup du serveur HTTP
• Utiliser un serveur asynchrone
• Réduire au strict nécessaire les logs des serveurs
• Désactiver le AllowOverride
• Supprimer tous les warnings et toutes les notices
• Mettre en place un sitemap efficient
• Adapter la qualité de service et le niveau de disponibilité

HÉBERGEMENT

• 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 écoresponsable
• S’appuyer sur les services managés

Utilisation
IMAGES

• Optimiser et générer les médias avant importation dans un CMS
• Limiter l’utilisation des GIF animés
• Optimiser les images vectorielles

E-MAIL

• Utiliser uniquement des e-mails validés par double consentement
• Limiter la taille des e-mails envoyés
• Limiter les e-mails lourds et redondants

MULTIMÉDIA

• 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

AUTRES

• Adapter les textes au Web
• Limiter les outils d’analyse et les données collectées

Maintenance et fin de vie
SUPPORT

• Éviter les redirections
• Désactiver les logs binaires

FIN DE VIE

• Avoir une stratégie de fin de vie des contenus
• Mettre en place un plan de fin de vie du site 

Editeur : Eyrolles

Auteur(s) : Frédéric Bordage

Publication : 26 juin 2025

Edition : 5^e édition

Intérieur : Noir & blanc

Support(s) : Bundle Livre papier et eBook [ePub + PDF], eBook [ePub + PDF]

Contenu(s) : ePub, PDF

Protection(s) : Marquage social (ePub), Marquage social (PDF)

Taille(s) : 3,63 Mo (ePub), 4,82 Mo (PDF)

Langue(s) : Français

Code(s) CLIL : 3208

EAN13 eBook [ePub + PDF] : 9782416820892

EAN13 (papier) : 9782416019678