Comment créer des sites web WordPress durables : 10 conseils pratiques

La durabilité est facile à dire, mais plus difficile à quantifier.

Mais en ce qui concerne les sites web, nous disposons désormais d'outils pour le prouver.

Nous avons récemment effectué un test de carbone pour WP Umbrella et nous avons constaté que notre site web est plus propre que 78% de toutes les pages web au niveau mondial. C'est bien, mais nous savons que nous pouvons faire mieux.

Nous avons donc commencé à nous pencher sur ce qu'il faut faire pour créer des sites web WordPress durables. Ce blog est le résultat direct de ce processus : un regard pratique sur le développement de sites web plus écologiques et sur la façon dont vous pouvez l'appliquer à vos propres projets.

Comment mesurer l'empreinte carbone de votre site ?

La première étape de la construction d'un site web WordPress plus durable commence par la compréhension de votre base de référence : quelle quantité de carbone votre site émet-il actuellement par page consultée, et d'où vient cette empreinte ?

Nous vous recommandons de commencer par certains outils. Il s'agit de Website Carbon Calculator et de Digital Beacon. Ils vous donnent un score pour votre site et une ventilation détaillée de ce qui est à l'origine de ces émissions. Digital Beacon analyse également la contribution des images, des polices, des scripts, des feuilles de style et des vidéos.

Le fait d'avoir des chiffres à montrer du doigt rend la durabilité plus facile à mettre en œuvre et plus facile à expliquer aux clients ou aux coéquipiers. Il transforme les idées vagues en mesures claires.

10 façons de créer des sites web WordPress durables

1. Utiliser un hébergement vert alimenté par des énergies renouvelables

Quelle que soit l'efficacité de votre code, l'énergie qui alimente votre site web est importante. L'hébergement écologique est donc un bon point de départ pour tout site durable. Utilisez la Green Web Foundation, qui indique si le centre de données de votre hébergeur fonctionne à l'aide d'énergies renouvelables.

Gardez à l'esprit que tous les hébergeurs ne gèrent pas leurs propres centres de données. Si votre fournisseur ne figure pas dans la liste, cela ne signifie pas nécessairement qu'il n'est pas écologique. Mais cela vaut la peine de leur demander. Et si vous comparez les hébergeurs WordPress gérés, vérifiez s'ils sont partenaires de Google Cloud Platform, qui utilise 100 % d'énergie renouvelable.

L'endroit où votre site est hébergé fait la différence. Changer d'hébergeur ne suffira pas à réparer un site web inefficace, mais c'est un bon point de départ.

2. Fixer un budget CO₂ pour chaque page

Tout comme vous fixez un budget pour les performances ou le temps de chargement, un budget carbone vous donne une limite claire dans laquelle construire. Il fournit également un point de référence commun lors de la prise de décisions en matière de conception et de développement.

Une référence que nous avons trouvée utile est que 1 gramme de CO2 ou moins est un objectif raisonnable en matière de carbone par page vue. Utilisez les outils mentionnés ci-dessus pour estimer l'empreinte de votre page et repérer les points à améliorer, tels que les images surdimensionnées, les scripts lourds ou les feuilles de style.

Ces données facilitent les discussions. Vous voulez ajouter six images supplémentaires ? Vérifiez l'impact sur le budget carbone. Vous envisagez d'intégrer une vidéo dans l'en-tête ? Vérifiez la marge de manœuvre qu'il vous reste. Un budget fait de ces choix une conversation, et non une supposition.

3. Optimiser les images

Les images sont presque toujours l'élément le plus lourd d'une page et l'une des choses les plus faciles à corriger. Voici un flux de travail que vous pouvez utiliser pour optimiser les images :

• Commencez par la compression: Utilisez un outil comme Squoosh pour trouver le paramètre de qualité acceptable le plus bas. Si vous ne voyez pas de différence à 70 %, c'est probablement là qu'il faut s'arrêter.
• Choisissez le bon format: JPEG pour les photos, SVG pour les icônes, WebP dans la mesure du possible. Votre thème ou votre plugin peut souvent gérer le changement de format automatiquement.
• Utilisez des balises d'images réactives: WordPress dispose d'un support intégré, vous les utilisez donc probablement déjà.
• Activez le chargement paresseux: La plupart des thèmes modernes le font par défaut, mais il est bon de vérifier.

Enfin, utilisez un plugin d'optimisation d'image pour automatiser la compression lors du téléchargement. Surveillez la façon dont votre thème gère les vignettes, car certains thèmes génèrent des versions plus grandes que l'image originale. Un bon plugin les compressera également.

La plupart des développeurs savent comment optimiser les images, mais peu d'entre eux le font de manière cohérente. Établissez une règle, automatisez-la et traitez-la comme un enjeu de table.

4. Être stratégique en matière de vidéo

La vidéo peut rehausser un site, mais c'est aussi l'un des éléments les plus gourmands en carbone que vous puissiez ajouter. En particulier lorsqu'elle est en haute résolution, qu'elle est réglée sur la lecture automatique ou qu'elle est utilisée comme élément d'arrière-plan sans but précis.

