Pas d’audio, ni de vidéo. SNCF Connect & Tech en a décidé ainsi dans une perspective d’écoconception de son site web.

WebP, lazy loading… et noir et blanc

Pour ce qui est des images, le format WebP a été adopté. Avec lazy loading (on ne charge un élément que lorsque son emplacement devient visible à l’écran). Leur taille est par ailleurs automatiquement réduite de 5 % lors du traitement et les images monochromes sont fournies en noir et blanc.

Un cahier des charges pour les PDF

Pour chaque fichier proposé au téléchargement, le poids est indiqué. Le format PDF a été généralisé. Pour tout nouveau document, les contributeurs sont invités à se demander s’il est strictement nécessaire ou si on peut le remplacer par un autre contenu sur le site. On les incite aussi à contrôler que les images sont bien nécessaires, que les annotations ont été supprimées, que les polices sont bien des polices système… et que les bons paramètres d’export ont été appliqués.

Pas de carrousel ni de préchargement au survol

En front-office, la bibliothèque shadcn/ui a été retenue pour gérer les composants complexes, en raison de son faible environnemental, avance SNCF Connect & Tech. Certains composants prévus pour un usage unique ont été abandonnés au profits d’éléments réutilisables. Le format carrousel a été volontairement écarté – il n’aurait été utilisé qu’une fois – et remplacé par un composant de type tabulation. Quant aux préchargements au survol, ils ont été désactivés.

Autoscaling à 50-60 % de CPU

En back-office, trois services d’autoscaling sont en place. Pour Next.js, on ajoute une instance si la consommation CPU dépasse 50 % pendant 3 minutes. On en supprime une si l’utilisation tombe sous les 30 % pendant 6 minutes. Pour Drupal et le proxy, ces seuils sont à 60 % et 30 %. Dans tous les cas, le nombre d’instances est plafonné à 16.
Les environnements de développement sont créés à la volée, automatiquement éteints en dehors des heures de travail et détruits une fois le développement achevé.

Un an en cache côté client

Par défaut, toutes les ressources maîtrisées sont mises en cache côté client avec une durée de validité d’un an (polices, CSS et JavaScript, notamment). Certaines ressources ont des règles spécifiques, comme les images statiques (30 jours).
Côté serveur, les données les plus fréquemment demandées sont mises dans un cache Redis. Drupal gère le cache des pages dynamiques ; Cloudflare, la mise en cache des ressources statiques à grande échelle.

Des pages de 3 Mo maximum

L’impact environnemental est analysé à intervalle trimestriel. SNCF Connect & Tech s’astreint à un maximum de 3 Mo par page, 60 requêtes par écran, 1,6 Mo de données transférées et un score Ecoindex d’au moins D.

Quelques pages représentatives analysées au 23 avril 2025 :

Les choix d’entreprises (fournisseur, solutions mutualisées) limitent l’intégration de services tiers plus propres, admet SNCF Connect & Tech.

Illustration générée par IA

The post SNCF Connect & Tech détaille sa recette d’écoconception web appeared first on Silicon.fr.