Au lancement de mon activité, je n’ai pas hésité une seconde à créer moi-même mon site web (celui-ci :-). Après sa mise en ligne, j’ai réalisé que je pouvais l’améliorer pour limiter son impact environnemental. J’ai donc fait appel à une personne spécialisée en éco-conception web pour m’accompagner dans cette démarche. Voici le travail réalisé ensemble – ce que j’ai pu faire moi-même et ce que j’ai délégué.
Précision avant d’entrer dans le vif du sujet : l’analyse de mon site avant son optimisation a montré un résultat globalement satisfaisant. Les principales raisons : le choix dès le départ d’un thème WordPress connu par sa légèreté (GeneratePress dans mon cas, mais il en existe d’autres comme Astra et OceanWp), une structure de site relativement simple et un contenu média sobre.
Le moment me semblait justement idéal pour aller encore plus en profondeur dans le travail d’optimisation afin d’adopter les bonnes pratiques de l’éco-conception web, sans me sentir débordée par l’ampleur de la tâche.
Pour m’aider dans la démarche, j’ai fait appel à Fabien Perot, spécialiste de l’éco-conception web.
Sommaire de l’article
- Situation de départ
- Optimisation réalisée moi-même
- Optimisation technique que j’ai déléguée
- Diagnostic après optimisation
- Conclusion
Sur la ligne de départ : ça donne quoi ?
Fabien a commencé par analyser mon site à l’aide de deux outils de mesure de performance de sites web :
- GT Metrix, qui analyse la performance du site en proposant une classification par grade (le meilleur étant A) et une analyse des éléments du site qui peuvent être optimisés.
- PageSpeed Insight, un outil Google, qui mesure la vitesse de chargement des pages, ainsi que leur poids, pour la version ordinateur et mobile du site web.
Il existe d’autres outils comme ecoindex, ecometer ou encore l’extension GreenIT-Analysis, qui réalisent un travail d’analyse similaire.
Les résultats pour mon site avant optimisation :
- Sur GT Metrix, la note globale était un grade “B” et le niveau de performance : 86%.
- Avec Google PageSpeed : mon site était déjà bien optimisé pour ordinateur avec un résultat de 97/100. Sur mobile, j’étais dans le rouge avec un résultat de 45/100.
Ce travail d’audit a permis d’identifier les leviers d’action pour limiter l’impact environnemental de mon site, mais également pour en améliorer les performances, les deux démarches allant de pair. J’ai laissé à Fabien les éléments plus technique, j’ai gardé ce qui était accessible et utile à maîtriser pour le futur, par exemple les tâches récurrentes.
Ce que j’ai réalisé moi-même
Suppression des extensions inutiles
Sur WordPress, les multiples extensions facilitent le travail de conception du site. Certaines sont franchement utiles (par exemple Yoast SEO qui permet d’optimiser son site pour les moteurs de recherche), d’autres facilitent le travail technique de tâches non répétitives qui peuvent aussi être faites manuellement.
J’ai supprimé les extensions peu utiles, celles qui faisaient doublon, celles qui n’apportaient qu’une valeur ajoutée limitée. L’objectif : viser la simplicité, l’un des principes de l’éco-conception web.
Compression des images
J’ai réduit le poids des images de mon site en utilisant le format webp, qui offre une très bonne capacité de compression, tout en conservant une bonne qualité visuelle à l’écran.
Pour y parvenir, j’avais deux options :
- Convertir les images en amont via un outil en ligne comme Squoosh et les charger ensuite sur WordPress.
- Utiliser une extension WordPress comme WebP Converter for Media, qui réalise le travail automatiquement.
J’ai opté pour la seconde option qui fonctionne très bien. Voilà un exemple d’extension que j’ai conservé vu qu’elle me facilite une tâche répétitive, tout en réduisant l’impact environnemental de mon site.
Redimensionnement des images
A l’aide d’un logiciel image (tel que Photoshop ou Gimp), j’ai redimensionné mes photos pour leur donner la taille exacte d’affichage à l’écran en pixels.
L’optimisation technique que j’ai déléguée
Compression des codes JavaScript, CSS et HTML
Fabien a fait le grand ménage dans mon code (suppression des blancs, commentaires inutiles, etc.) pour d’une part, alléger mon site, et d’autre part, ne générer qu’un fichier CSS et JavaScript dans lesquels tout est réuni, plutôt que des dizaines. Ce point a permis de diminuer fortement le nombre de requêtes http sur mon site (en clair, ça veut dire qu’il y a moins d’échange de données entre le navigateur de l’internaute et le serveur web où mon site est hébergé).
Auto-hébergement des polices d’écriture
L’hébergement de mes polices d’écriture sur mon serveur web a permis de réduire les requêtes vers des serveurs tiers (ex : vers Google, pour les Google fonts), d’optimiser les fichiers css et de s’assurer à tout moment la disponibilité des polices de caractère. Cette démarche technique réalisée par Fabien a également contribué à la diminution du nombre de requêtes http sur mon site.
Installation d’un système de cache
Avec un site WordPress, c’est important de mettre en place un système de cache, car celui-ci permet de télécharger sur l’ordinateur de l’internaute les éléments communs à plusieurs pages du site, par exemple les feuilles de styles. Quand l’internaute revient sur le site, les données sont alors disponibles en local, ce qui évite un certain nombre de requêtes vers le serveur et permet de charger le site plus rapidement.
À l’arrivée : le diagnostic après optimisation de mon site
Après optimisation, les performances de mon site sont les suivantes :
- Le poids de ma page d’accueil a fondu de 50%.
- Le nombre de requêtes http a fortement diminué (-70%).
- Le temps de chargement des pages a permis de gagner 1 seconde (30% plus rapide).
- la taille de la base de données a été réduite de plus de 95% !
Sur GT Metrix, mon site est passé du grade “B” à “A”. Sur PageSpeed Insight, la vitesse de chargement sur ordinateur a atteint le score de 99/100 et 76/100 sur mobile.
Conclusion
Aujourd’hui, mon site n’est pas exemplaire (je n’ai pas encore changé d’hébergeur web pour rejoindre Infomaniak ou PlanetHoster qui mènent une démarche sérieuse pour limiter leur impact écologique), mon site est cependant plus léger, plus simple, plus performant et le travail réalisé avec Fabien m’a permis de comprendre où se situent les plus importants leviers d’action !
L’idéal, c’est d’envisager l’éco-conception en amont de la création de son site web ! C’est bien plus simple, cela évite de faire le double du travail ou de bricoler pour rattraper des choix non optimaux.
Et si les aspects techniques vous dépassent, mais que déléguer vous fait peur, allez lire cet article de Maude De Goër : elle y explique comment déléguer la conception de son site web éco-conçu lui a permis d’affirmer sa démarche responsable et de se sentir plus légitime dans sa communication.