WWW.GREEN.FR
Because your website CAN save the planet ;)
Start
Welcome to the beginning of a unique experience!
Cette visite virtuelle va redéfinir ta facon de concevoir tes sites web, afin qu'ils impactent la planète le moins possible, et tu verras que tu as tout à y gagner !
Le but du jeu ?
Scénario : Léa doit refondre 5 pages d'un site client en mode "éco"5 niveaux = 5 pages du site à optimiser Ready? C'est parti ->
Info
Info
Info
Info
Info
RÉCAPITULATIF
1. Les vidéos représentent 60% du trafic web mondial. Pour un hero, privilégie les images optimisées (WebP/AVIF) avec animations CSS plutôt qu'une vidéo.2. 70% du poids moyen d'une page web vient des images. Lazy loading + formats modernes (WebP/AVIF) + responsive = division par 10 du poids total.3; Chaque requête HTTP = infrastructure réseau activée (routeurs, data centers). Réduire le nombre de requêtes est plus efficace que réduire leur taille individuelle.4. Pour un site vitrine sans fonctionnalités complexes, un CMS est surdimensionné. Un site statique est 20x moins polluant : pas de requêtes base de données, pas de calculs serveur à chaque visite. 5. L'hébergement représente 30% de l'empreinte IT d'un site. Choisir un hébergeur vert (Infomaniak, GreenGeeks) + région bas-carbone peut diviser l'impact par 5.
Bien joué !
Problème
Poids de la page : 15 MoTemps de chargement : 8s (4G)CO2 par visite : 3,5g10 000 visites/mois = 420 kg CO2/an (équivalent : 2 000 km en voiture)
Bonne réponse !
Poids : 200 KoÉconomie : 95% de CO2, chargement 12x plus rapide
"Excellent ! Les images WebP pèsent 25-35% moins lourd que JPEG. L'animation CSS consomme 10x moins que la vidéo."
Next
Mauvaise réponse :(
Garder la vidéo mais la compresser en 720pPoids : 4 MoÉconomie : 70% de CO2La vidéo reste énergivore. Une image + animation CSS serait plus pertinente pour un hero. Ajouter du lazy loading pour charger la vidéo plus tardPoids : toujours 12 MoÉconomie : 0% (la vidéo sera quand même téléchargée)Le lazy loading est utile pour les éléments en bas de page, mais ici la vidéo est immédiatement visible. Bonne réponse : Remplacer par une image optimisée WebP + animation CSS
"Les vidéos représentent 60% du trafic web mondial. Pour un hero, privilégie les images optimisées (WebP/AVIF) + animations CSS."
Next
Problème
50 images × 2,5 Mo = 125 Mo totalTemps de chargement : 45 secondes (4G)CO2 par visite : 28g5 000 visites/mois = 1 680 kg CO2/an (équivalent : vol Paris-Rome)
Bonne réponse !
Poids initial : 2 Mo (8 images visibles) Économie : 98% de CO2 au chargement
"Parfait ! Le lazy loading charge les images quand l'utilisateur scrolle."
Next
Mauvaise réponse :(
Compresser toutes les images à 80% de qualitéPoids : 40 MoÉconomie : 68% de CO2On charge toujours 50 images d'un coup. Ajoute du lazy loading pour ne charger que ce qui est visible.Mettre toutes les images sur un CDNPoids : toujours 125 MoÉconomie : 0% (même volume de données)Feedback : "Un CDN accélère la livraison mais ne réduit pas le poids. Le problème reste entier : 125 Mo à télécharger." Bonne réponse : Implémenter lazy loading
70% du poids moyen d'une page web vient des images. Lazy loading + formats modernes (WebP/AVIF) + responsive = division par 10 du poids.
Next
Bonne réponse !
1 requête × 80 Ko = 80 KoÉconomie : 92% de requêtes, 87% de CO2
"Excellent ! Les multiples requêtes consomment énormément d'énergie réseau. Une API bien conçue agrège les données côté serveur."
Next
Mauvaise réponse :(
Même nombre de requêtes la première foisÉconomie : 60% de CO2 (sur les visites suivantes)"Le cache aide, mais ne résout pas le problème initial : 127 requêtes lors du premier chargement." Bonne réponse : Agréger les données : 1 seule requête pour tout le dashboard
Chaque requête HTTP = infrastructure réseau activée (routeurs, data centers). Réduire le nombre de requêtes est plus efficace que réduire leur taille.
Next
Problème
127 requêtes × 5 Ko = 635 Ko de donnéesMais surtout : 127 allers-retours serveurTemps de chargement : 6 secondesCO2 : 1,5g par visite (infrastructures réseau)2 000 visites/jour = 1 095 kg CO2/an
Problème
2,8 Mo de ressources chargées (dont 1,2 Mo de plugins inutilisés)Temps de chargement : 8 secondes (mobile)CO2 par visite : 3,5g50 000 visites/mois = 2 100 kg CO2/an
Bonne réponse !
150 Ko au totalÉconomie : 95% de poids, 90% de CO2
"Parfait ! Pour un site vitrine sans fonctionnalités complexes, un site statique est imbattable : rapide, sécurisé, écolo. Les pages sont déjà prêtes, pas de calculs serveur à chaque visite."
Next
Mauvaise réponse :(
B) Garder WordPress mais désactiver les plugins inutiles1,1 Mo (800 Ko de WordPress restent)Économie : 60% de poidsWordPress reste lourd pour un simple blog. Chaque visite génère des requêtes base de données et du PHP. Pour du contenu qui ne change pas souvent, c'est du gaspillage.C) Ajouter un plugin de cache WordPress (WP Super Cache)Toujours 2,8 Mo la première foisÉconomie : 40% de CO2 (seulement pour les visiteurs suivants)Le cache aide mais ne résout pas le problème de fond : trop de ressources chargées. Et la première visite reste très lourde. Bonne réponse : Passer à un site statique (HTML/CSS pur) généré avec un outil simple
Un CMS comme WordPress, c'est génial pour un site avec blog actif, e-commerce, espace membres... Mais pour un simple site vitrine ? C'est comme prendre un camion pour acheter du pain. Le statique suffit et pollue 20x moins.
Next
Problème
Serveur : 500W de consommation continueMix énergétique Virginie : 40% charbonCO2 annuel : 1 750 kg (équivalent : 8 000 km en voiture)Taux d'utilisation moyen : 12% (88% de gaspillage)
Bonne réponse !
Serveurs alimentés 100% renouvelableÉconomie : 85% de CO2
"Excellent ! Les hébergeurs verts utilisent des énergies renouvelables + PUE optimisé. Le serverless s'adapte à la charge réelle."
Next
Mauvaise réponse :(
Activer l'autoscaling pour éteindre des instances la nuitRéduction 40% de la consoÉconomie : 40% de CO2Feedback : "Bien ! Mais le mix énergétique reste carboné. Un hébergeur vert + serverless serait optimal."Installer des panneaux solaires sur le data centerCoût prohibitif, impact limitéÉconomie : 20% de CO2 (seulement en journée)Feedback : "Utopique. Tu n'as pas accès au data center. Change d'hébergeur, c'est immédiat et efficace." Bonne réponse : Migrer vers un hébergeur vert (Ex2, GreenGeeks) + serverless
L'hébergement représente 30% de l'empreinte IT d'un site. Choisir un hébergeur vert + région bas-carbone peut diviser l'impact par 5.
Next
WWW.GREEN.FR
MALHIS Nadia
Created on January 27, 2026
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Basic Interactive Microsite
View
Beauty catalog mobile
View
3D Corporate Reporting
View
Higher Education Microsite
View
Basic Shapes Microsite
View
Microsite Vibrant Travel Guide
View
Tourism Guide Microsite
Explore all templates
Transcript
WWW.GREEN.FR
Because your website CAN save the planet ;)
Start
Welcome to the beginning of a unique experience!
Cette visite virtuelle va redéfinir ta facon de concevoir tes sites web, afin qu'ils impactent la planète le moins possible, et tu verras que tu as tout à y gagner !
Le but du jeu ?
Scénario : Léa doit refondre 5 pages d'un site client en mode "éco"5 niveaux = 5 pages du site à optimiser Ready? C'est parti ->
Info
Info
Info
Info
Info
RÉCAPITULATIF
1. Les vidéos représentent 60% du trafic web mondial. Pour un hero, privilégie les images optimisées (WebP/AVIF) avec animations CSS plutôt qu'une vidéo.2. 70% du poids moyen d'une page web vient des images. Lazy loading + formats modernes (WebP/AVIF) + responsive = division par 10 du poids total.3; Chaque requête HTTP = infrastructure réseau activée (routeurs, data centers). Réduire le nombre de requêtes est plus efficace que réduire leur taille individuelle.4. Pour un site vitrine sans fonctionnalités complexes, un CMS est surdimensionné. Un site statique est 20x moins polluant : pas de requêtes base de données, pas de calculs serveur à chaque visite. 5. L'hébergement représente 30% de l'empreinte IT d'un site. Choisir un hébergeur vert (Infomaniak, GreenGeeks) + région bas-carbone peut diviser l'impact par 5.
Bien joué !
Problème
Poids de la page : 15 MoTemps de chargement : 8s (4G)CO2 par visite : 3,5g10 000 visites/mois = 420 kg CO2/an (équivalent : 2 000 km en voiture)
Bonne réponse !
Poids : 200 KoÉconomie : 95% de CO2, chargement 12x plus rapide
"Excellent ! Les images WebP pèsent 25-35% moins lourd que JPEG. L'animation CSS consomme 10x moins que la vidéo."
Next
Mauvaise réponse :(
Garder la vidéo mais la compresser en 720pPoids : 4 MoÉconomie : 70% de CO2La vidéo reste énergivore. Une image + animation CSS serait plus pertinente pour un hero. Ajouter du lazy loading pour charger la vidéo plus tardPoids : toujours 12 MoÉconomie : 0% (la vidéo sera quand même téléchargée)Le lazy loading est utile pour les éléments en bas de page, mais ici la vidéo est immédiatement visible. Bonne réponse : Remplacer par une image optimisée WebP + animation CSS
"Les vidéos représentent 60% du trafic web mondial. Pour un hero, privilégie les images optimisées (WebP/AVIF) + animations CSS."
Next
Problème
50 images × 2,5 Mo = 125 Mo totalTemps de chargement : 45 secondes (4G)CO2 par visite : 28g5 000 visites/mois = 1 680 kg CO2/an (équivalent : vol Paris-Rome)
Bonne réponse !
Poids initial : 2 Mo (8 images visibles) Économie : 98% de CO2 au chargement
"Parfait ! Le lazy loading charge les images quand l'utilisateur scrolle."
Next
Mauvaise réponse :(
Compresser toutes les images à 80% de qualitéPoids : 40 MoÉconomie : 68% de CO2On charge toujours 50 images d'un coup. Ajoute du lazy loading pour ne charger que ce qui est visible.Mettre toutes les images sur un CDNPoids : toujours 125 MoÉconomie : 0% (même volume de données)Feedback : "Un CDN accélère la livraison mais ne réduit pas le poids. Le problème reste entier : 125 Mo à télécharger." Bonne réponse : Implémenter lazy loading
70% du poids moyen d'une page web vient des images. Lazy loading + formats modernes (WebP/AVIF) + responsive = division par 10 du poids.
Next
Bonne réponse !
1 requête × 80 Ko = 80 KoÉconomie : 92% de requêtes, 87% de CO2
"Excellent ! Les multiples requêtes consomment énormément d'énergie réseau. Une API bien conçue agrège les données côté serveur."
Next
Mauvaise réponse :(
Même nombre de requêtes la première foisÉconomie : 60% de CO2 (sur les visites suivantes)"Le cache aide, mais ne résout pas le problème initial : 127 requêtes lors du premier chargement." Bonne réponse : Agréger les données : 1 seule requête pour tout le dashboard
Chaque requête HTTP = infrastructure réseau activée (routeurs, data centers). Réduire le nombre de requêtes est plus efficace que réduire leur taille.
Next
Problème
127 requêtes × 5 Ko = 635 Ko de donnéesMais surtout : 127 allers-retours serveurTemps de chargement : 6 secondesCO2 : 1,5g par visite (infrastructures réseau)2 000 visites/jour = 1 095 kg CO2/an
Problème
2,8 Mo de ressources chargées (dont 1,2 Mo de plugins inutilisés)Temps de chargement : 8 secondes (mobile)CO2 par visite : 3,5g50 000 visites/mois = 2 100 kg CO2/an
Bonne réponse !
150 Ko au totalÉconomie : 95% de poids, 90% de CO2
"Parfait ! Pour un site vitrine sans fonctionnalités complexes, un site statique est imbattable : rapide, sécurisé, écolo. Les pages sont déjà prêtes, pas de calculs serveur à chaque visite."
Next
Mauvaise réponse :(
B) Garder WordPress mais désactiver les plugins inutiles1,1 Mo (800 Ko de WordPress restent)Économie : 60% de poidsWordPress reste lourd pour un simple blog. Chaque visite génère des requêtes base de données et du PHP. Pour du contenu qui ne change pas souvent, c'est du gaspillage.C) Ajouter un plugin de cache WordPress (WP Super Cache)Toujours 2,8 Mo la première foisÉconomie : 40% de CO2 (seulement pour les visiteurs suivants)Le cache aide mais ne résout pas le problème de fond : trop de ressources chargées. Et la première visite reste très lourde. Bonne réponse : Passer à un site statique (HTML/CSS pur) généré avec un outil simple
Un CMS comme WordPress, c'est génial pour un site avec blog actif, e-commerce, espace membres... Mais pour un simple site vitrine ? C'est comme prendre un camion pour acheter du pain. Le statique suffit et pollue 20x moins.
Next
Problème
Serveur : 500W de consommation continueMix énergétique Virginie : 40% charbonCO2 annuel : 1 750 kg (équivalent : 8 000 km en voiture)Taux d'utilisation moyen : 12% (88% de gaspillage)
Bonne réponse !
Serveurs alimentés 100% renouvelableÉconomie : 85% de CO2
"Excellent ! Les hébergeurs verts utilisent des énergies renouvelables + PUE optimisé. Le serverless s'adapte à la charge réelle."
Next
Mauvaise réponse :(
Activer l'autoscaling pour éteindre des instances la nuitRéduction 40% de la consoÉconomie : 40% de CO2Feedback : "Bien ! Mais le mix énergétique reste carboné. Un hébergeur vert + serverless serait optimal."Installer des panneaux solaires sur le data centerCoût prohibitif, impact limitéÉconomie : 20% de CO2 (seulement en journée)Feedback : "Utopique. Tu n'as pas accès au data center. Change d'hébergeur, c'est immédiat et efficace." Bonne réponse : Migrer vers un hébergeur vert (Ex2, GreenGeeks) + serverless
L'hébergement représente 30% de l'empreinte IT d'un site. Choisir un hébergeur vert + région bas-carbone peut diviser l'impact par 5.
Next