Si vous intégrez des vidéos, choisissez délibérément des formats et des résolutions adaptés à la manière dont elles seront visionnées. Par exemple, un visiteur qui regarde une vidéo sur son téléphone n'a pas besoin d'une résolution 4K et d'un son surround.

Dans la mesure du possible, laissez les utilisateurs choisir le moment de la lecture d'une vidéo au lieu de la laisser se dérouler automatiquement. La lecture automatique consomme de l'énergie avant même que l'utilisateur ne décide si la vidéo vaut la peine d'être regardée, et les vidéos en arrière-plan sont souvent ignorées de toute façon.

L'une des meilleures choses à faire est de compresser la vidéo avant de la télécharger. Des outils comme HandBrake facilitent cette tâche. En ajustant le débit et la résolution, il est souvent possible de réduire la taille du fichier d'une vidéo de 80 à 90 % sans grande différence visuelle. 

Utilisée de manière réfléchie, la vidéo peut encore avoir sa place dans la conception durable, mais uniquement lorsqu'elle sert un objectif et ne se contente pas de remplir l'espace.

5. Réduire les scripts et les polices de caractères de tiers

Les polices de caractères et les scripts tiers passent souvent inaperçus et ne reçoivent pas toujours la même attention que les images ou les vidéos. Pourtant, ils peuvent alourdir inutilement un site web et avoir un impact similaire sur les performances et les émissions, en particulier lorsqu'ils proviennent de sources externes ou sont chargés dans des formats inefficaces.

L'une des causes les plus fréquentes est la surcharge d'un site en poids de polices et en variantes. De nombreux développeurs incluent des familles entières de polices alors qu'ils n'utilisent en réalité qu'une police ordinaire et une police en gras. Pire encore, certains constructeurs de pages traditionnels utilisent encore des formats tels que TTF, qui ne sont pas aussi compressés que WOFF2.

L'alternative la plus propre est simple : ne chargez que ce dont vous avez besoin. Cela peut signifier limiter le poids des polices, passer à WOFF2 ou utiliser des polices système dans la mesure du possible. Les polices système ne nécessitent pas de requêtes HTTP externes et leur rendu est plus rapide sur les appareils anciens ou les réseaux lents.

Les scripts tiers sont également à surveiller. Chaque bannière de cookies, pixel de suivi et widget intégré entraîne des appels JavaScript et réseau supplémentaires. Essayez de les éviter complètement en supprimant les outils de suivi, les fenêtres contextuelles de cookies et les outils d'analyse qui obligent les utilisateurs à troquer leur vie privée contre la commodité.

Si vous ne souhaitez pas aller aussi loin, c'est également possible. Mais passez en revue la pile d'outils que vous chargez et demandez-vous si chacun d'entre eux est encore nécessaire. Si une fonction n'est pas essentielle ou s'il existe une alternative plus légère, envisagez de la supprimer.

Une typographie claire et un design respectueux de la vie privée ne sont pas seulement meilleurs pour l'utilisateur, mais ils signifient aussi moins de requêtes, moins de JavaScript et un site web WordPress plus durable dans l'ensemble.

6. Activer la mise en cache et réduire les demandes redondantes

Il s'agit là d'un des gains les plus faciles à obtenir, mais à fort impact, en particulier pour les sites WordPress à fort trafic. La mise en cache réduit la nécessité de régénérer le même contenu pour chaque utilisateur.

Au lieu d'envoyer des requêtes au serveur à chaque visite, des versions en cache des pages, des scripts et des feuilles de style de votre site peuvent être stockées dans le navigateur de l'utilisateur, sur le serveur ou à la périphérie (via un CDN). Il en résulte moins d'appels au serveur, des temps de chargement plus rapides et une consommation d'énergie moindre.

Une bonne mise en cache améliore également l'expérience de l'utilisateur, car elle accélère le chargement des pages et le navigateur n'a pas à retélécharger les éléments qu'il possède déjà. Cela est utile sur les réseaux mobiles où la latence et la bande passante sont plus limitées.

Si vous gérez plusieurs sites clients, la mise en cache doit faire partie de votre solution par défaut. Que vous utilisiez la mise en cache au niveau du serveur, un plugin ou des fonctions CDN intégrées, l'objectif est le même : réduire les traitements répétitifs dans la mesure du possible.

7. Test en conditions réelles

Un site qui se charge parfaitement sur l'ordinateur portable d'un développeur ne dit pas tout. Les sites web durables doivent être performants pour les personnes disposant de connexions lentes, de téléphones anciens et de données limitées, car ces conditions sont plus courantes que nous ne voulons l'admettre.

Il vaut donc la peine de tester le comportement de votre site en dehors des environnements idéaux. La simulation d'une connexion 3G, l'utilisation d'un appareil à faible résolution ou la désactivation du Wi-Fi au profit des seules données mobiles peuvent révéler des écarts de performance qui n'apparaissent pas dans les mesures de laboratoire.

