Déclaration d'écoconception

Pourquoi cette page

Un site web consomme de l'énergie à chaque visite : celle du serveur, celle du
réseau, et surtout celle de l'appareil qui l'affiche. La plus grande partie de
cette dépense se décide à la conception, dans ce qu'on choisit de ne pas
charger.

Cette déclaration expose les choix faits sur ce site, les mesures relevées et
les points qui restent à corriger. Elle est écrite dans le même esprit que la
déclaration d'accessibilité : ce qui n'est pas
mesuré n'est pas affirmé, et ce qui est mauvais est écrit avec le chiffre.

Référentiels

La démarche s'appuie sur deux références publiques :

• le GR491, guide de référence de conception responsable de services
  numériques publié par l'Institut du numérique responsable, qui organise la
  matière en trois piliers ;
• le référentiel général d'écoconception de services numériques publié en
  France, dont les critères techniques recoupent largement les précédents.

Aucune certification n'a été demandée et aucun label n'est revendiqué. Les
mesures ci-dessous sont les miennes, obtenues avec les outils décrits, et
reproductibles.

Pilier « People »

Un site sobre qui exclut une partie de son public n'est pas responsable, il est
seulement léger. Ce site vise le niveau AA des WCAG 2.2, vérifié page par page,
et l'état exact de cette conformité est publié dans la
déclaration d'accessibilité.

S'y ajoutent trois choix qui relèvent du même pilier :

• aucun mur de consentement, puisqu'il n'y a aucun traceur à faire
  accepter ;
• aucun procédé de captation : pas de fenêtre surgissante, pas de compte à
  rebours artificiel, pas de bouton de refus caché ;
• un contenu qui répond à la question posée, plutôt qu'une page longue
  conçue pour retenir.

Pilier « Planet »

Ce qui a été fait

Architecture. Le contenu vit dans des fichiers texte, sans base de données :
une visite ne déclenche aucune requête de base. Une seule feuille de styles et
un seul script, tous deux compilés et empreintés, que le navigateur garde en
cache d'une page à l'autre et ne redemande qu'en cas de changement réel.

Poids envoyé. Aucun traceur, aucune régie publicitaire, aucun bouton de
réseau social : ce sont les trois premières sources de poids inutile sur un site
vitrine. Aucun cadre d'interface lourd non plus, l'interactivité reposant sur
Alpine, quelques kilo-octets, plutôt que sur une bibliothèque de plusieurs
centaines. Les polices sont auto-hébergées, en une seule famille variable, soit
un fichier au lieu de quatre graisses et aucun appel à un service tiers. Les
images sont en AVIF, avec leurs dimensions déclarées dans le balisage et un
chargement différé sous la ligne de flottaison. Les icônes sont des SVG
intégrés au balisage, sans police d'icônes ni requête supplémentaire.

Sobriété du DOM. Le nombre d'éléments d'une page est l'un des trois
facteurs de son impact, et le plus souvent le plus négligé. Les pages de ce
site tiennent entre 182 et 437 éléments, là où un site vitrine courant en
compte plusieurs milliers. Aucune surcouche de conteneurs : le balisage a été
écrit à la main, pas généré par un constructeur de pages.

Mouvement. Une seule vidéo sur tout le site, en fond du hero de l'accueil,
et elle ne part jamais d'elle-même : la page s'ouvre sur une image fixe, et la
vidéo n'est demandée que si le visiteur choisit l'ambiance de nuit. Elle est
muette, sa piste audio ayant été retirée du fichier, et servie en deux
définitions, la plus légère allant aux petits écrans. Elle se met en pause dès
que le hero sort du champ de vision, et rien n'est téléchargé du tout
lorsque le système signale une préférence pour le mouvement réduit, un mode
d'économie de données ou une connexion lente. Les autres animations sont
courtes, déclenchées à l'arrivée sur une section, et supprimées elles aussi en
mouvement réduit.

Mesures

Relevés sur Chromium, fenêtre de 1440 pixels, cache vide, en additionnant
toutes les ressources chargées jusqu'à la fin du chargement. Deux méthodes
indépendantes ont été confrontées, l'interface de mesure du navigateur et la
somme des corps de réponse ; elles concordent à moins de 1 % près. Mesures du
30 juillet 2026, sans compression de transport : c'est le pire cas, le
chiffre réel chez le visiteur est plus bas.

Les pages « services », « projets » et « à propos » sont en cours de
réécriture et réduites à leur ossature : leurs trois chiffres décrivent cet
état provisoire, pas la page finale. Ils remonteront quand le contenu y
reviendra, et cette ligne disparaîtra le jour où ce sera fait.

Trois lectures s'imposent.

Les pages sans photographie tiennent en cinq requêtes et environ 240
kilo-octets, dont 138 pour la police et le script, que le navigateur garde
ensuite en cache : la deuxième page visitée ne coûte plus que son balisage. Une
fois compressés, la feuille de styles descend à 12 kilo-octets et le script
à 25.

L'accueil pesait six mégaoctets ; il en pèse un demi. Ses deux images de
fond partaient en pleine résolution, 5 424 pixels de large, soit 3 166 Ko pour
la vue de jour et 2 675 Ko pour celle de nuit. Elles sont désormais découpées
en cinq variantes, servies selon la largeur de l'écran et sa densité : la vue
de jour pèse 129 Ko sur une fenêtre de 1 440 pixels, et de 61 à 94 Ko sur un
téléphone selon la finesse de sa dalle. Les deux images de fond et la police
représentent encore un peu plus de la moitié de la page ; le reste est le
balisage, la feuille de styles et le script.

