Beau-Rivage Eco-Redesign
Une refonte écoconçue de fond en comble du site du Beau-Rivage Palace qui a réduit son poids et son empreinte carbone d'environ 95 % tout en gardant l'allure d'un hôtel cinq étoiles. Un audit du site existant, un nouveau design, et un build Nuxt 3 réglé pour la durabilité.
- Rôle
- Écoconception et build
- Année
- 2025
- Cadre
- HEIG-VD · Eco-conception
- Périmètre
- Équipe de quatre
- Livré
- Refonte + build Nuxt 3
Les sites des hôtels de luxe comptent parmi les plus lourds du web : vidéo en lecture automatique, images énormes, et tous les formats imaginables, le tout au nom du prestige. Ce poids n'est pas gratuit. C'est de la bande passante, de l'énergie et du carbone à chaque visite.
Le brief consistait à refondre le site du Beau-Rivage Palace selon les principes de l'éco-conception (le design numérique responsable), et le vrai défi tenait à une tension interne : réduire drastiquement le coût environnemental du site sans perdre le sentiment de luxe sur lequel repose toute la marque.
- Le build technique : le passage à Nuxt 3, le rendu côté serveur, et le pipeline d'optimisation des images
- La mesure avant-après du poids, du carbone et des performances
- L'audit du site existant et la refonte, avec l'équipe
- Des parties du design visuel et des maquettes, partagées au sein de l'équipe de quatre
Équipe de quatre (Groupe CJJN) pour le module Eco-conception à la HEIG-VD : Nicolas Aerny, Joël Gaillard, Jérémy Martin et Clément Künzi. Enseigné par Stéphane Lecorney.
Peser le site existant
Avant de refondre quoi que ce soit, nous avons mesuré ce qui existait, car l'éco-conception ne prend sens que face à une référence. Le site existant s'appuyait sur de la vidéo en lecture automatique et des images non optimisées, réparties dans une arborescence profonde de chambres, suites, restaurants, bars et spas. Une seule page pesait plus de treize mégaoctets et obtenait un F sur EcoIndex, avec une estimation de 368 kg de CO2 par an pour dix mille visites par mois.
Nous avons aussi cartographié les vrais parcours utilisateurs (un prospect qui s'informe, un client qui compare les chambres) pour que la refonte puisse garder ce que les gens venaient vraiment chercher tout en se délestant du poids qu'ils n'avaient jamais demandé.
Le luxe sans le poids
La question de design était la plus intéressante : comment garder une image de prestige tout en retirant les ingrédients lourds qui la signalent d'habitude ? Nous avons reconstruit les pages clés (la page d'accueil, les chambres et suites, une suite comme la Riviera) autour de la sobriété, en traitant l'espace généreux et la typographie soignée comme le signal du luxe, à la place du spectacle en lecture automatique.
Nuxt 3, SSR et discipline des images
Nous sommes partis de Vue, le framework que nous connaissions, et nous sommes passés à Nuxt 3 précisément pour les outils de durabilité qu'il apporte. Grâce au rendu côté serveur, la page arrive prête à s'afficher avec un travail minimal sur l'appareil du visiteur, et Nuxt Image gère automatiquement la plus grosse source de poids : convertir les images vers des formats modernes comme WebP et AVIF, les charger en différé, et les redimensionner à l'écran réel plutôt que d'envoyer un seul énorme fichier à tout le monde.
Cette combinaison constitue l'essentiel du gain. Une architecture SSR sur Node.js réduit le travail côté client, et donc l'énergie de l'appareil, au minimum, et une gestion disciplinée des images fait des pages les plus lourdes les plus légères. L'idée tout du long était que la durabilité ici n'est pas une ambiance, ce sont des choix techniques précis avec des effets mesurables.
Chercher du vert, honnêtement
Nous avons aussi regardé où le site vivrait, en confrontant les hébergeurs au jeu de données de la Green Web Foundation. Le constat honnête était une zone grise : notre plateforme tourne sur une infrastructure AWS en Europe, qui revendique de l'énergie renouvelable mais n'est pas clairement répertoriée comme verte. Plutôt que d'enjoliver les choses, nous l'avons noté comme une limite réelle, car un projet d'éco-conception qui maquille son propre hébergement n'est pas honnête sur son empreinte.
De F à A
L'avant-après est la part dont je suis le plus fier, car elle est mesurée, pas affirmée. Le poids de la page est passé de 13.11 MB à 504 KB. Le carbone annuel estimé est tombé de 368 kg à 15.35 kg de CO2. La note EcoIndex est passée de F à A, et le score de qualité global est monté de 36 à 73, les performances grimpant de 66 à 98.
Soit environ 95 % de poids et de carbone en moins, un site à peu près vingt fois plus léger, avec une utilisabilité et des performances qui montent au lieu de baisser. Le luxe a survécu au régime.
Un site du Beau-Rivage Palace refondu, environ 95 % plus léger en poids et en carbone que l'original, EcoIndex de F à A, tout en gardant l'allure d'une marque cinq étoiles.
Un build Nuxt 3 utilisant le rendu côté serveur et l'optimisation automatique des images comme leviers principaux, avec un avant-après mesuré plutôt qu'une affirmation.
Un compte rendu honnête des limites, y compris la zone grise autour de l'hébergement vert, car un projet d'éco-conception doit mesurer honnêtement sa propre empreinte.
Ce projet a rendu la durabilité numérique concrète pour moi. Il est facile de parler de design responsable dans l'abstrait ; il est bien plus utile de réduire de 95 % le carbone d'un vrai site et de pouvoir montrer les chiffres. La leçon qui est restée, c'est que les parties les plus lourdes et les plus gaspilleuses d'un site sont en général les plus faciles à corriger automatiquement, les images avant tout, et que l'on peut être plus léger et plus rapide tout en restant haut de gamme. Cela touche de près à la question derrière mon mémoire : rendre visible le coût énergétique invisible du numérique, puis y faire quelque chose.
