Atelier Equinoxe
Refonte technique du site d'un ébéniste
Atelier Equinoxe avait un site WordPress datant de 2020, avec le temps il est devenu lourd et obsolète. Dans une démarche d'alléger l'empreinte de son site, Jonathan a fait appel à moi pour l'accompagner une seconde fois pour son site web.
Pourquoi un nouveau site
Le précédent site avait été développé à l'ère des page builders. Si tu ignores ce que c'est, c'est tout simplement une surcouche qu'on met sur les WordPress pour pouvoir construire visuellement des pages sans compétences en code. Aujourd'hui WordPress a beaucoup évolué et ne nécessite plus autant de surcouche pour fonctionner.
C'était déjà moi qui avais réalisé ce premier site pour Atelier Equinoxe à l'époque et l'idée était de lui laisser complètement la main sur le site. J'avais fait ce choix technique car à l'époque c'est de cette façon qu'on m'avait appris à faire les sites web.
Depuis, mes techniques de développement ont grandement évolué et l'éco-conception a pris une place importante dans mon métier. Je privilégie d'autres technologies même si faire un WordPress n'est pas exclu selon le contexte.
Pour Jonathan, c'est surdimensionné pour son usage et j'ai fait le choix de migrer hors WordPress.
Une architecture éco-conçue
Ce nouveau site est principalement repensé techniquement car le design reste fidèle à ce qui avait été créé par la graphiste il y a quelques années. Il repose maintenant sur un générateur de site statique couplé avec une interface d'administration simple d'usage et pensée pour Jonathan.
Niveau fonctionnalités, Jonathan avait plusieurs besoins :
- Pouvoir gérer la vente de ses créations originales
- Pouvoir lier sa future campagne de financement participatif
- Pouvoir gérer ses listes d'attente pour des produits
- Pouvoir partager tout ce qu'il fabrique, que ce soit des créations originales, du sur-mesure ou ses ateliers
- Pouvoir intégrer le module WeCanDoo sur ses ateliers
Pour certaines intégrations qui peuvent être lourdes, elles sont chargées uniquement lorsqu'un utilisateur en a besoin. Cela me permet de limiter le nombre de ressources chargées sur le site web et de faire de belles économies pour la majorité des visiteurs. Concrètement, si quelqu'un veut réserver un atelier WeCanDoo, le module correspondant se chargera exclusivement lorsque l'utilisateur effectuera l'action d'appuyer sur le bouton de réservation. Tous les fichiers sont silencieux jusqu'à ce moment-là.
Cette manière de configurer se répète pour tous les services externes comme Stripe, Brevo et Ulule. Une page qui ne contient aucun de ces services ne contient pas de fichiers fantômes lourds. Chaque page charge juste ce qu'il faut.
Mise à jour visuelle
Nous avons majoritairement conservé le design initial du site avec quelques améliorations pour l'accessibilité et la lisibilité :
- Une mise à jour visuelle de l'accueil pour mieux représenter Jonathan
- Une meilleure segmentation entre Création, Projets et Ateliers
- Un meilleur contraste pour les textes et l'accessibilité
- Des entêtes de pages moins énergivores avec des dessins décoratifs réalisés par Jonathan
Ces petits éléments m'ont permis de gagner encore en performance pour le site. De plus, il y avait de sérieux problèmes d'affichage en mobile que j'ai tous régler.
Impact environnemental et performances
On arrive à la partie la plus parlante de cette refonte, les mesures avant/après.
Toutes ces mesures ont été réalisées à l'aide du plugin EcoIndex disponible ici. Elles sont couplées à une analyse Google Lighthouse pour pouvoir estimer les performances.
Pour expliquer simplement les tableaux que vous allez lire ci-dessous, il y a 3 éléments essentiels qui nous aident à juger de l'éco-conception du site web selon le modèle d'EcoIndex :
- le poids transféré, c'est-à-dire combien pèse la page
- Le nombre de requêtes, chaque lien vers une image, une police ou toute autre ressource est une requête
- Les éléments DOM, ce sont les balises HTML (code) qui composent votre page.
Pour ces trois métriques, on veut avoir un chiffre le plus bas possible.
EcoIndex de la page d'accueil
| Mesure | Ancien site (WP) | Nouveau site (Astro) |
|---|---|---|
| Score Ecoindex | 48/100 | 79/100 |
| Note | D | B |
| Empreinte GES | 2,03 g eqCO2 | 1,43 g eqCO2 |
| Consommation d'eau | 3,05 cl | 2,14 cl |
| Poids transféré | 7 834 Ko | 1 109 Ko |
| Requêtes | 78 | 27 |
| Éléments DOM | 457 | 211 |
Ecoindex des pages comaprables
| Mesure | Ancien site (9 pages) | Nouveau site (10 pages) |
|---|---|---|
| Score Ecoindex moyen | 68/100 | 87/100 |
| Notes obtenues | D, C, E, B, B, A, A, A, C | 9×A, 1×B |
| GES moyen | 1,65 g eqCO2 | 1,27 g eqCO2 |
| Eau moyenne | 2,47 cl | 1,90 cl |
Scores Google Lighthouse
| Mesure | Ancien site | Nouveau site |
|---|---|---|
| Performance | 86/100 | 100/100 |
| Accessibilité | 78/100 | 98/100 |
| Bonnes pratiques | 69/100 | 100/100 |
| SEO | 86/100 | 100/100 |
| Poids moyen/page | 2 535 Ko | 291 Ko |
| Requêtes moyennes/page | 85 | 19 |
Après toutes ces belles mesures, on peut en conclure qu'il y a une très grosse évolution entre le précédent site et le nouveau. Tout ça est le fruit des décisions techniques. Le site de Jonathan est passé de D en moyenne à A, c'est donc une refonte qui parle d'elle-même.
Je suis très contente du résultat obtenu et j'espère continuer d'aller toujours plus loin dans ce sens sur mes futurs développements.
Retourner à la liste des projets
