Pour un web plus vert

Director of Front-End development
Valtech

janvier 04, 2021

Internet consomme environ 416TWh d’électricité par an. Ce chiffre n’est pas très révélateur, jusqu’à ce qu’on le compare aux 300TWh de consommation du Royaume-Uni. Ces chiffres sont stupéfiants, et ne feront qu’augmenter au fur et à mesure qu’Internet se développe.

Qu’on le réalise ou non, les émissions de CO2 sont partout. Le site web moyen produit 1,76 grammes de CO2 par page visionnée. Pour un site web avec 10 000 pages visionnées par mois, cela représente 211 kg de COE, soit deux fois le poids d’un joueur professionnel de basketball : bien plus de COE que dix arbres ne pourraient en absorber. Avec la quantité de sites web sur le Net, cette comparaison peint un portrait des plus effrayant.

Et maintenant, pour le luxe

Chaque page web est composée d’éléments artistiques qui racontent une histoire choisie. Les pages de produits de luxe sont des expériences riches, qui poussent l’utilisateur à s’attarder pour profiter du parcours. Si cette approche est idéale pour le client potentiel, elle l’est beaucoup moins pour l’environnement. Ces pages regorgent de lourdes images, vidéos et animations. Plus la page est lourde, plus elle émet de COE. Plus les pages prennent de temps à charger, plus les émissions de CO2 augmentent, du fait de l’utilisation prolongée des appareils, des antennes et des écrans.
Le luxe sur le web comporte des objectifs contradictoires : nous voulons que notre expérience soit riche, mais nous voulons aussi des pages au chargement très rapide. Tout le monde sait que les pages lentes occasionnent plus d’abandons d’utilisateurs. Et, pour aggraver les choses, nous devons aussi prendre l’environnement en considération. Il nous faut limiter la quantité de CO2 rejetée dans l’atmosphère pour chaque page visitée.

La situation décrite ci-dessus regorge de problèmes complexes à résoudre. Nous savons que les émissions de CO2 sont au plus bas si :

  1. la page est trouvable rapidement ;
  2. la page charge rapidement, et avec peu de ressources ;
  3. et les utilisateurs ne restent que très peu de temps sur la page.

Ces trois points sont difficiles à satisfaire dans le contexte actuel du luxe ; non pas par manque de savoir-faire en matière de conception de site, mais parce que les objectifs y sont différents. Nous voulons que les gens explorent la marque, qu’ils s’attardent et soient influencés par l’histoire du produit. Il s’agit d’en faire des clients à vie. Malheureusement, ceci va à l’encontre de ce qu’on considère comme best practices pour les sites web à faible empreinte carbone.

Mais n’ayez crainte : il existe une solution qui peut nous rapprocher de la durabilité, et ceci en maintenant notre niveau de qualité actuel. En plus d’être plus écologique, cette solution rend nos sites plus accessibles pour les clients des marchés émergeants. Notre solution : l’optimisation de la diffusion image et vidéo. Nous résolvons le problème en réduisant les excès, et en ne chargeant que ce qui est nécessaire en fonction du contexte de l’utilisateur.

Où en est-on ? Optimiser la diffusion d'assets medias

La plupart des systèmes CMS traditionnels se concentrent sur l’édition ou le catalogage du contenu, plutôt que sur la diffusion de contenu en soi. La diffusion de contenu est incluse dans la suite d’outils de la plateforme, mais le focus est généralement placé sur d’autres aspects. Cette approche est appelée « best-of-suite », avec un unique vendeur gérant tous les aspects du site web.

De nos jours, certaines entreprises sont spécialisées dans la résolution de problèmes spécifiques au sein de l’écosystème des sites web. Ces solutions sont appelées « best-of-breed », et sont le plus souvent des sociétés SaaS cloud natives. Parmi ces entreprises, il existe une catégorie qui gère exclusivement la diffusion d’assets media.

