Développement d'une application web écoresponsable pour Nord-Sud CTI (Groupe Bolloré)

Nous avons accompagné la société Nord Sud CTI pour réaliser une application web permettant d’obtenir instantanément un devis pour du transport international maritime et aérien.

Soucieux de son impact environnemental et de l’expérience utilisateur proposée, Nord-sud voulait développer un outil ayant un impact environnemental réduit tout en étant performant.

Résultat : Un site 6 x plus rapide et réduisant de plus de 80% les émissions de CO2 par rapport à la concurrence.

"En tant que commissionnaire de transport, la réduction de notre empreinte CO2 est au cœur de nos préoccupations, à tous les niveaux de notre activité. Quand nous avons voulu développer un nouveau site web permettant à nos clients d’obtenir des tarifs en ligne, nous avons souhaité que ce dernier soit conçu de manière à consommer le moins de CO2 possible. Nous avons grandement apprécié la méthode et l’expertise de Codixis dans ce domaine. Venez apprécier le résultat sur www.cotation.nord-sud-cti.com !"

Philippe, General Manager Nord-Sud CTI (Groupe Bolloré)

Comment avons-nous procédé pour atteindre ce résultat ?

Voici les 4 points clés de notre approche :

• Le design et la recherche d’efficacité dans l’UX
• Des pratiques de développement adaptées
• Une gestion du contenu optimisée
• Une mesure régulière des indicateurs de performance et de consommation énergétique

Design et efficacité UX

Un design minimaliste et efficace, faisant appel a peu de ressources.

L’expérience utilisateur est centrée sur les usages clés.

Pratiques de développement adaptées

Un stack minimaliste pour l’interface utilisateur, avec Tailwind CSS et Alpine.js

Tailwind CSS est le nouveau framework pour les interfaces graphiques, il est ergonomique et performant pour les utilisateurs et agréable à utiliser pour les développeurs. Sans trop rentrer dans la technique, le CSS pour l’ensemble de la plateforme ne pèse que 7.5kB. Le navigateur est naturellement très rapide dans le téléchargement et l'interprétation du design.

Alpine.js est le compagnon recommandé de Tailwind CSS, orienté performance et simplicité d’utilisation pour les développeurs. La librairie Alpine ne pèse que 9.1kB, et le javascript est directement inclus dans le HTML. Ici aussi, téléchargement et interprétation sont hyper optimisés.

2/ Aucun tracker ni javascript de sites tiers (Google Analytics), la plateforme dispose de ses propres outils d’analytics ne nécessitant pas de consentement RGPD

Ici, aucun tracker Google Analytics ou autre, les analytics sont calculés par la plateforme et ne collectent aucune donnée personnelle.

• Le chargement des pages n’est pas ralenti par le chargement de javascript tiers, Google vous en remercie.
• Pour les utilisateurs, ils (re)découvrent le confort de naviguer sur un site ne nécessitant pas de bannière de consentement RGPD.

3/ La mise en place des bonnes pratiques en matière de performance sur le serveur, principalement Opcache et Gzip

Nous le rappelons si besoin, quelques lignes sur PHP.ini et Nginx.conf vous feront gagner considérablement sur vos temps de réponses.

Ces réglages seront nécessaires si vous souhaitez un score de qualité de 100%

Gestion du contenu

Des visuels trop lourds sont souvent à l’origine de surconsommation et de réduction du temps de chargement (surtout sur les pages où les images sont nombreuses).

Utiliser la compression, un dimensionnement adapté ainsi que des formats adaptés pour optimiser le poids des fichiers.

Ici, toutes les images sont compressées et l’admin est limité à une taille de fichier maximum. Cela permet un maintien de la performance dans le temps.

Mesure régulière en utilisant les outils adaptés

Ecoresponsabilité

• -8 % d'émission de CO2 par rapport au moteur de cotation référence du marché (Searates)
• Le site obtient un score Eco Index de A (sur une échelle de A à G)

Performance

• Un score Lighthouse de 100/100
• Un site 6 fois plus rapide que le moteur de référence du marché (Searates)

Vous souhaitez rendre votre site web ou votre application plus performante et écoresponsable ?

Contactez-nous !