La vidéo de fond ne compte pas dans ce demi-mégaoctet, et c'est le point.
Elle n'est demandée qu'à la bascule vers l'ambiance de nuit : 1 377 Ko sur un
écran large, 473 Ko sur un téléphone, au lieu des 2 363 Ko du fichier d'origine
une fois sa piste audio retirée et son encodage resserré. Un visiteur qui ne
touche pas au sélecteur ne la télécharge jamais.

La page de contact porte 543 Ko de bibliothèque de formulaire. Elle est la
seule à la charger, parce qu'elle est la seule à en avoir besoin : aucune autre
page du site ne paie ce coût.

Le nombre d'éléments du DOM des conditions générales de vente, 775, est le plus
élevé du site. Il s'explique par la longueur du document, trente-six articles,
et non par un balisage inutile.

Ce qui pèse encore

• Une image de 2 116 Ko encore au format PNG, plus bas sur l'accueil, alors
  que l'AVIF diviserait son poids par plus de dix. Son chargement est différé,
  donc elle ne pèse pas sur l'ouverture de la page, mais elle arrive dès que le
  visiteur descend.
• La vidéo de fond du hero, 1 377 Ko sur un écran large. Elle n'est
  téléchargée qu'à la demande et jamais en mouvement réduit, mais elle reste
  de loin le plus gros fichier du site pour qui la déclenche.
• Les deux images de fond du hero sont chargées ensemble, soit 82 Ko de
  plus que le strict nécessaire, pour que la bascule entre le jour et la nuit
  soit immédiate. C'est un choix, pas un oubli.
• Les visuels de remplacement des projets, qui seront remplacés par de
  vraies captures, elles-mêmes redimensionnées avant publication.
• Un appel réseau vers un service tiers sur l'accueil, pour la température
  affichée en bas du hero. Il ne transfère que quelques centaines d'octets,
  mais il sort du site ; il est décrit dans la
  politique de confidentialité.
• La mise en cache statique des pages n'est pas encore activée. Le site
  reconstruit donc chaque page à la demande, alors que son contenu ne change
  qu'à la publication. Ce sera fait à la mise en ligne.

Ces points sont connus, chiffrés et suivis. Les annoncer vaut mieux que de
publier une déclaration qui n'énumère que les bonnes nouvelles.

Pilier « Prosperity »

Hébergement. Le site est hébergé par Hetzner Online GmbH, en Allemagne, sur
un serveur administré au moyen de Laravel Forge. Hetzner indique alimenter ses
centres de données européens en électricité d'origine renouvelable : cette
affirmation est celle de l'hébergeur, reprise ici telle quelle, je ne l'ai pas
auditée. Le serveur étant en Europe, la distance parcourue par les données
reste courte pour un public majoritairement belge et français.

Durée de vie. Chaque bibliothèque ajoutée est une mise à jour de plus à
suivre et un risque d'obsolescence de plus ; le socle technique de ce site tient
en quatre noms. Le code est lisible et commenté en français, pour qu'une
reprise dans trois ans ne se solde pas par une réécriture complète, laquelle
coûte bien plus qu'un site allégé n'économise. Un site qui dure dix ans est
plus sobre que trois sites légers refaits tous les trois ans.

Indépendance. Le code source et les accès appartiennent au client, remis à
la fin du projet. Rien n'oblige à repasser par moi pour faire évoluer un site,
ce qui évite les refontes de dépit.

Ce qu'un score public dira, et quand

Les outils publics d'évaluation, EcoIndex du collectif GreenIT, Website Carbon
ou le Green Web Check de la Green Web Foundation, interrogent une adresse
accessible depuis internet. Ils ne peuvent donc rien mesurer tant que le site
n'est pas en ligne, et aucun score de ce type n'est affiché ici pour
l'instant. En publier un serait l'inventer.

L'EcoIndex se calcule à partir de trois grandeurs : le nombre d'éléments du
DOM, le nombre de requêtes et le poids de la page. Ces trois grandeurs sont
déjà dans le tableau ci-dessus, page par page : le score, quand il sera
calculé, n'apportera pas d'information nouvelle, seulement une échelle
commune.

Dès la mise en ligne, seront publiés ici, avec leur date et un lien vers le
résultat vérifiable : la note EcoIndex des pages principales, la note Website
Carbon de l'accueil, et le résultat du Green Web Check sur l'hébergement.

Ce qui est prévu

1. Variantes d'images pour les fiches de projets. Celles de l'accueil sont
   faites, et l'objectif qui était affiché ici, ramener l'accueil sous
   500 Ko, est atteint.
2. Conversion en AVIF de la dernière image encore au format PNG.
3. Activation de la mise en cache statique des pages à la mise en ligne.
4. Publication des scores publics et de leur date.
5. Budget de poids formalisé, vérifié à chaque publication, et affiché ici.

Limites de cette déclaration

Ces mesures sont locales et instantanées. Elles décrivent le poids transféré et
la complexité des pages, ce qui n'est qu'une part de l'impact réel d'un service
numérique : la fabrication des terminaux, la durée des sessions et le nombre de
visites pèsent lourd et ne sont pas mesurés ici. Aucune analyse de cycle de vie
n'a été conduite.

Une déclaration d'écoconception n'est pas un certificat. C'est un relevé daté,
refait à chaque ajout de page, que vous pouvez reproduire vous-même avec les
outils de développement de votre navigateur.

Renaud Van Meerbergen, Linectis