Écoconception Drupal : intégrer les bonnes pratiques du RGESN à notre Starter

Chez nous, chaque projet Drupal démarre sur une base commune : notre Starter Drupal.

Ce socle technique, enrichi au fil de plus de 25 ans de projets web, n’est pas un simple kit de démarrage. C’est une architecture prête à l'emploi, conçue pour répondre immédiatement aux besoins les plus fréquents : composants éditoriaux, sécurité, accessibilité, performance, maintenabilité… et écoconception !

L’idée est simple : ne pas repartir de zéro à chaque projet, mais capitaliser sur un socle robuste, éprouvé, et continuellement amélioré.

Aujourd’hui, une part importante de notre travail consiste à faire évoluer ce Starter pour intégrer, dès l’origine, un maximum de bonnes pratiques environnementales.

L’écoconception numérique consiste à réduire l’impact environnemental d’un service digital sur l’ensemble de son cycle de vie : conception, développement, hébergement, usage et maintenance.

Dans notre cas, cela signifie notamment :

• réduire les données téléchargées inutilement ;
• limiter les traitements lourds côté navigateur ;
• éviter les composants inutiles ;
• optimiser les médias ;
• concevoir des parcours utilisateurs optimisés pour limiter la navigation.

Pour cela, nous nous appuyons sur le RGESN (Référentiel Général d’Écoconception des Services Numériques). Ce référentiel français définit une série de critères concrets pour concevoir des services numériques plus sobres.

Tous les critères du RGESN ne peuvent pas être industrialisés.

Une partie peut être directement intégrée dans notre Starter :

• formats médias optimisés ;
• chargement progressif ;
• bonnes pratiques front-end ;
• limitation des scripts inutiles ;
• paramétrages de compression.

Mais une autre partie est inhérente à la nature du projet.

Par exemple, un site institutionnel simple n’a pas les mêmes contraintes qu’un site e-commerce ou qu'une plateforme vidéos qui aura mécaniquement un impact plus élevé. 

De plus, certains critères relèvent du périmètre de la prestation commandée : le donneur d'ordre a-t-il jugé bon d'inclure des prestations d'UX design indispensables pour définir les besoins utilisateurs et concevoir des parcours optimisés ? Quel est l'hébergeur choisi ? Le projet intègre-t-il de l'IA ? Autant de questions qui vont influencer les critères du RGESN.

En pratique, nous considérons aujourd’hui :

• 60 % des critères RGESN sont couverts par défaut dans notre Starter ;
• 30 % des critères sont à arbitrer au cas par cas, selon la typologie et le périmètre du projet ;
• 10 % des critères demeurent difficiles à mettre en place à ce jour.

L’éco-conception n’est donc pas un état figé : c’est un travail continu, qui s'évalue au cas par cas et qui implique fortement le donneur d'ordre.

Voici les derniers efforts d'industrialisation que nous avons mis en place dans notre Starter pour en faire profiter les projets web de nos clients.

Charger uniquement ce qui est réellement utilisé (critère RGESN 6.5)

L’un des réflexes en développement web consiste à charger tous les composants dès l’ouverture d’une page, même lorsque l’utilisateur n’en utilisera qu’une partie. Techniquement, c’est confortable. Écologiquement, beaucoup moins.

Le critère 6.5 du RGESN recommande de ne charger que les ressources strictement nécessaires au moment où elles deviennent utiles.

Nous appliquions déjà ce principe sur les médias. Avec le lazy loading, les images ne se chargent qu’au moment où elles entrent réellement dans la zone visible de l’écran.

Aujourd’hui, nous allons plus loin avec le préchargement intelligent des vidéos.

Jusqu’ici, une vidéo embarquée pouvait entraîner un téléchargement immédiat de ressources importantes. Nous passons désormais à une logique plus sobre : l’utilisateur voit uniquement une miniature statique, la vidéo réelle ne se charge qu’au clic (preloading).

Autrement dit : si la vidéo n’est jamais regardée, elle ne consomme pas de ressource inutile. C’est une optimisation simple… mais extrêmement efficace sur les pages riches en médias !

Informer l’utilisateur quand une fonctionnalité consomme beaucoup (critère RGESN 4.12)

L’éco-conception ne concerne pas seulement le code. Elle concerne aussi la transparence vis-à-vis des usages. À ce titre, le RGESN recommande de signaler les fonctionnalités ayant un impact environnemental important dans le critère 4.12. Nous avons donc ajouté dans notre Starter Drupal un message contextuel sous les médias audio et vidéo.

Par défaut, le message est le suivant : "Cette fonctionnalité fait partie des usages identifiés comme ayant un impact environnemental significatif. Nous vous invitons à l’utiliser de manière responsable."

Ce message demeure désactivable et modifiable en back-office, à la discrétion de nos clients. En effet, l’objectif n’est pas de culpabiliser. Il s’agit simplement de rendre visible ce qui reste souvent invisible en accord avec la politique d'éco-conception des administrateurs du site.

Optimiser les fichiers uploadés en back-office (critère RGESN 5.7)

Un site peut être techniquement très bien conçu… puis perdre toute sa sobriété dès que les contenus sont ajoutés.

C’est particulièrement vrai pour le chargement de documents lourds (PDF, .doc, etc.) ainsi que les images et vidéos non compressées, utilisées sans modération.

C’est un sujet central car de nombreux critères du RGESN dépendent en réalité de la contribution et donc de la capacité des administrateurs du site à s'astreindre au respect de plusieurs bonnes pratiques.

