Un retour d'expérience concret sur cette action de réduction.
Sommaire
- 🥇 Présentation Générale - accès direct
- 💥 Organisation & logistique - accès direct
- 🎬 Les actions déployées - accès direct
- 🧮 Analyse des résultats - accès direct
- 📄 Résultats - accès direct
- 🎤 Conseils - accès direct
🥇 Présentation générale
👩🏫 Entreprise : Carbo
🎯 Action de réduction : Optimiser le temps de réponses des pages de votre site internet et réduire son poids.
💪 Potentiel de réduction :
Plus votre site web est lourd, plus il consomme de l'énergie et donc émet du CO2e :
- De nombreuses images, vidéos, scripts et autres éléments nécessitent plus de puissance de traitement de stockage.
- Les serveurs informatiques génèrent de la chaleur et ont besoin d'être refroidis pour éviter la surchauffe.
- Les sites lourds impliquent une infrastructure réseau plus importante avec plus de transferts de données
💥 Organisation & logistique
⌚ Durée : 2 à 3 mois ( 1 à 2 mois pour l'audit et l'intervention, 1 à 2 mois pour le monitoring des performances)
👨🏫 Responsable du projet : Emmanuel Wattrinet, CMO chez Carbo
👩💼 Nombre de participants au projet : 2
👛 Budget alloué au projet : 1500€ HT
🤖 Compétences minimum requises : fondamentaux en intégration et performance web
🎬 Les actions déployées
Nous avons fait appel à un prestataire externe spécialisé dans l'audit, l'optimisation et le suivi de la performance web de notre site internet.
7 catégories ont été concernées par l'optimisation de la web performance :
🔌 Plugins / Outils
- Mise à jour de l'ensemble des applicatifs utilisés dans le CMS, permettant d'améliorer le temps de chargement,
- Suppression des plugins inutilisés pour libérer de l'espace et limiter le risque sécuritaire,
- Nouveaux plugings plus performants (ex : Imagify, WB Rocket, etc.).
📐 Architecture
- Retardement du rendu de certaines sections et des tâches de fonds inutiles et coûteuses,
- Minification, combinaison et compartimentation des fichiers CSS (langage utilisé par le navigateur pour la mise en page en html et xml).
📶 Médias
- Uniformisation des images en format Webp pour une meilleure optimisation,
- Mise en place d'un lazy-loading ciblé des images et des visuels intégrés (embeds),
- Passage des images en traitement asynchrone.
✏️ Polices d'écriture
- Passage des polices d'écritures en local au format Woff2 pour améliorer le "largest contentful paint" ou LCP (temps nécessaire au principal élément visible de la page pour s'afficher),
- Rationalisation de l'utilisation des polices d'écriture pour limiter la durée de chargement.
👩💼 Styles
- Activation du cache CSS au sein du constructeur de page (page builder) pour améliorer les FCP et LCP (soit le temps nécessaire à l’affichage d’éléments clefs visibles),
- Basculement en local des fichiers de styles (styles sheets) et images (en remplacement d’un réseau CDN peu performant).
🔥 JavaScript
- Minification des fichiers JavaScript en supprimant des éléments inutiles afin de réduire leur poids et améliorer le temps de chargement,
- Report de l'exécution des JavaScript tiers pour réduire le TTTB (Total blocking time) et les tâches longues au chargement initial des pages.
🌀 Serveur / Hébergement
- Passage à un hébergement web plus performant,
- Mise à jour de la version d'Hypertext Preprocessor, ce qui a amélioré les temps de réponse du serveur et de fluidifier la navigation.
🧮 Analyse des résultats
Plusieurs KPI ont été utilisés pour vérifier l'efficacité des actions déployées.
- KPI 1 : le Largest Contentful Paint (LCP)
Cet indicateur est un signal web essentiel qui correspond à la mesure du temps nécessaire au principal élément visible de la page pour s'afficher. Un bon LCP est sous les 2,5 secondes, un mauvais au-delà de 4 secondes.
- KPI 2 : le First Input Delay (FID)
Cet indicateur de performance mesure le temps nécessaire à une page pour être interactive de façon fluide. Un bon FID est sous les 100ms, un mauvais au-delà de 300ms.
- KPI 3 : le Cumulative Layout Shift (CLS)
Cet indicateur de performance mesure la capacité d'une page à proposer une interface dont les éléments restent stables visuellement dans le temps. Un bon CSL est sous 0,1 seconde, un mauvais au-delà de 0,25s.
D'autres KPi peuvent être utilisés pour une analyse plus complète :
- KPI 4 : Le First Contentful Paint (FCP)
Cet indicateur de performance mesure le temps nécessaire au premier élément visible de la page pour s'afficher (image, texte, vidéo, etc.)
- KPI 5 : L'Ineraction to Next Paint (INP)
Cet indicateur de performance mesure la réactivité d'une page suite à une action utilisateur de type sélection au clic, au doigt ou saisie au clavier. Un bon INP doit être inférieur à 200ms, et est mauvais au-delà de 500ms.
- KPI 6 : Le Time to First Byte (TTFB)
Cet indicateur de performance mesure le temps nécessaire à un serveur pour répondre à la première requête du navigateur. Il dépend de la configuration du serveur, de la présence ou non de cache mais aussi de la connexion du visiteur (début, latence).
💡 Pour analyser l'efficacité de votre site internet avec ces 6 KPIs, cliquez ici
📄 Résultats globaux
❌ Avant :
- Page web moins émettrice que 51% des pages testées
- 0,46 gCO2e émis par le site
- Temps nécessaire au 1er élément visible (LCP) de la page pour s'afficher : 4,5s
- Temps nécessaire au principal élément visible (FCP) de la page pour s'afficher : 7,3s
✅ Après :
- Page web moins émettrice que 95 % des pages testées
- 0,05 gCO2e émis par visite
- Temps nécessaire au 1er élément visible (LCP) de la page pour s'afficher : 0,5s
- Temps nécessaire au principal élément visible (FCP) de la page pour s'afficher : 0,9s
🎤 Conseils
"N'hésitez pas à faire appel à une agence spécialisée dans le domaine. Le sujet peut rapidement s'avérer complexe, et c'est leur métier ! Une intervention ponctuelle peut s'avérer très efficace. Au-delà d'une expérience utilisateur renouvelée, la présence en ligne de votre entreprise respectera les grands principes de l'éco-responsabilité, et vous pourrez le crier haut et fort pour inciter votre écosystème à vous suivre !"
Emmanuel Wattrinet, CMO chez Carbo