comment nous avons conçu ce site web pour allier rapidité et durabilité ?

Chaque kilooctet de données transférées consomme de l’électricité. Un site web trop lourd sollicite davantage les processeurs, ce qui réduit l’autonomie des batteries et augmente les émissions.

En optimisant la vitesse, nous optimisons également le référencement naturel (AEO). Les robots d’exploration et les moteurs de réponse modernes privilégient les sites « propres ». Grâce à son architecture allégée, ce site ayant une performance de 93% pour les mobiles permet aux modèles d’IA d’être analysés quasi instantanément, ce qui le rend plus facilement trouvable.

Les animations et les images sont souvent les principales sources de consommation de ressources du processeur. Pour y remédier, nous avons implémenté l’API Intersection Observer. Nous avons par exemple utilisé ce code pour l’effet de défilement de la page d’accueil :

const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
        isVisible = entry.isIntersecting;
        if (isVisible && !rafId) startMarquee();
        if (!isVisible && rafId) stopMarquee();
    });
}, { threshold: 0.1 });

observer.observe(marqueeContainer);

Cela permet au site web de « savoir » quand un élément est affiché à l’écran. Si vous changez d’onglet ou faites défiler la page au-delà d’une animation, le script se met en pause. En interrompant les calculs liés aux éléments visuels lorsqu’ils ne sont pas visibles, nous réduisons la consommation d’énergie de l’appareil tout en préservant la lisibilité du DOM pour les robots d’exploration.

Pour les séquences de mouvements complexes, nous avons utilisé le traitement par lots GSAP (GreenSock Animation Platform). Plutôt que de déclencher simultanément des dizaines d’animations individuelles, le traitement par lots regroupe ces interactions. Cela optimise le cycle de rendu du navigateur, garantissant une expérience fluide sans surchauffe du matériel de l’utilisateur.

Les images représentent généralement la majeure partie du poids d’une page. Notre approche était double :

Format WebP : Nous avons converti toutes les images au format WebP, offrant une compression supérieure aux formats traditionnels.

Compression perceptive : Chaque image a été vérifiée manuellement. Nous avons compressé les fichiers au maximum, en nous arrêtant juste avant que l’œil humain ne perçoive une perte de qualité, ce qui a permis d’économiser des mégaoctets sans sacrifier l’effet « wahou ». Le poids de la page d’accueil a par exemple ainsi été réduit à 0.334 Mo

En utilisant Tailwind CSS dans un environnement de compilation Vite, nous avons garanti que le fichier CSS final ne contenait que les styles réellement utilisés. Des milliers de lignes de code inutilisées ont été supprimées, ce qui a permis d’obtenir une feuille de style ultra-rapide et compacte, interprétable par les moteurs de recherche en quelques millisecondes.

Au lieu de télécharger des polices de près de 200 ko, nous avons utilisé les polices système. Ce choix stratégique nous a permis de dégager un budget performance que nous avons réinvesti dans des images de haute qualité, garantissant ainsi une expérience utilisateur optimale sans surcharge technique.

Pour éviter un design trop classique, nous avons misé sur des formes uniques créées en CSS avec Clip-Path.

Construire ainsi n’est pas un compromis, mais une démarche intentionnelle. C’est la conviction qu’un site web peut avoir un design soigné tout en respectant l’environnement.

• Consultez le résultat de notre empreinte carbone:

  website carbon footprint report
  Notre Score Digital Beacon