Le secteur numérique émet 4% des gaz à effet de serre mondiaux, devant l’aviation civile (2,5%). La moitié de ces émissions provient des terminaux utilisateurs : smartphones, ordinateurs, tablettes. Les designers font des choix quotidiens qui influencent directement combien d’énergie une interface consomme et combien de temps les appareils restent utilisables avant d’être remplacés.
L’éco-conception numérique n’est pas un sujet de communication responsable. C’est un ensemble de décisions techniques et de design qui réduisent le poids des pages, le nombre de requêtes, la durée de traitement côté client et la consommation de ressources serveur. Ces décisions sont prises lors de la conception, pas après.
Les leviers techniques du design éco-conçu
- Poids des images : les images représentent en moyenne 60 à 70% du poids d’une page web. Utiliser des formats modernes (WebP, AVIF), définir des dimensions adaptées aux breakpoints réels, éviter les images décoratives inutiles. Un fond de hero à 2 Mo chargé sur mobile en 3G consomme de l’énergie sans valeur perçue par l’utilisateur.
- Polices et icônes : chaque police externe est une requête supplémentaire. Limiter les familles de polices à 2, utiliser les sous-ensembles de caractères (subsetting) pour ne charger que les glyphes nécessaires. Préférer les icônes SVG inline aux librairies d’icônes complètes quand seules quelques icônes sont utilisées.
- Animations et effets : les animations CSS sont moins coûteuses que les animations JavaScript. Les effets de parallaxe, les arrière-plans animés et les transitions complexes forcent des rendus continus qui consomment du CPU. Se poser la question de la valeur ajoutée de chaque animation.
- Vidéos autoplay : une vidéo en lecture automatique sur fond de page est l’un des éléments les plus énergivores d’une interface. Si une vidéo est nécessaire, proposer un poster statique avec lecture au clic.
- Design system et réutilisation : un design system bien construit réduit le code dupliqué. Moins de CSS, moins de JavaScript, moins de ressources chargées. L’éco-conception et la maintenabilité technique sont alignées.
Une page web moyenne pesait 2,5 Mo en 2022 selon l’HTTP Archive. Une page éco-conçue vise sous 500 Ko. La différence n’est pas esthétique : c’est un choix de combien de ressources on impose à chaque chargement, multiplié par le nombre de visites.
Mesurer l’impact environnemental d’une interface
Plusieurs outils permettent d’estimer l’empreinte carbone d’une page :
- Website Carbon Calculator (websitecarbon.com) : estime les grammes de CO2 émis par visite à partir du poids de la page et du mix énergétique de l’hébergement. Donne une note et une comparaison avec d’autres sites.
- Ecograder : audit similaire avec des recommandations par catégorie (images, polices, scripts).
- Lighthouse : l’outil de Google mesure les performances (Core Web Vitals), qui sont un proxy fiable de l’efficacité énergétique. Un score de performance élevé implique généralement une consommation plus faible.
- PageSpeed Insights : version en ligne de Lighthouse avec des données réelles d’utilisateurs Chrome.
Ces métriques permettent d’établir un baseline et de mesurer l’impact des décisions d’optimisation. L’intégrer dans les critères d’acceptance d’un projet de design est une façon de rendre l’éco-conception non négociable plutôt que optionnelle.
L’impact sur la durée de vie des appareils
80% de l’empreinte carbone d’un smartphone provient de sa fabrication, pas de son utilisation. Les applications et sites qui nécessitent des appareils récents pour fonctionner correctement accélèrent les cycles de remplacement. L’éco-conception implique aussi de tester sur des appareils de 3 à 5 ans et de s’assurer que les performances restent acceptables.
- Tester les performances sur un appareil Android milieu de gamme de 2021, pas uniquement sur le dernier iPhone
- Éviter les frameworks JavaScript lourds quand une solution plus légère suffit
- Prioriser le rendu côté serveur (SSR) pour les contenus statiques plutôt que le chargement dynamique côté client
Un designer qui conçoit uniquement pour les appareils haut de gamme conçoit pour une minorité et contribue à rendre les appareils plus anciens obsolètes plus rapidement. L’éco-conception et l’accessibilité matérielle convergent sur les mêmes bonnes pratiques.
Intégrer l’éco-conception dans un brief
L’éco-conception se négocie en amont, pas en aval. Des critères concrets à inclure dans un brief ou un cahier des charges :
- Poids de page cible : sous 1 Mo pour une landing page, sous 500 Ko pour une page contenu
- Score Lighthouse performance : minimum 85 sur mobile
- Nombre maximum de requêtes HTTP : définir une limite dès la conception
- Politique d’images : formats, compression, lazy loading obligatoire
- Politique de polices : maximum 2 familles, sous-ensembles obligatoires
Ces critères transforment l’éco-conception en exigences mesurables. La réduction de l’impact environnemental et l’amélioration des performances utilisateur produisent les mêmes optimisations. Ce n’est pas un arbitrage : c’est une convergence.
