L’éco-conception
chez MobileThinking

Performance des médias

15.07.2025

Première équipe, premier défi : alléger sans appauvrir

Dans le premier article de cette série, on vous parlait de notre dernier Hackathon : une journée entièrement dédiée à l’éco-conception web, pour initier un virage plus responsable dans notre façon de concevoir des services numériques.

Pas de livrables à rendre. Pas de deadlines à respecter.
Juste un objectif clair : rendre notre site plus green et plus performant.

Et pour cela, on a formé plusieurs petites équipes autour de défis ciblés. Voici le retour de la première équipe, composée de Kevin, Mattia et Roseline, qui a choisi de s’attaquer à un levier essentiel :

👉 la performance des médias.

Constat initial 🔎

Dans une page web, tout ce qui s’affiche… se télécharge.
Et tout ce qui se télécharge… consomme de l’énergie.


Les médias (images, vidéos, polices, animations…) ont donc un rôle clé dans l’empreinte environnementale d’un site.

Alors, on a commencé par poser les bonnes questions : 
  • Images : sont-elles trop grandes, trop lourdes, mal compressées ?
  • Vidéos : sont-elles nécessaires ? Peut-on les héberger autrement ? Jouées automatiquement ou à la demande ?
  • Polices : combien de fichiers chargés ? Toutes les variantes sont-elles utiles ?
  • Animations & effets : ont-ils une vraie fonction ?

Les problématiques identifiées 🤔

En une matinée de travail, pas mal de questionnements sont ressortis :  
  • Quels outils permettent vraiment de mesurer l’impact environnemental ?
  • Comment alléger sans dégrader l’expérience utilisateur ?
  • Où se situe le bon équilibre entre esthétique, performance et sobriété ?
  • Comment décider collectivement ce qui est “utile” ou non dans une interface ?

Ce qu’on a testé 🧪

Une fois les éléments bloquants identifiés, on est passés à l’action : 
  • Outils d’analyse : EcoIndex, Website Carbon, GreenIT Analysis, etc.
  • Exploration de bonnes pratiques : benchmarks, recommandations Frugal UX
  • Expérimentations concrètes sur notre site : formats d’image, poids des vidéos, chargement des polices, lazy loading…
L’idée n’était pas de “réduire à tout prix”, mais de réinterroger chaque média à la lumière de sa réelle valeur.

Nos pistes d’amélioration

💡 Voici les premières améliorations mises en place ou identifiées : 
  • Images : → Passer à des formats plus légers (WebP, AVIF) → Redimensionner systématiquement selon les écrans → Utiliser le lazy loading et optimiser le preload
  • Vidéos : → Privilégier l’hébergement externe (YouTube) → Supprimer les lectures automatiques → Proposer une alternative textuelle ou imagée
  • Polices : → Créer des subsets personnalisés → Héberger localement → Activer le font-display: swap
  • Animations : → Supprimer les effets gadgets → Ne conserver que ceux qui ont un vrai rôle UX ou accessibilité

Ce qu’on retient

Travailler sur la performance des médias, ce n’est pas une simple optimisation technique.

C’est une réflexion de fond sur nos usages, nos automatismes, et nos critères de qualité. C’est se demander si chaque élément visuel mérite vraiment l’énergie qu’il consomme.

Et c’est aussi un moyen concret de gagner en rapidité, en clarté… et en conscience.

À suivre… ✨

Premier défi relevé haut la main.

On a hâte d’ancrer ces bonnes pratiques dans nos projets, pour qu’elles deviennent des réflexes !

À suivre : une nouvelle équipe, un nouveau dilemme…
Côté client ou côté serveur, qui consomme le plus ? Spoiler : ce n’est pas si simple 😬