Un site lent avec une empreinte carbone élevé peut vous coûter plus que vous ne le pensez. Plusieurs études montrent que les utilisateurs s’attendent à ce que votre site se charge en 2s. Si le temps de chargement est plus long, vous risquez de perdre des clients potentiels avant qu’ils n’aient pu voir votre produit. L’optimisation de votre site est donc une étape importante qui vous permettra de diminuer le taux de rebond, et d’améliorer votre référencement.
Optimiser un site ne signifie pas forcément enlever des images ou simplifier l’interface utilisateur (UI). Au contraire, il est possible d’améliorer drastiquement la performance et l’empreinte carbone tout en conservant une expérience utilisateur riche et attractive. En se concentrant sur des ajustements techniques, on peut réduire les temps de chargement et les émissions de CO2 sans altérer l’apparence du site.
Comment optimiser les polices ?
Une première étape clé consiste à installer les polices de caractères (fonts) en local plutôt qu’à les charger depuis des serveurs externes. Pour cela vous pouvez installer les polices manuellement, ou utiliser un plugin gratuit comme Local Google Fonts. Cela évite les requêtes HTTP inutiles vers des CDN tiers comme Google Fonts, qui génèrent du trafic supplémentaire et une latence. En fonction du nombre de fonts utilisés sur votre site, et de la taille de votre site, le résultat sur la performance sera plus ou moins important. Sur ce site, nous avons gagné 4% sur pagespeed.
Comment optimiser le chargement des images ?
L’optimisation consiste d’une part à optimiser le poids de vos images. Pour cela, convertissez vos images en formats modernes comme WebP ou AVIF. Pour cela vous pouvez utilisez :
- – un convertisseur en ligne comme tiny-img
- – utiliser en plugin d’optimisation d’images comme EWW Image Optimizer
- – installer ImageMagick pour convertir vos images en local sur votre PC
Dans un deuxième, vérifier que vos images sont chargées en « lazy load », pour les images après le hero.
Ces modifications permettront d’améliorer le temps de chargement de votre site, et son poids.
Comment améliorer la vitesse de chargement en paramétrant le cache ?
Une troisième étape consiste à installer un plugin de cache comme par exemple LiteSpeed Cache ou wp-optimize et optimiser son paramétrage
- – Améliorer le paramétrage du cache
- – Minifier le CSS et JS
- – Configurez les en-têtes Cache-Control pour une durée optimale
- – Désinstaller les plugins, thèmes et images qui ne sont pas utilisés
Comment améliorer la vitesse de chargement en paramétrant le cache ?
Ces trois étapes : installer les fonts localement pour réduire le nombre de requêtes, optimiser le poids des images et implémenter lazy loading, optimiser le paramétrages nous ont permis de transformer un site lourd en une machine éco-performante. Nous sommes ainsi passé d’une empreinte carbone classé C par website Carbon à A, et d’une performance de 57% sur mobile à 95% testée avec PageSpeed Insights. Pour mesurer, vos résultats il est intéressant à chaque étape de tester la performance de votre site avec pageSpeed Insights ou Website Carbon. Cela permet de voir concrètement l’impact de vos modifications.
Toutes ces optimisations nous ont permis d’optimiser le site en terme d’empreinte carbone qui est passé de C à A, et d’augmenter les performances sur mobiles de 57% à 95%. Le site a donc une vitesse de chargement plus rapide, ce qui réduit le taux de rebond sans qu’aucune image ou texte n’ait été enlevé.