@cnamts/synapse 1.0.26 → 1.1.0

package/src/stories/EcoConception/datas/bonnes_pratiques_essentielles.json

@@ -0,0 +1,1018 @@
+[
+  {
+    "id": "media-choice",
+    "actionNumbers": [
+      48
+    ],
+    "title": "Choisir les médias les plus sobres",
+    "audience": "UX / UI",
+    "pillar": {
+      "id": "contents",
+      "title": "Optimiser les contenus"
+    
+    },
+    "summary": "Limiter le volume de données transférées en choisissant le média le plus léger qui permet d’atteindre l’objectif UX et métier.",
+    "objective": "Limiter le volume de données transférées en choisissant le média le plus léger qui permet d’atteindre l’objectif UX et métier.",
+    "do": [
+      "Privilégier le texte ou un schéma simple si cela suffit à expliquer la démarche ou l’information.",
+      "Si une image est nécessaire, l’optimiser : format adapté, recadrage, compression, limitation du nombre par écran.",
+      "Utiliser l’audio plutôt que la vidéo si l’apport visuel est faible."
+    ],
+    "dont": [
+      "Ajouter des vidéos ou carrousels d’images sans bénéfice clair pour l’utilisateur.",
+      "Multiplier les médias décoratifs qui n’apportent rien à la compréhension.",
+      "Utiliser systématiquement la vidéo pour moderniser l’interface."
+    ],
+    "control": [],
+    "tables": [],
+    "impacts": [],
+    "sourcePages": [
+      2
+    ],
+    "priority": "Moyenne",
+    "difficulty": "Faible",
+    "essential": true
+  },
+  {
+    "id": "autoplay",
+    "actionNumbers": [
+      39
+    ],
+    "title": "Désactiver la lecture automatique des médias",
+    "audience": "UX / UI",
+    "pillar": {
+      "id": "contents",
+      "title": "Optimiser les contenus"
+    },
+    "summary": "Empêcher le chargement et la lecture de médias lourds sans action explicite de l’utilisateur.",
+    "objective": "Empêcher le chargement et la lecture de médias lourds sans action explicite de l’utilisateur, pour réduire la consommation de données et améliorer le confort d’usage.",
+    "do": [
+      "Afficher une image de prévisualisation légère avec un bouton « Lire la vidéo ».",
+      "Charger la vidéo ou l’audio uniquement à l’interaction.",
+      "Mettre en avant clairement les contrôles de lecture, pause, volume et sous-titres."
+    ],
+    "dont": [
+      "Lancer automatiquement une vidéo ou un audio à l’ouverture de la page.",
+      "Boucler des animations vidéo en arrière-plan.",
+      "Désactiver ou masquer les contrôles utilisateurs."
+    ],
+    "control": [],
+    "tables": [],
+    "impacts": [],
+    "sourcePages": [
+      3
+    ],
+    "priority": "Haute",
+    "difficulty": "Faible",
+    "essential": true
+  },
+  {
+    "id": "audio-only",
+    "actionNumbers": [
+      59
+    ],
+    "title": "Proposer un mode « écoute seule » pour les vidéos",
+    "audience": "UX / UI",
+    "pillar": {
+      "id": "contents",
+      "title": "Optimiser les contenus"
+    },
+    "summary": "Permettre l’accès au contenu sans charger la vidéo complète lorsque le visuel n’est pas indispensable.",
+    "objective": "Permettre l’accès au contenu sans charger la vidéo complète, particulièrement utile pour les connexions limitées, les utilisateurs mobiles et les besoins d’accessibilité.",
+    "do": [
+      "Proposer une version audio ou un mode « écouter uniquement » lorsque le visuel n’est pas indispensable.",
+      "Ajouter une transcription textuelle du contenu clé pour permettre une consultation encore plus sobre.",
+      "Informer l’utilisateur de la différence de poids entre la version vidéo et la version audio."
+    ],
+    "dont": [
+      "Proposer uniquement la vidéo pour des contenus majoritairement oraux.",
+      "Forcer le téléchargement du flux complet alors que l’utilisateur souhaite seulement écouter.",
+      "Multiplier les formats sans expliquer lequel est le plus économe."
+    ],
+    "control": [],
+    "tables": [],
+    "impacts": [],
+    "sourcePages": [
+      4
+    ],
+    "priority": "Moyenne",
+    "difficulty": "Moyenne",
+    "essential": false
+  },
+  {
+    "id": "animations",
+    "actionNumbers": [],
+    "title": "Limiter les animations et micro-animations",
+    "audience": "UX / UI",
+    "pillar": {
+      "id": "contents",
+      "title": "Optimiser les contenus"
+    },
+    "summary": "Réduire les calculs graphiques et scripts côté client, améliorer l’accessibilité et éviter les distractions.",
+    "objective": "Réduire les calculs graphiques et scripts côté client, améliorer l’accessibilité et éviter les distractions.",
+    "do": [
+      "Utiliser des transitions simples et courtes uniquement pour aider à la compréhension.",
+      "Tester les animations sur des matériels modestes pour vérifier qu’elles ne dégradent pas les performances."
+    ],
+    "dont": [
+      "Créer des animations continues ou décoratives sans utilité fonctionnelle.",
+      "Multiplier les micro-interactions sur chaque hover ou scroll.",
+      "Basculer des contenus importants dans des animations impossibles à lire sans mouvement."
+    ],
+    "control": [],
+    "tables": [],
+    "impacts": [],
+    "sourcePages": [
+      5
+    ],
+    "priority": "Moyenne",
+    "difficulty": "Faible",
+    "essential": false
+  },
+  {
+    "id": "design-system",
+    "actionNumbers": [],
+    "title": "Utiliser le Design System",
+    "audience": "UX / UI",
+    "pillar": {
+      "id": "contents",
+      "title": "Optimiser les contenus"
+    
+    },
+    "summary": "Réduire les temps de conception et de développement, limiter les composants redondants et la dette technique.",
+    "objective": "Réduire les temps de conception et de développement, limiter la création de composants redondants et donc la dette technique, pour un service plus sobre et plus maintenable.",
+    "do": [
+      "Utiliser en priorité les composants et patterns validés du design system.",
+      "Mutualiser les besoins et réintégrer un nouveau composant utile dans le design system.",
+      "S’aligner sur les styles existants pour éviter les variantes inutiles."
+    ],
+    "dont": [
+      "Créer des composants sur mesure pour chaque projet sans vérifier l’existant.",
+      "Multiplier les variations de styles inutiles.",
+      "Développer en parallèle plusieurs bibliothèques de composants non synchronisées."
+    ],
+    "control": [],
+    "tables": [],
+    "impacts": [],
+    "sourcePages": [
+      6
+    ],
+    "priority": "Moyenne",
+    "difficulty": "Moyenne",
+    "essential": false
+  },
+  {
+    "id": "images-compression",
+    "actionNumbers": [
+      56
+    ],
+    "title": "Proposer des images dont le niveau de compression est adapté au contenu et au contexte",
+    "audience": "Dev Front",
+    "pillar": {
+      "id": "contents",
+      "title": "Optimiser les contenus"
+    },
+    "summary": "Adapter format, poids et niveau de compression des images à l’usage réel.",
+    "objective": "Réduire le poids des images tout en conservant une qualité adaptée au contexte d’affichage.",
+    "do": [
+      "Choisir le type de compression en fonction du contenu.",
+      "Compresser les images avec des outils adaptés.",
+      "Tester la qualité après compression sur différents terminaux."
+    ],
+    "dont": [
+      "Utiliser du PNG pour les photos ou images complexes si possible.",
+      "Servir des images 4K pour le web sauf si nécessaire.",
+      "Appliquer une compression trop agressive rendant les artefacts visibles."
+    ],
+    "control": [
+      "Plugin Green IT Analysis : vérifier l’audit « Optimiser les images bitmap » et l’audit « Optimiser les images SVG ».",
+      "L’audit est réussi si les images bitmap et SVG sont optimisées.",
+      "L’audit échoue s’il existe une ou plusieurs images à optimiser."
+    ],
+    "tables": [
+      {
+        "title": "Compression cible et format en fonction du contexte",
+        "headers": [
+          "Contexte",
+          "Icônes/Logos",
+          "Photos",
+          "Arrières-plans",
+          "Visuels"
+        ],
+        "rows": [
+          [
+            "Format",
+            "CSS si possible / SVG",
+            "WebP qualité 70-80% / JPEG progressive",
+            "WebP qualité 50-60%",
+            "WebP qualité 80-90% / AVIF"
+          ],
+          [
+            "Poids cible",
+            "< 10 Ko",
+            "50-150 Ko",
+            "< 100 Ko",
+            "< 300 Ko"
+          ]
+        ]
+      }
+    ],
+    "impacts": [
+      {
+        "label": "Impact écologique",
+        "before": "Image non optimisée de 1 Mo vue par 1 M de visiteurs : ~ 1 tonne de CO₂",
+        "after": "Image optimisée de 200 Ko : ~ 200 kg de CO₂",
+        "gain": "soit -80% d’émission"
+      },
+      {
+        "label": "Impact performance",
+        "before": "Image non optimisée de 1 Mo : ~ 2 à 3 s",
+        "after": "Image optimisée de 200 Ko : ~ 1 à 1,5 s",
+        "gain": "soit 2x moins de temps"
+      }
+    ],
+    "sourcePages": [
+      7,
+      8,
+      9
+    ],
+    "priority": "Haute",
+    "difficulty": "Moyenne",
+    "essential": true
+  },
+  {
+    "id": "videos-compression",
+    "actionNumbers": [
+      58
+    ],
+    "title": "Proposer des vidéos dont le niveau de compression est adapté au contenu et au contexte de visualisation",
+    "audience": "Dev Front",
+    "pillar": {
+      "id": "contents",
+      "title": "Optimiser les contenus"
+    
+    },
+    "summary": "Choisir codec, format et débit adaptés au terminal, au contenu et à la durée.",
+    "objective": "Réduire le poids des vidéos tout en conservant une qualité adaptée au contexte de visualisation.",
+    "do": [
+      "Choisir le bon format : WebM VP9 pour le web, MP4 H.264 pour compatibilité.",
+      "Compresser les vidéos avec des outils adaptés.",
+      "Redimensionner la vidéo avant l’upload.",
+      "Ajouter un poster pour prévisualiser sans charger la vidéo."
+    ],
+    "dont": [
+      "Proposer des vidéos 4K par défaut, surtout sur mobile.",
+      "Activer l’autoplay avec son.",
+      "Servir des vidéos à bitrate trop élevé pour le web.",
+      "Utiliser des GIF animés lourds."
+    ],
+    "control": [
+      "Plugin Green IT Analysis : vérifier que les ressources compressées sont supérieures ou égales à 95%.",
+      "L’audit est réussi si 95 à 100% des ressources sont compressées.",
+      "Si moins de 95% des ressources sont compressées, il y a échec."
+    ],
+    "tables": [
+      {
+        "title": "Compression cible et format en fonction du contexte",
+        "headers": [
+          "Contexte",
+          "Prévention (15/30 sec)",
+          "Tutoriel (5/10 min)",
+          "Streaming (60 min)"
+        ],
+        "rows": [
+          [
+            "Format",
+            "WebM (VP9)",
+            "MP4 (H.264)",
+            "HLS (m3u8) ou DASH"
+          ],
+          [
+            "Poids cible",
+            "< 5 Mo",
+            "< 50 Mo",
+            "< 100 Mo/h"
+          ],
+          [
+            "Astuce",
+            "Désactiver l’autoplay",
+            "Ajouter des chapitres pour faciliter la navigation",
+            ""
+          ]
+        ]
+      }
+    ],
+    "impacts": [
+      {
+        "label": "Impact écologique",
+        "before": "Vidéo non optimisée de 18 Mo vue par 10 000 visiteurs : ~ 180 kg de CO₂",
+        "after": "Vidéo optimisée de 3 Mo : ~ 30 kg de CO₂",
+        "gain": "soit 6x moins d’émission"
+      },
+      {
+        "label": "Impact performance",
+        "before": "Vidéo non optimisée de 18 Mo : ~ 6 s",
+        "after": "Vidéo optimisée de 3 Mo : ~ 1 s",
+        "gain": "soit 6x moins de temps"
+      }
+    ],
+    "sourcePages": [
+      10,
+      11,
+      12
+    ],
+    "priority": "Haute",
+    "difficulty": "Moyenne",
+    "essential": true
+  },
+  {
+    "id": "media-size",
+    "actionNumbers": [
+      66
+    ],
+    "title": "Dimensionner les éléments graphiques et les médias correspondants au contexte d’affichage",
+    "audience": "Dev Front",
+    "pillar": {
+      "id": "contents",
+      "title": "Optimiser les contenus"
+    
+    },
+    "summary": "Éviter de servir une ressource plus grande que nécessaire.",
+    "objective": "Adapter les dimensions des images et vidéos au contexte réel d’affichage.",
+    "do": [
+      "Redimensionner les images et vidéos à la taille maximale nécessaire.",
+      "Utiliser srcset pour servir plusieurs tailles.",
+      "Servir des images différentes selon la résolution de l’écran.",
+      "Adapter la qualité selon le réseau."
+    ],
+    "dont": [
+      "Servir des images en 4K par défaut.",
+      "Ignorer la densité des écrans."
+    ],
+    "control": [
+      "Plugin Green IT Analysis : vérifier l’audit « Ne pas retailler les images dans le navigateur ».",
+      "L’audit est réussi s’il n’y a aucune image retaillée dans le navigateur.",
+      "L’audit échoue s’il y a une ou plusieurs images retaillées dans le navigateur."
+    ],
+    "tables": [
+      {
+        "title": "Dimension cible en fonction du contexte",
+        "headers": [
+          "Contexte",
+          "Mobile étroit",
+          "Mobile large",
+          "Tablette",
+          "Desktop courant"
+        ],
+        "rows": [
+          [
+            "Largeur CSS du slot",
+            "100 à 360 px",
+            "360 à 600 px",
+            "600 à 900 px",
+            "900 à 1400 px"
+          ],
+          [
+            "Taille source conseillée",
+            "320 / 480 px",
+            "480 / 640 px",
+            "640 / 960 px",
+            "960 / 1280 px"
+          ]
+        ]
+      }
+    ],
+    "impacts": [
+      {
+        "label": "Impact écologique",
+        "before": "Image non redimensionnée de 1 Mo vue par 1 M de visiteurs : ~ 1 tonne de CO₂",
+        "after": "Image redimensionnée de 200 Ko : ~ 200 kg de CO₂",
+        "gain": "soit -80% d’émission"
+      },
+      {
+        "label": "Impact performance",
+        "before": "Image non redimensionnée de 1 Mo : ~ 2 à 3 s",
+        "after": "Image redimensionnée de 200 Ko : ~ 1 à 1,5 s",
+        "gain": "soit 2x moins de temps"
+      }
+    ],
+    "sourcePages": [
+      13,
+      14,
+      15
+    ],
+    "priority": "Moyenne",
+    "difficulty": "Moyenne",
+    "essential": true
+  },
+  {
+    "id": "responsive",
+    "actionNumbers": [
+      11
+    ],
+    "title": "S’adapter à différents types de terminaux d’affichage",
+    "audience": "UX / UI",
+    "pillar": {
+      "id": "interaction",
+      "title": "Optimiser l’interaction utilisateur"
+    },
+    "summary": "Garantir une interface utilisable sur différents écrans sans multiplier les versions.",
+    "objective": "Garantir une interface utilisable sur des écrans variés sans multiplier les versions de pages, tout en évitant des mises en page lourdes et complexes.",
+    "do": [
+      "Concevoir d’abord pour des écrans modestes avec des pages sobres.",
+      "Adapter les contenus aux différents breakpoints en limitant les éléments visibles au strict nécessaire.",
+      "Tester la lisibilité et la navigation sur différents appareils."
+    ],
+    "dont": [
+      "Créer une version desktop très riche puis la réduire artificiellement pour le mobile.",
+      "Charger les mêmes images très lourdes pour tous les écrans sans adaptation."
+    ],
+    "control": [],
+    "tables": [],
+    "impacts": [],
+    "sourcePages": [
+      16
+    ],
+    "priority": "Haute",
+    "difficulty": "Moyenne",
+    "essential": true
+  },
+  {
+    "id": "form-requests",
+    "actionNumbers": [
+      18
+    ],
+    "title": "Optimiser les requêtes dans les formulaires",
+    "audience": "UX / UI",
+    "pillar": {
+      "id": "interaction",
+      "title": "Optimiser l’interaction utilisateur"
+    },
+    "summary": "Limiter les allers-retours réseau lors de la saisie utilisateur.",
+    "objective": "Limiter le nombre d’allers-retours réseau en regroupant les informations nécessaires dans une même requête, pour réduire la charge serveur et le temps de traitement.",
+    "do": [
+      "Concevoir des formulaires qui valident plusieurs champs en une seule requête.",
+      "Utiliser des aides à la saisie côté client pour limiter les erreurs et les renvois.",
+      "Regrouper les étapes logiques en écrans cohérents plutôt qu’en nombreuses micro-étapes."
+    ],
+    "dont": [
+      "Appeler le serveur à chaque caractère tapé pour des vérifications non critiques.",
+      "Fragmenter excessivement un formulaire en une multitude d’écrans sans gain UX réel.",
+      "Recharger toute la page pour valider une seule information."
+    ],
+    "control": [],
+    "tables": [],
+    "impacts": [],
+    "sourcePages": [
+      17
+    ],
+    "priority": "Moyenne",
+    "difficulty": "Moyenne",
+    "essential": false
+  },
+  {
+    "id": "notifications",
+    "actionNumbers": [
+      45
+    ],
+    "title": "Limiter les notifications",
+    "audience": "UX / UI",
+    "pillar": {
+      "id": "interaction",
+      "title": "Optimiser l’interaction utilisateur"
+    },
+    "summary": "Notifier uniquement ce qui est utile et laisser le contrôle à l’utilisateur.",
+    "objective": "Réduire le trafic réseau et la sollicitation cognitive, tout en évitant une consultation compulsive du service.",
+    "do": [
+      "Proposer uniquement des notifications réellement utiles pour l’usage.",
+      "Regrouper les notifications plutôt que d’envoyer un message pour chaque micro-événement.",
+      "Permettre à l’utilisateur de configurer la fréquence et le type de notifications."
+    ],
+    "dont": [
+      "Activer par défaut toutes les notifications disponibles.",
+      "Multiplier les alertes temps réel pour des informations non critiques."
+    ],
+    "control": [],
+    "tables": [],
+    "impacts": [],
+    "sourcePages": [
+      18
+    ],
+    "priority": "Haute",
+    "difficulty": "Faible",
+    "essential": true
+  },
+  {
+    "id": "search-results",
+    "actionNumbers": [],
+    "title": "Optimiser le moteur de recherche et l’affichage des résultats",
+    "audience": "UX / UI",
+    "pillar": {
+      "id": "requests",
+      "title": "Limiter les requêtes et le poids"
+    },
+    "summary": "Filtrer avant recherche, paginer et éviter les résultats massifs.",
+    "objective": "Limiter les volumes de données renvoyés par le serveur et affichés à l’écran, en aidant l’utilisateur à cibler sa recherche avant de lancer la requête.",
+    "do": [
+      "Proposer des filtres pertinents avant le lancement de la recherche.",
+      "Afficher les résultats par pages ou chargement progressif avec un nombre raisonnable de résultats par page.",
+      "Afficher clairement le nombre de résultats et les options pour affiner la recherche."
+    ],
+    "dont": [
+      "Afficher d’emblée des milliers de résultats sur une même page avec un scroll infini.",
+      "Relancer la recherche à chaque modification mineure sans action explicite de l’utilisateur.",
+      "Proposer des filtres trop nombreux ou trop techniques."
+    ],
+    "control": [],
+    "tables": [],
+    "impacts": [],
+    "sourcePages": [
+      19
+    ],
+    "priority": "Moyenne",
+    "difficulty": "Moyenne",
+    "essential": false
+  },
+  {
+    "id": "minify",
+    "actionNumbers": [
+      81,
+      82,
+      65,
+      91
+    ],
+    "title": "Compresser et minifier les fichiers CSS, JavaScript, HTML et SVG",
+    "audience": "Dev Front",
+    "pillar": {
+      "id": "requests",
+      "title": "Limiter les requêtes et le poids"
+    },
+    "summary": "Réduire le poids transféré et activer la compression côté serveur.",
+    "objective": "Réduire le poids des fichiers texte transférés au client.",
+    "do": [
+      "Minifier et compresser automatiquement les fichiers en production.",
+      "Activer la compression Gzip/Brotli côté serveur.",
+      "Supprimer le code mort et les dépendances inutilisées."
+    ],
+    "dont": [
+      "Minifier en développement au point de rendre le code illisible.",
+      "Charger des librairies entières pour une seule fonction.",
+      "Négliger la mise en cache des fichiers minifiés.",
+      "Utiliser des outils obsolètes."
+    ],
+    "control": [
+      "Plugin Green IT Analysis : vérifier les audits « Compresser les ressources » et « Minifier les CSS et JS ».",
+      "L’audit compression est réussi si au moins 95% des ressources sont compressées.",
+      "L’audit minification est réussi s’il n’y a aucun fichier CSS ou JS à minifier."
+    ],
+    "tables": [],
+    "impacts": [
+      {
+        "label": "Impact écologique",
+        "before": "Page avec éléments non compressés et non minifiés de 200 Ko vue par 1 M de visiteurs : ~ 200 kg de CO₂",
+        "after": "Page avec éléments compressés et minifiés de 30 Ko : ~ 30 kg de CO₂",
+        "gain": "soit 6,6x moins d’émission"
+      },
+      {
+        "label": "Impact performance",
+        "before": "Page non compressée et non minifiée de 200 Ko : ~ 1 à 1,5 s",
+        "after": "Page compressée et minifiée de 30 Ko : ~ 0,15 à 0,20 s",
+        "gain": "gain important sur le temps d’affichage"
+      }
+    ],
+    "sourcePages": [
+      20,
+      21,
+      22
+    ],
+    "priority": "Haute",
+    "difficulty": "Faible",
+    "essential": true
+  },
+  {
+    "id": "budget",
+    "actionNumbers": [
+      63
+    ],
+    "title": "S’astreindre à un poids maximum par écran et une limite de requête par écran",
+    "audience": "Dev Front",
+    "pillar": {
+      "id": "requests",
+      "title": "Limiter les requêtes et le poids"
+    },
+    "summary": "Définir des budgets mesurables par écran ou parcours.",
+    "objective": "Fixer des limites de poids et de requêtes afin de maîtriser les ressources transférées.",
+    "do": [
+      "Fixer des budgets stricts de poids par écran.",
+      "Fixer une limite de requête par page.",
+      "Vérifier le respect de ces limites."
+    ],
+    "dont": [
+      "Dépasser 2 Mo par écran sans justification.",
+      "Multiplier les requêtes HTTP."
+    ],
+    "control": [
+      "Plugin Green IT Analysis : vérifier les audits « Nombre de requête » et « Taille de la page »."
+    ],
+    "tables": [
+      {
+        "title": "Poids et nombre de requête cible en fonction du contexte",
+        "headers": [
+          "Type d’IHM",
+          "Exemple",
+          "Poids total cible",
+          "Requête cible"
+        ],
+        "rows": [
+          [
+            "Page institutionnelle standard",
+            "Page d’accueil, page d’explication d’un droit ou service",
+            "800 Ko à 1,2 Mo",
+            "25 à 40"
+          ],
+          [
+            "Page de parcours usager",
+            "Connexion, simulation, prise de rdv, contact",
+            "1,2 à 1,8 Mo",
+            "35 à 55"
+          ],
+          [
+            "Tableau de bord / espace connecté",
+            "Accueil assuré, pro de santé, entreprise",
+            "1,5 à 2,5 Mo",
+            "40 à 70"
+          ],
+          [
+            "Moteur de recherche et résultats",
+            "Annuaire, recherche de paiements, liste de documents",
+            "1,5 à 2,5 Mo",
+            "40 à 70"
+          ],
+          [
+            "Formulaire complexe",
+            "Déclarations, saisie multi-étapes, téléservices",
+            "1,5 à 2,5 Mo",
+            "40 à 80"
+          ],
+          [
+            "Fiche riche / page média",
+            "Page avec contenus éditoriaux, graphiques, cartes, aides contextuelles",
+            "1,5 à 3 Mo",
+            "40 à 80"
+          ]
+        ]
+      }
+    ],
+    "impacts": [
+      {
+        "label": "Impact écologique",
+        "before": "Page avec poids de 1 Mo vue par 1 M de visiteurs : ~ 1 tonne de CO₂",
+        "after": "Page optimisée de 200 Ko : ~ 200 kg de CO₂",
+        "gain": "soit -80% d’émission"
+      },
+      {
+        "label": "Impact performance",
+        "before": "Page de 1 Mo : ~ 2 à 3 s",
+        "after": "Page optimisée de 200 Ko : ~ 1 à 1,5 s",
+        "gain": "soit 2x moins de temps"
+      }
+    ],
+    "sourcePages": [
+      23,
+      24,
+      25
+    ],
+    "priority": "Haute",
+    "difficulty": "Moyenne",
+    "essential": true
+  },
+  {
+    "id": "upload-download",
+    "actionNumbers": [
+      54
+    ],
+    "title": "Optimiser l’upload et le download",
+    "audience": "UX / UI",
+    "pillar": {
+      "id": "heavy",
+      "title": "Optimiser les traitements “lourds”"
+    },
+    "summary": "Informer sur les formats et poids acceptés, et éviter les téléchargements complets inutiles.",
+    "objective": "Réduire les échecs de téléchargement et les transferts inutiles en cadrant les formats acceptés et en permettant une gestion plus fine des gros fichiers.",
+    "do": [
+      "Pour l’upload : indiquer clairement le poids maximal et les formats acceptés dès le début du parcours.",
+      "Pour l’upload : proposer des aides vers des outils de compression ou des recommandations de formats.",
+      "Pour le download : permettre un chapitrage, un upload par lots ou un aperçu dans le cas de gros dossiers."
+    ],
+    "dont": [
+      "Laisser l’utilisateur découvrir les limites de poids ou de format uniquement au moment de l’erreur.",
+      "Imposer l’upload d’un unique gros fichier sans alternative.",
+      "Effacer la totalité des fichiers déjà transférés en cas d’échec partiel."
+    ],
+    "control": [],
+    "tables": [],
+    "impacts": [],
+    "sourcePages": [
+      26
+    ],
+    "priority": "Moyenne",
+    "difficulty": "Moyenne",
+    "essential": false
+  },
+  {
+    "id": "static-hosting",
+    "actionNumbers": [
+      27
+    ],
+    "title": "Héberger les ressources statiques dont on est l’émetteur sur un même domaine",
+    "audience": "Dev Front",
+    "pillar": {
+      "id": "heavy",
+      "title": "Optimiser les traitements “lourds”"
+    },
+    "summary": "Limiter les domaines et maîtriser les ressources statiques.",
+    "objective": "Regrouper les ressources statiques maîtrisées afin de limiter les domaines, les cookies et les transferts inutiles.",
+    "do": [
+      "Regrouper les ressources statiques sur le domaine principal.",
+      "Utiliser un sous-domaine statique sans cookies si nécessaire.",
+      "Documenter la règle dans l’architecture et la CI/CD.",
+      "Mutualiser les ressources entre pages ou applications du même domaine."
+    ],
+    "dont": [
+      "Héberger ses propres assets sur des domaines tiers non maîtrisés.",
+      "Multiplier les domaines pour des petites ressources dispersées.",
+      "Servir les ressources statiques depuis un domaine envoyant des cookies applicatifs.",
+      "Changer régulièrement de domaines pour les assets."
+    ],
+    "control": [
+      "Plugin Green IT Analysis : vérifier l’audit « Pas de cookie pour les ressources statiques ».",
+      "L’audit est réussi s’il n’y a aucun cookie pour les ressources statiques.",
+      "L’audit est en échec s’il y a un ou plusieurs cookies pour les ressources statiques."
+    ],
+    "tables": [],
+    "impacts": [
+      {
+        "label": "Impact écologique",
+        "before": "Page de 2 Mo appelant 15 domaines pour charger des ressources statiques : ~ 1,6 tonnes de CO₂",
+        "after": "Page n’appelant qu’un domaine : ~ 1,2 tonnes de CO₂",
+        "gain": "soit -25% d’émission"
+      },
+      {
+        "label": "Impact performance",
+        "before": "First Contentful Paint avec 15 domaines : ~ 3 s",
+        "after": "First Contentful Paint avec 1 domaine : ~ 2 s",
+        "gain": "soit -34% de temps"
+      }
+    ],
+    "sourcePages": [
+      27,
+      28,
+      29
+    ],
+    "priority": "Moyenne",
+    "difficulty": "Moyenne",
+    "essential": false
+  },
+  {
+    "id": "cache",
+    "actionNumbers": [
+      64
+    ],
+    "title": "Instaurer des mécanismes de mise en cache pour les contenus transférés",
+    "audience": "Dev Front",
+    "pillar": {
+      "id": "heavy",
+      "title": "Optimiser les traitements “lourds”"
+    },
+    "summary": "Éviter les recalculs et transferts inutiles grâce à une stratégie de cache.",
+    "objective": "Mettre en cache les ressources et contenus transférés dont le service numérique a le contrôle.",
+    "do": [
+      "Configurer Cache-Control long pour les assets statiques.",
+      "Utiliser le cache-busting via hash de build.",
+      "Activer le cache conditionnel avec ETag ou Last-Modified.",
+      "Configurer CDN avec des règles cache par type."
+    ],
+    "dont": [
+      "Mettre no-cache ou no-store sur les ressources statiques.",
+      "Oublier le cache-busting sur assets versionnés.",
+      "Cacher du HTML sans stratégie d’invalidation.",
+      "Désactiver les cookies sur domaines statiques sans stratégie claire."
+    ],
+    "control": [
+      "Plugin Green IT Analysis : vérifier l’audit « Ajouter expire ou des cache-control headers ».",
+      "L’audit est réussi s’il n’y a aucun cookie pour les ressources statiques.",
+      "L’audit est un échec s’il y a un ou plusieurs cookies pour les ressources statiques."
+    ],
+    "tables": [],
+    "impacts": [
+      {
+        "label": "Impact écologique",
+        "before": "Page de 2 Mo sans stratégie de mise en cache vue par 1 M de visiteurs : ~ 10 tonnes de CO₂",
+        "after": "Page avec cache ne pesant plus que 400 Ko : ~ 2 tonnes de CO₂",
+        "gain": "soit -80% d’émission"
+      },
+      {
+        "label": "Impact performance",
+        "before": "First Contentful Paint sans cache : ~ 4,8 s",
+        "after": "Avec cache : ~ 1,2 s",
+        "gain": "soit 4x moins de temps"
+      }
+    ],
+    "sourcePages": [
+      30,
+      31,
+      32
+    ],
+    "priority": "Haute",
+    "difficulty": "Moyenne",
+    "essential": true
+  },
+  {
+    "id": "lazy-resources",
+    "actionNumbers": [
+      68
+    ],
+    "title": "Éviter de déclencher le chargement de ressources et de contenus inutilisés pour chaque fonctionnalité",
+    "audience": "Dev Front",
+    "pillar": {
+      "id": "heavy",
+      "title": "Optimiser les traitements “lourds”"
+    },
+    "summary": "Charger au bon moment, seulement pour les fonctionnalités utilisées.",
+    "objective": "Éviter de charger du code, des images ou des styles inutilisés avant que l’utilisateur en ait besoin.",
+    "do": [
+      "Découper le JavaScript par page.",
+      "Charger les images seulement quand on arrive dessus.",
+      "Mettre le CSS important en premier, le reste après.",
+      "Vérifier avant de charger une librairie lourde."
+    ],
+    "dont": [
+      "Balancer tout le JavaScript sur chaque page.",
+      "Mettre des photos géantes partout.",
+      "Charger des bibliothèques au cas où.",
+      "Précharger des trucs non essentiels."
+    ],
+    "control": [
+      "Plugin Green IT Analysis : vérifier les audits « Limiter le nombre de fichiers CSS » et « Ne télécharger pas des images inutilement ».",
+      "L’audit CSS est réussi si le nombre de fichiers CSS est inférieur ou égal à 10.",
+      "L’audit images est réussi si aucune image n’est téléchargée inutilement."
+    ],
+    "tables": [],
+    "impacts": [
+      {
+        "label": "Impact écologique",
+        "before": "Page de 1 Mo sans stratégie de non déclenchement : ~ 5 tonnes de CO₂",
+        "after": "Page avec stratégie et poids plus que 500 Ko : ~ 2,5 tonnes de CO₂",
+        "gain": "soit -50% d’émission"
+      },
+      {
+        "label": "Impact performance",
+        "before": "Largest Contentful Paint sans stratégie : ~ 5,2 s",
+        "after": "Avec stratégie : ~ 1,8 s",
+        "gain": "soit 2,88x moins de temps"
+      }
+    ],
+    "sourcePages": [
+      33,
+      34,
+      35
+    ],
+    "priority": "Haute",
+    "difficulty": "Moyenne",
+    "essential": true
+  },
+  {
+    "id": "dom",
+    "actionNumbers": [
+      74
+    ],
+    "title": "Réduire les accès au DOM via JavaScript",
+    "audience": "Dev Front",
+    "pillar": {
+      "id": "heavy",
+      "title": "Optimiser les traitements “lourds”"
+    },
+    "summary": "Limiter les repaint/reflow et regrouper les modifications DOM.",
+    "objective": "Réduire les manipulations DOM coûteuses et répétées.",
+    "do": [
+      "Stocker les éléments du DOM dans des variables JavaScript réutilisables dès la première récupération.",
+      "Privilégier la délégation d’événements sur un parent unique plutôt que d’attacher à chaque enfant."
+    ],
+    "dont": [
+      "Rechercher le même élément du DOM en boucle.",
+      "Modifier le style ou le contenu à chaque petit changement.",
+      "Lire des infos dans le DOM alors que tu les as déjà en JS.",
+      "Surcharger le DOM avec des éléments inutiles."
+    ],
+    "control": [
+      "Plugin Green IT Analysis : vérifier l’audit « Taille du DOM ».",
+      "La taille du DOM mesure le nombre total d’éléments HTML dans l’arbre du Document Object Model.",
+      "Plus le DOM est grand, plus le navigateur passe du temps à rendre la page."
+    ],
+    "tables": [
+      {
+        "title": "Taille du DOM en fonction du type de page",
+        "headers": [
+          "Type d’IHM",
+          "Exemple",
+          "Poids total cible"
+        ],
+        "rows": [
+          [
+            "Page statique",
+            "Accueil simple avec hero + menu + CTA",
+            "< 400"
+          ],
+          [
+            "Page contenu article",
+            "Blog post avec 3 images, paragraphes",
+            "< 800"
+          ],
+          [
+            "Liste/filtres dashboard",
+            "Projets avec chips + pagination",
+            "< 1000"
+          ],
+          [
+            "Formulaires complexes",
+            "Déclarations, saisie multi-étapes, téléservices",
+            "< 1200"
+          ],
+          [
+            "Fiche riche / page média",
+            "Page avec contenu éditorial, graphiques, cartes, aides contextuelles",
+            "1,5 à 3 Mo"
+          ]
+        ]
+      }
+    ],
+    "impacts": [
+      {
+        "label": "Impact écologique",
+        "before": "Page de 500 Ko avec accès DOM répétés : ~ 200 kg de CO₂",
+        "after": "Page avec bundle optimisé et total : ~ 190 kg de CO₂",
+        "gain": "soit -5% d’émission"
+      },
+      {
+        "label": "Impact performance",
+        "before": "Largest Contentful Paint avec accès DOM répétés : ~ 2,1 s",
+        "after": "Avec accès DOM réduits : ~ 1,6 s",
+        "gain": "gain sur le temps de rendu"
+      }
+    ],
+    "sourcePages": [
+      36,
+      37,
+      38
+    ],
+    "priority": "Moyenne",
+    "difficulty": "Moyenne",
+    "essential": false
+  },
+  {
+    "id": "async-processing",
+    "actionNumbers": [
+      75
+    ],
+    "title": "Proposer un traitement asynchrone lorsque c’est possible",
+    "audience": "Dev Front",
+    "pillar": {
+      "id": "async",
+      "title": "Favoriser les traitements asynchrones"
+    },
+    "summary": "Déporter les traitements longs et éviter le blocage utilisateur.",
+    "objective": "Favoriser les traitements asynchrones lorsque cela est possible afin d’éviter les blocages et les surcharges.",
+    "do": [
+      "Déclencher le traitement lourd côté serveur et notifier l’utilisateur par email avec un lien de récupération.",
+      "Implémenter des workers ou queues pour traiter par lots en arrière-plan.",
+      "Lisser la charge serveur via batching."
+    ],
+    "dont": [
+      "Bloquer l’utilisateur avec un traitement synchrone long.",
+      "N’exécuter que des tâches CPU-intensives ou I/O lourdes directement dans la réponse HTTP synchrone.",
+      "Surcharger les serveurs de présentation avec des pics de charge non lissés."
+    ],
+    "control": [],
+    "tables": [],
+    "impacts": [
+      {
+        "label": "Impact écologique",
+        "before": "Page de 1 Mo sans traitements asynchrones : ~ 5 tonnes de CO₂",
+        "after": "Page avec traitements asynchrones : ~ 2,5 tonnes de CO₂",
+        "gain": "soit -50% d’émission"
+      },
+      {
+        "label": "Impact performance",
+        "before": "Largest Contentful Paint sans traitement asynchrone : ~ 2,3 s",
+        "after": "Avec traitement asynchrone : ~ 1,9 s",
+        "gain": "soit -23% de temps"
+      }
+    ],
+    "sourcePages": [
+      39
+    ],
+    "priority": "Haute",
+    "difficulty": "Faible",
+    "essential": true
+  }
+]