Anciennement classe Multi50, La classe Ocean Fifty nait en 2021 dont son activité est liée à la course au large.
Via une communication peu commune dans ce domaine, elle a réussi à gagner un public toujours plus large. Il y a même une docu-série Ocean Fifty diffusée sur Canal + chaque année. À son bord, elle rassemble skippers, armateurs et sponsors des multicoques.
Dynamique et raisonnée, il était essentiel pour la classe Ocean Fifty de refondre son site internet sur les bases de l’éco-conception Web. Avec mes camarades des Raisonné.e.s, nous avons donc mené la barre pour proposer un site internet basse consommation. J’ai été chargé de l’éco développement Web mais aussi du conseils en éco-conception, de l’optimisation du site internet et de la formation au site web.
Client : Ocean Fifty
Ocean Fifty
- Conseil /
- Développement sur-mesure /
- Éco-conception Web /
- Formation /
- Mise en avant /
- Optimisation de site internet /
- Site web vitrine /
Les missions réalisées :
Développement Web
Une fois l’arborescence, les wireframes et l’UI Design réalisés par mes collègues des Raisonné.e.s, j’ai pu entamer le développement web.
Tout au long du développement du site web, j’ai réfléchi de la manière la plus éco-responsable possible. Ceci est d’ailleurs la base de l’éco-conception web. Chaque phase de la réalisation doit être réfléchie pour réduire au maximum l’empreinte écologique du site web.
Certains éléments ont été repensés sur la partie technique pour qu’ils soient davantage optimisés.
Prenons l’exemple de la page d’accueil. Sur le haut de celle-ci, nous devions avoir 2 images : un masque avec la forme des voiles + une image en arrière-plan du masque. Si nous avions suivi l’idée de départ, nous aurions eu deux requêtes ainsi qu’une image d’arrière-plan immense pour une partie visible infime car cachée par le masque.
Le poids des images ainsi que le nombre de requêtes n’étaient pas concevables. Il fallait repenser ces éléments. En réfléchissant, la solution était simple.
Sur la base du trompe-l’oeil, une partie du masque a été créée en code CSS et l’autre partie devait faire partie de l’image. Il ne restait plus qu’à associer les deux.
Résultat : 1 seule requête au lieu de deux et une image réduite de 2/3 (donc beaucoup moins lourde).
Dès la demande de création du site internet, l’éco-conception a été le fer de lance et a permis d’optimiser au mieux le site internet tant sur la complexité du DOM, le poids du site web ainsi que le nombre de requêtes des pages.
Performances Web
À la suite de la mise en ligne du site web et une fois l’optimisation du site web coté serveur faite, nous avons pu tester les performances web. Nous avons réussi à obtenir de bon score comme sur la page d’accueil ci-dessous.
Performance globale de la page d’accueil :
> Fast or Slow : 97/100
> Pingdom Tools : 94/100
> Google Page Speed version ordinateur du site Ocean Fifty : 98/100
> Google Page Speed version mobile du site Ocean Fifty: 100/100
Performance environnementale à la mise en ligne :
• Ecoindex : catégorie A
> Poids moyen des pages : 538Ko (moyenne du Web actuel : 2457Ko)
> Nombre moyen de requêtes par page : 20 (moyenne du Web actuel : 86)
> Taille moyenne du DOM : 218
• Website Carbon Calculator :
> 0,34g équivalent C02 à chaque visite du site (4.61g de CO2 en moyenne par page pour un site non éco-conçu selon Wholegrain Digital, créateur de Website Carbon Calculator)
Informations des moyennes sur le web : Rapport de l’état du web de juillet 2021 du site https://httparchive.org
