Éco-conception web : 5 leviers concrets pour alléger un site

Vous ajoutez une photo de réalisation, puis un module de réservation et une nouvelle police pour la dernière campagne. Au fil des mises à jour, votre site peut finir par charger beaucoup de choses pour afficher peu d’informations.

L’écoconception commence par une question : de quoi les visiteurs ont-ils réellement besoin ? Une fonctionnalité devenue inutile mérite autant d’attention qu’un fichier à compresser.

Voici cinq leviers pour revoir l’existant et préparer les prochains ajouts.

1. Charger le JavaScript dont la page a besoin

Un visiteur veut connaître vos horaires. Son navigateur charge pourtant un outil de discussion, un carrousel et plusieurs bibliothèques dont cette page se sert à peine.

Ces scripts font fonctionner les interactions du site. Commencez par regarder à quoi ils servent, sur quelles pages ils sont nécessaires et à quel moment ils doivent démarrer. Certains peuvent être supprimés, d’autres chargés lorsque la personne utilise la fonction concernée.

Une architecture en îlots, comme celle d’Astro, permet de rendre certains composants interactifs séparément. Cette possibilité aide à maîtriser le code envoyé au navigateur ; les scripts ajoutés au projet doivent ensuite être examinés eux aussi. Documentation Astro.

2. Donner aux images une taille adaptée à leur usage

La photo originale d’une réalisation peut être utile pour préparer vos supports. Votre visiteur a surtout besoin d’une image nette à la taille où elle s’affiche.

Préparez des dimensions adaptées aux écrans visés, comparez la compression et les formats comme WebP ou AVIF, puis vérifiez que les détails importants restent lisibles. Le résultat dépend du fichier de départ : mesurez le poids obtenu plutôt que de prévoir la même réduction pour toutes les photos. Choisir un format d’image — web.dev.

Les images situées plus bas dans la page peuvent être chargées à l’approche de leur affichage. L’image principale visible dès l’ouverture doit, elle, pouvoir arriver sans ce retard. Chargement différé des images — web.dev.

3. Garder les polices utiles à l’identité du site

La police des titres participe à votre identité. Cela ne justifie pas de charger toutes ses variantes sur chaque page.

Regardez les familles et les graisses réellement utilisées, puis les fichiers téléchargés pour les afficher. Limiter ces fichiers et les caractères qu’ils contiennent permet de réduire leur poids. Il faut conserver les accents, les signes et les alphabets nécessaires à vos contenus. Bonnes pratiques pour les polices — web.dev.

Sur le site d’ADDEQUA, les polices sont hébergées localement. Leur chargement ne dépend donc pas d’un service de polices tiers. Leur poids et leurs conditions de chargement restent à contrôler.

4. Mesurer les parcours que vos visiteurs utilisent

Une page d’accueil allégée ne raconte pas ce qui se passe dans un formulaire, une fiche produit ou un espace client.

Choisissez les parcours importants, relevez ce qu’ils chargent et comparez les mêmes étapes avant et après une modification. Gardez des conditions de test comparables : appareil, réseau et état du cache. Vous pouvez ensuite fixer un budget de poids de page, une limite à surveiller lors des prochaines évolutions.

EcoIndex fournit un indicateur fondé sur la structure de la page, les requêtes et les données transférées. Ses estimations environnementales reposent sur un modèle ; elles ne mesurent pas directement toute l’empreinte du service. Méthode EcoIndex.

Vérifiez également que la personne peut toujours terminer sa démarche, y compris sur un appareil moins récent. La mesure doit aider à préserver un service utilisable.

5. Dimensionner l’hébergement et examiner ses conditions d’exploitation

L’hébergement mérite les mêmes questions que les pages : quelles ressources sont nécessaires, lesquelles restent actives sans être utilisées et quelles données doivent être conservées ?

Examinez le dimensionnement du service et les informations que l’hébergeur fournit sur l’énergie, l’eau et la durée de vie de ses équipements. Le Référentiel général d’écoconception de services numériques propose des critères pour documenter ces choix. RGESN — rubrique Hébergement.

L’architecture de référence d’ADDEQUA associe Clever Cloud pour les solutions web et Scaleway pour certaines données ou briques de stockage, selon le projet. Cette répartition décrit un choix d’architecture ; sa sobriété doit être vérifiée sur les ressources et les conditions d’exploitation réellement retenues.

Votre site a grandi par petites touches et vous ne savez plus ce qui ralentit ses pages ? Partons d’un parcours précis : ce que votre visiteur cherche, ce qu’il doit attendre et l’action qu’il veut terminer.

Ce point de départ permet d’étudier des améliorations ciblées, avec des effets à vérifier avant de décider d’une refonte plus large.