B (76,4/100)
La meilleure note possible est A
Le meilleur score possible est 100
99/100
Un meilleur score que 95% de toutes URLs testées par Ecograder
138,7 ko
Un poids 94% inférieur au poids médian d’une page Web desktop selon HTTPArchive
100/100 · 100/100 · 100/100
Performance - Accessibilité - Bonnes pratiques
5.884 mg eq. co2 ± 2.3%
Pour une prise de contact via page d’accueil puis page projets
13.311 mWh
Pour une prise de contact via page d’accueil puis page projets
| Page | Poids | Scores EcoIndex | Scores EcoGrader |
|---|---|---|---|
| Accueil | 197 ko | B (75/100) | 98/100 |
| Projets | 193 ko | C (57/100) | 99/100 |
| Témoignages | 107 ko | A (85/100) | 99/100 |
| Nos 2 profils | 149 ko | A (81/100) | 99/100 |
| Notre manifeste | 163 ko | A (83/100) | 99/100 |
| Mentions légales | 107 ko | A (85/100) | 99/100 |
| Plan du site | 104 ko | A (87/100) | 99/100 |
| Glossaire UX design | 119 ko | C (58/100) | 99/100 |
| Démarche d’éco-conception | 110 ko | B (77/100) | 99/100 |
Scores mesurés le 26 octobre 2023.
Notre site précédent n’était ni très lourd, ni très riche. Il s’agissait d’un simili “one-page” qui contenait quelques pages internes complémentaires n’appartenant pas à la navigation principale.
Cependant, après plusieurs grosses mises à jour de contenu réalisées sur les presque 4 ans d'existence du site, la refonte était devenue nécessaire dans le but de :
revoir l’ergonomie de notre site dont le contenu avait beaucoup évolué pendant ces années et dont la structure n’était plus adaptée
se défaire de la dépendance à l’outil SaaS Webflow et retrouver l’autonomie nous permettant d’implémenter des choix techniques forts au service de l’éco-conception
communiquer clairement nos spécialisations et faire de notre site Web une vitrine de ces expertises.
Notre méthodologie d’éco-conception a consisté à :
Redéfinir les besoins des personnes potentiellement utilisatrices de notre site et surtout les hiérarchiser.
→ Par exemple, nous contacter, comprendre notre offre, découvrir nos références...
Pour les unités fonctionnelles conservées, imaginer un chemin critique plus radical et avec moins d’impact environnemental, ce qui se traduit par :
Pour tout cela, nous nous sommes fondées sur les recommandations déjà rédigées par des personnes engagées, comme :
Éco-conception web - les 115 bonnes pratiques (nouvel onglet) par Frédéric Bordage
RGESN (nouvel onglet) par la DINUM, le Ministère de la Transition Écologique, l’ADEME et l’Institut du Numérique Responsable
Web Sustainability Guidelines (nouvel onglet) par un W3C Community Group
Guide d’écoconception de services numériques (nouvel onglet) par les Designers Éthiques
Suppression de nos études de cas, qui étaient les pages les plus lourdes de notre précédent site
Conservation de l’absence de collecte de données
Pas d’utilisation de médias riches et lourds comme les vidéos
Pas d’intégration de scripts tiers
À noter que nous avons tout de même intégré deux contenus qui n’existaient pas sur l’ancienne version :
La page Témoignages pour répondre à notre besoin business de réassurance
Cette page Démarche d’éco-conception pour soutenir le processus et la pédagogie
Choix d’un site à plusieurs pages pour répondre à des unités fonctionnelles précises sans obliger l’internaute à charger tous les contenus, contrairement au site one page précédent
La prise de contact -unité fonctionnelle principale- est facilitée quelle que soit la page en question sans avoir à charger une nouvelle page, grâce au lien omniprésent vers une ancre en bas de page
Masquage par défaut des images d’un projet et affichage d’un message de prévention lorsque la personne utilisatrice fait le choix d’afficher les images en plus grande taille
Limitation dans la dimension et donc le poids des images projets car elles ne sont là que pour suggérer le contenu de nos livrables
Respect des règles d’accessibilité relatives au design
Allègement du nombre de requêtes et de dépendances extérieures en choisissant d’intégrer 1 police personnalisée, contrairement aux 2 webfonts Google et Adobe précédemment utilisées
Diminution du travail du CPU en écartant finalement l’utilisation de CSS gourmand comme “blur” initialement prévu en fond de page dans le design
Design graphique avec gestion maline des images
Abandon de Webflow pour diminuer notre dépendance à un outil SaaS externe et supprimer plusieurs requêtes gourmandes en ressources
Bascule sur un site statique avec le framework Astro : il n’y a plus de requêtes vers une base de données pour charger le contenu
Choix de ne servir que le CSS réellement utilisé grâce au framework Tailwind
Choix de la variante “Variable” de la font Satoshi pour pouvoir accéder aux 3 graisses utilisées sur le site depuis un seul fichier (127ko au lieu 73+73+74=220ko) puis remplacement du format TTF par le format Woff2 lorsqu’il a été rendu disponible (43ko au lieu de 127ko) puis suppression des glyphes non utilisés dans la font via l’outil en ligne de commande pyftsubset (22ko au lieu de 43ko)
Gestion sur-mesure des images : selon les résultats de formatage et compression obtenus pour chaque image, nous avons soit choisi le format PNG s’il était plus performant, soit fourni aux navigateurs 2 formats Web ultra optimisés : AVIF et WebP
Mise en place du lazy loading (“chargement fainéant”) pour ne charger les médias que lorsqu’ils dépassent la ligne de flottaison et donc que s’ils sont réellement consultés
Configuration d’un temps de cache long sur les ressources faiblement mises à jour
Travail main dans la main entre développement et design pour implémenter au maximum l’accessibilité
Diminution du travail du CPU en écartant le plus possible les solutions techniques nécessitant des appels/recalculs Javascript. Les cas d’utilisation de JS restants sont les suivants :
Hébergement par Infomaniak, "le cloud éthique"
Ouverture du code en open-source, sous licence Creative Commons CC BY-NC-ND
Ce site a été conçu et développé pour être correctement affiché et utilisable sur des devices variés, récents et anciens. Nos tests ont été réalisés sur les équipements physiques suivants :
Navigateurs et systèmes : Chrome/macOS, Firefox/macOS, Safari/macOS, Edge/Windows, Firefox/Windows, Firefox/Android, Edge/Android, Chrome/Android, Safari/iOS
Résolutions : mobile et desktop, toutes résolutions (site responsive)
Devices mobile : iPad Air (2013), iPhone 7 (2016), Pixel 3a (2018), Samsung Galaxy S10e (2019), Pixel 4 (2019), Oppo Find X2 Neo (2020)
Nous testons également le site sur des systèmes complémentaires avec l’outil BrowserStack que nous utilisons grâce à leur programme Open Source.
L'éco-conception est une démarche d'amélioration continue. À ce jour, nous avons d’ores-et-déjà identifié des axes d’amélioration.
Retravail ergonomique de la page Projets pour simplifier le DOM
Affichage de la galerie en HTML/CSS uniquement
Optimisation ergonomique de la feuille de style d’impression
Nous avons profité de ce temps de réflexion et d’action pour opérer également des changements sur nos supports de communication et nos outils de travail du quotidien :
Bascule des outils Google vers la kSuite d’Infomaniak pour le stockage de nos documents, les réunions et visioconférences, notre messagerie...
Refonte de notre book PDF :