La gestion des images et des vidéos est particulièrement complexe. Lorsque l’on demande à un éditeur de contenu, à un réalisateur ou à un développeur web comment optimiser les assets pour le web, la réponse leur échappe le plus souvent. Il en va de même pour les systèmes CMS best-of-suite. Ils n’optimisent pas les assets spécifiquement pour le web : ils les diffusent tels quels.

Ceci place la responsabilité entre les mains de l’éditeur de contenu. Il n’est pas rare de voir ces derniers lutter avec Photoshop, sans trouver comment optimiser une image. Il est courant de payer des formations et des licences Adobe, et ce coût n’est pas négligeable.

Heureusement, il existe une pléthore de façon d’optimiser les images et les vidéos pour le web, et les solutions SaaS mentionnées ci-dessus se chargent de ce problème pour vous. Ils diffusent les assets dans le format adapté au contexte de l’utilisateur (navigateur, appareil, résolution). Ils réduisent également la taille du fichier grâce à l’IA, pour le rendre indiscernable de l’original ; notons que cette tâche est impossible à réaliser à la main pour un éditeur.

Dans certains de nos projets, nous avons vu le poids des pages diminuer de 90% sans perte de qualité. Les éditeurs de contenu n’ont eu qu’à mettre en ligne l’image d’origine, et laisser le système se charger du reste.

Charger les assets appropriés au contexte utilisateur

Outre le fait de diffuser des assets optimisés, le gain le plus important est réalisé lorsqu’on ne les diffuse pas du tout. Aussi étrange que cela puisse paraître, c’est la façon la plus efficace d’obtenir un site web à faible empreinte carbone. Si un utilisateur ne fait jamais défiler la page, ou n’ouvre jamais le méga menu, à quoi bon charger ces assets ? Les seuls assets que vous devriez charger sont ceux dont vous savez que l’utilisateur les verra. C’est ce que l’on appelle le « lazy loading », et c’est l’un des outils les plus utiles parmi les trucs et astuces des développeurs.

Presqu’aussi important que le lazy loading, vous devez également charger vos assets dans le contexte approprié. Si un utilisateur visite votre site depuis son téléphone, assurez-vous de charger l’image dans la résolution que celui-ci utilise. Charger des assets plus lourds dégrade inutilement l’expérience utilisateur. Les tailles excessives de fichiers augmentent également l’empreinte carbone du site.

Il en va de même pour les formats de fichiers. Si vous voulez que votre hero banner comporte une image d’arrière-plan animée (comme nous le voulons tous), privilégiez le format vidéo au GIF. Les GIFs pèsent à peu près 5 fois le poids des vidéos, et fonctionnent généralement mal sur les appareils mobiles.

À l'horizon

Il n’est pas toujours possible d’optimiser nos pages web en appliquant les best practices pour l’empreinte carbone. Il en va de la nature du luxe. Nous pouvons par contre nous concentrer sur de plus petites variables de l’équation, dont l’impact sur la durabilité du site sera conséquent. Tout ceci peut être accompli sans jamais compromettre la qualité.

Portez votre regard vers le futur, et choisissez une solution best-of-breed pour gérer l’une des parties les plus complexes du web : les images et media. En combinant optimisation des assets et lazy loading, nous pouvons alléger le poids de nos pages. Ceci signifie qu’elles seront plus accessibles pour les nouveaux clients des marchés émergeants.

Et ne serait-ce pas plus pratique que les éditeurs de contenu n’aient plus besoin de licences Photoshop ? Les frais généraux de formation et les processus supplémentaires occasionnés n’en valent pas le coup.

Choisissez plutôt de diffuser vos media via une solution spécialisée ; Mère Nature appréciera la faible empreinte carbone de votre site.

Luxury whitepaper

Prêt à faire passer votre marque de luxe au niveau supérieur ?

Nous somme des experts du luxe et du digital. Contactez Valtech dès maintenant.
Contactez-nous

Nous contacter

The experience innovation company