Ce type de test permet de repérer les scripts inutiles, les médias non compressés, les polices de caractères surdimensionnées ou les changements de mise en page qui retardent l'utilisation de la page. Lorsqu'un site se charge rapidement et proprement dans des situations moins qu'idéales, il n'est pas seulement meilleur pour l'accessibilité ou le référencement, il est aussi plus économe en énergie.

8. Nettoyez ce que vous n'utilisez pas

Le gonflement d'un site web s'accumule lentement : un plugin inutilisé par-ci, quelques fichiers multimédias restants par-là, quelques projets qui n'ont jamais été publiés. Mais au fil du temps, tout cela ajoute du poids, de la complexité et une charge de serveur inutile.

Un site durable est un site allégé. Cela ne signifie pas qu'il faille tout réduire au strict minimum. Il suffit de supprimer ce qui n'apporte plus de valeur ajoutée. Il vaut la peine de programmer des audits réguliers pour vérifier :

• Plugins et thèmes inutilisés
• Anciennes révisions de postes
• Fichiers multimédias orphelins
• Commentaires indésirables et liens brisés
• Balises ou catégories abandonnées

Ce nettoyage réduit la taille de votre base de données et le nombre de requêtes, et simplifie l'administration. Sur les installations à fort trafic ou multisites, il peut même réduire la taille des sauvegardes et accélérer les déploiements.

Même s'il ne fera pas la une des journaux, ce type de nettoyage de printemps est l'un des moyens les plus simples de réduire la charge sur le serveur et de rendre votre site Web WordPress durable.

9. Améliorer la navigation et réduire la fatigue du clic

Plus l'utilisateur met de temps à trouver ce qu'il cherche, plus votre site consomme de l'énergie et plus il est susceptible d'abandonner complètement. Chaque clic supplémentaire, chaque redirection ou chaque rechargement absorbe les ressources du serveur et de l'appareil de l'utilisateur. Cela peut paraître anodin, mais sur des milliers de visiteurs, cela s'accumule.

Une navigation claire, une hiérarchie claire et un flux de pages logique aident les utilisateurs à se rendre là où ils doivent aller en moins d'étapes. Des en-têtes collants, des liens internes et des pages d'atterrissage ciblées réduisent la nécessité de recharger plusieurs pages pour accomplir une seule tâche.

Et il y a un autre avantage : des parcours plus rapides sur votre site signifient de meilleurs taux de conversion et moins d'errance et de frustration pour les utilisateurs. Si les internautes peuvent se rendre là où ils le souhaitent en deux clics au lieu de six, tout le monde y gagne.

10. Construire pour la longévité

Il est facile de penser à la durabilité en termes de kilo-octets et de carbone, mais il s'agit aussi de savoir combien de temps votre site reste fonctionnel, maintenable et pertinent. Chaque reconstruction a un coût. Le temps, l'énergie, les ressources d'hébergement et l'attention humaine sont autant d'éléments gaspillés lorsqu'un site s'agrandit trop rapidement ou se casse la figure après la prochaine mise à jour.

C'est pourquoi la réflexion à long terme est l'une des formes de durabilité les plus négligées. Choisissez des outils et des plugins qui font l'objet d'une maintenance active, écrivez un code propre et documenté pour que quelqu'un d'autre (ou vous) puisse travailler dessus plus tard, et concevez votre site avec souplesse pour que le contenu et la mise en page puissent évoluer sans nécessiter une refonte complète.

Un site qui dure 5 ans avec des mises à jour mineures sera toujours plus durable qu'un site qui doit être retravaillé tous les 18 mois. Un code plus propre, moins de reconstructions et des décisions plus intelligentes aujourd'hui signifient moins d'émissions et moins d'épuisement des développeurs plus tard.

Exemples concrets de sites web WordPress durables

Pour donner une idée de ce à quoi ressemble un site web à faible émission de carbone, voici comment quelques sites bien connus se classent sur le Website Carbon Calculator :

1. Wikipedia.org

• Estimation des émissions de CO₂ par page vue : 0.02g
• Plus propre que 98 % des sites web testés

2. Impactmanagementplatform.org

• Estimation des émissions de CO₂ par page vue : 0.09g
• Plus propre que 92 % des sites web testés

3. WholegrainDigital.com

• Estimation des émissions de CO₂ par page vue : 0.08g
• Plus propre que 93 % des sites web testés

Conclusion

Nous avons fait de la vitesse un élément non négociable. Il est temps de traiter le développement durable de la même manière. 

Aujourd'hui, il existe des outils pour mesurer les émissions, des pratiques pour les réduire et des exemples concrets qui prouvent que cela fonctionne.

Certains changements sont d'ordre technique, comme la compression d'images ou la suppression de scripts inutilisés. D'autres sont structurels, comme l'établissement d'un budget carbone au début d'un projet. Mais aucun d'entre eux ne nécessite de compromis importants. Dans la plupart des cas, on obtient un site web plus rapide, plus simple et plus facile à entretenir.

Si vous construisez des sites WordPress pour vos clients, la durabilité fait partie d'une construction responsable. Et plus vite nous le traiterons de cette manière, mieux le web se portera.