Les bonnes pratiques d'éco conception web
Chaque site web, de par son existence et par la suite par ses visiteurs, a un impact écologique en terme de consommation d'énergie, donc d'émission de CO2. Cet impact est d'autant plus fort que le site est visité, et que sa vie est longue. Nous travaillons donc sur une liste de bonnes pratiques, pour le limiter à son minimum.
L'agence Advency s'est fixé un objectif : sauver le monde.
Enfin, pour commencer, faire de son mieux pour éviter de le détruire. Pour cela, nous changeons progressivement notre façon de concevoir les projets et de développer.
Alors, que faisons-nous ?
Nous faisons des tests, nous réfléchissons, et nous mettons en place de plus en plus de bonnes pratiques pour que les sites que nous créons aient l'impact le plus limité possible.
Disclaimer : la liste de bonnes pratiques ci-dessous n'est ni parfaite ni absolue. Elle est le résultat de nos recherches, expérimentations et avancées actuelles, et elle a vocation à s'enrichir encore. Mais comme notre objectif est collectif et qu'il s'agit d'une lutte commune quand il s'agit de sauver la planète, on vous la partage.
Poids des pages
Notre objectif est de fixer un "budget poids" par page à ne pas dépasser pour garder un site léger. Nous l'avons fixé à 1Mo, l'idéal étant si possible d'être à moins de 800ko/page.
Bonnes pratiques conception graphique et UX/UI
- Remplacer les grandes images par des images SVG de moins de 100ko
- Limiter le nombre de vignettes de contenu
- Éviter les sliders et carrousels
- Éviter les pages trop longues
- Limiter le nombre de polices d’écritures et de graisses utilisées
Bonnes pratiques en développement
- Utilisation de 2 sprites (compatibles Retina et non Retina)
- Charger seulement le CSS utile sur la page (pas de compilation globale)
- Charger seulement le JS utile sur la page (pas de compilation globale)
- Différer le chargement des éléments lourds lorsque l’internaute effectue une action (images, vidéo, etc) : au défilement de la page, au survol d’un élément, ect
- Éviter le chargement de scripts externes trop gourmands en requêtes (Google map, Recaptcha, etc)
- Limiter le nombre de requêtes
- Compresser les fichiers Javascript
- Compresser les fichier CSS
- Mettre le site en cache
- Utiliser l’extension Website Footprint pour avoir un l'aperçu de l'impact de la page
- Éviter le chargement des éléments invisibles
- Servir des images de taille adaptée à l’appareil (pour l'affichage mobile notamment)
- Limiter la taille des images stockées sur le serveur (redimensionnement à l'insertion BO et non à la volée)
- Optimiser le poids des images au maximum, utilisation des nouveaux formats d’image (webp, jpeg2000, etc) et utiliser des images systématiquement compressées avec TinyPNG
- Nettoyer tout le code dupliqué, utiliser un linter configuré en ce sens
Configurations serveur
- Configurer le serveur web pour servir des ressources en cache
- Configurer l’expiration des fichiers statiques pour éviter un nouveau téléchargement à chaque chargement de la page
Le respect de ces bonnes pratiques et plus largement de la philosophie de l'éco-conception web permet d'avoir un site éco-conçu qui va non seulement émettre moins de CO2 au stockage et à la consultation, mais apporte également son lot d'avantages en terme de performances, de SEO, de maintenance et d'accessibilité. Alors go green :)