Pour répondre à cette contrainte, nous avons mis en place un atelier de sensibilisation. Cependant, une fois le site web livré, nous n'avons plus réellement de contrôle sur la gestion du site. D'autant que les contributeurs sont parfois nombreux, les équipes tournent et les informations se perdent.

Ainsi, dans un souci d'effort pour respecter le critère 5.7 du RGESN qui implique d'utiliser un fichier de format adapté au contenu et au contexte d'utilisation, nous avons décidé d'ajouter un message de rappel directement dans l’interface d’administration, lors de l’ajout de fichiers dans le back-office Drupal. 

Le message rappelle les bonnes pratiques de contribution de documents : 

• compresser avant upload ;
• éviter les doublons ;
• choisir le bon format ;
• privilégier le texte quand c’est possible.

Compression d’image : passage du WebP à AVIF (critère RGESN 5.2)

Le poids des images a un impact direct et significatif sur l’empreinte environnementale d’un site web. Réduire le nombre de ressources et optimiser leur taille est donc un levier essentiel d’éco-conception.

C’est précisément l’objectif du critère 5.2 du RGESN (“Les médias sont-ils optimisés en termes de poids et de format ?”), qui encourage l’usage de formats modernes offrant le meilleur compromis entre qualité visuelle et volume de données transférées.

Pendant longtemps, notre standard était le format WebP. Déjà très performant, il nous a permis de réduire significativement le poids des pages.
Aujourd’hui, nous faisons évoluer notre starter Drupal vers le format AVIF, plus avancé sur plusieurs points clés.

Pourquoi AVIF est plus performant que WebP ?

AVIF repose sur un codec plus récent et plus efficace, ce qui se traduit concrètement par :

• Une compression nettement supérieure : À qualité équivalente, AVIF produit en moyenne des fichiers 20 à 50 % plus légers que WebP (et jusqu’à 50 % de moins que JPEG).
• Une qualité visuelle mieux préservée : AVIF conserve davantage de détails, notamment sur les dégradés complexes, les textures fines et les zones à fort contraste. Cela permet de réduire le poids sans dégrader l’expérience utilisateur.

Résultat : des pages plus légères, plus rapides, et un impact environnemental réduit, sans compromis sur la qualité.

Le format SVG : déjà léger… mais encore optimisable !

Chez nous, le format SVG fait déjà partie des bonnes pratiques bien ancrées. Et pour cause : pour les pictogrammes, les logos ou certains motifs graphiques, il est difficile de faire plus efficace.
Contrairement aux formats matriciels (JPEG, PNG), un SVG est vectoriel : il ne stocke pas des pixels, mais des instructions de dessin. Résultat ? Des fichiers souvent très légers, parfaitement nets sur tous les écrans, même en haute résolution.

Mais en creusant un peu, on s’est rendu compte d’une chose : un SVG “léger” ne veut pas forcément dire “optimisé”. En réalité, la plupart des SVG exportés depuis des outils de design (Figma, Illustrator…) embarquent tout un “bruit” inutile :

• des métadonnées invisibles,
• des groupes ou calques vides,
• des attributs redondants,
• parfois même des éléments non affichés.

Bref, du code en trop… qui alourdit inutilement les pages.

Notre réponse : automatiser le nettoyage.

Plutôt que de compter sur des optimisations manuelles qui reposent sur le contributeur (fastidieuses et rarement systématiques), nous avons choisi d’industrialiser le processus. Nous avons mis en place une étape automatique d’optimisation avec SVGO directement dans notre pipeline front (Webpack intégré à Drupal).

Concrètement, à chaque ajout de SVG :

• le fichier est nettoyé (suppression des éléments inutiles),
• le code est simplifié et compressé,
• sans jamais altérer le rendu visuel.

Pourquoi c’est important ?

Ce travail peut sembler “invisible”, mais il s’inscrit pleinement dans une démarche d’éco-conception :

• moins de données transférées, même sur des fichiers déjà petits ;
• moins de requêtes et de poids cumulés sur des interfaces riches en pictogrammes ;
• et une qualité constante, sans dépendre des bonnes pratiques individuelles.

Ce que nous faisons évoluer aujourd’hui dans notre Starter Drupal traduit une conviction forte : l’écoconception ne peut pas reposer uniquement sur des intentions ou des bonnes volontés.

Elle doit être structurée, outillée et intégrée au cœur même du projet.

C’est tout le sens de notre démarche : industrialiser un maximum de critères du RGESN pour qu’ils soient respectés par défaut, sans dépendre systématiquement des choix individuels.

Concrètement, cela passe par des optimisations techniques intégrées au socle (formats d’images, chargement conditionnel, compression automatique) ainsi que des mécanismes qui limitent les erreurs et oublis côté contribution.

Mais nous restons lucides : tout ne peut pas être automatisé. C’est pourquoi nous avons aussi à cœur d'engager et accompagner la montée en compétences de nos clients avec des ateliers de sensibilisation et des messages pédagogiques directement dans le back-office.

Car nous en sommes conscients : un site éco-conçu ne dépend pas uniquement de sa technique. Il dépend aussi de la manière dont il est utilisé, enrichi et maintenu dans le temps. En ce sens, l’écoconception est moins un état qu’un processus collectif, qui implique autant les équipes projet que les contributeurs.

Et c’est précisément là que nous souhaitons nous positionner :
non seulement comme prestataire de développement, mais comme partenaire engagé, capable d’outiller, de simplifier… et de faire progresser durablement les pratiques.

Nous accompagnons les organisations qui veulent concilier performance, accessibilité, robustesse et sobriété numérique.

Et surtout, sans opposer exigences métier et exigences environnementales. Parlons-en !