À corriger

Pour passer en A, il manque 12 points : appliquer les conseils 1 et 2.

1. +8 points Aucune image plus de deux fois plus grande que son affichage un changement de contenu

   Gain estimé, 821 Ko et 0,12 g de CO2e par vue.

   Redimensionner chaque image à sa taille d’affichage, et proposer plusieurs largeurs par srcset et sizes pour les écrans denses.

   Astro : Donner widths et sizes à <Image />, qui produit le srcset.

   https://kmc-events.fr/logos/bnp_paribas.webp, 720 px de large pour 182 px affichés, l’exporter en 319 px
   https://kmc-events.fr/logos/waltdisney.webp, 644 px de large pour 182 px affichés, l’exporter en 319 px
   https://kmc-events.fr/logos/livenation.webp, 744 px de large pour 182 px affichés, l’exporter en 319 px
   https://kmc-events.fr/_astro/traiteurs.BmLcPZ16.webp, 1 200 px de large pour 0 px affichés, l’exporter en 0 px
   https://kmc-events.fr/_astro/artistes.Jk3zJDew.webp, 1 619 px de large pour 0 px affichés, l’exporter en 0 px
   https://kmc-events.fr/_astro/technique.CwEBPBNe.webp, 1 300 px de large pour 0 px affichés, l’exporter en 0 px
   https://kmc-events.fr/_astro/10.C2SpkXtl.webp, 1 920 px de large pour 380 px affichés, l’exporter en 665 px
   https://kmc-events.fr/_astro/1.CelnhPgk.webp, 1 920 px de large pour 184 px affichés, l’exporter en 322 px
   https://kmc-events.fr/_astro/2.D0vH9D5S.webp, 1 920 px de large pour 185 px affichés, l’exporter en 324 px
   https://kmc-events.fr/_astro/10.Blmw15Cr.webp, 1 920 px de large pour 184 px affichés, l’exporter en 322 px
   et 3 de plus
2. +4 points Réduire la taille du DOM une refonte

   Alléger les blocs listés, ceux qui portent le plus d’éléments : ne pas dupliquer un contenu pour une animation (défilement de logos en CSS sur une seule copie), paginer ou charger à la demande les longues listes, et retirer les enveloppes div sans rôle.

   div.mb-8.space-y-4, 115 éléments
   div.border-foreground/20.flex, 55 éléments
3. +3 points Alléger le chargement initial un changement de contenu

   Alléger d’abord les fichiers listés, les plus lourds du chargement initial : images à la taille d’affichage en WebP ou AVIF, JavaScript découpé et chargé à la demande, polices réduites aux caractères utilisés, et tout ce qui n’est pas vu au premier écran chargé plus tard.

   Astro : <Image> d’astro:assets avec widths et sizes, et les îlots en client:visible plutôt que client:load.

   https://kmc-events.fr/_astro/vendor.CYx9LSmD.js, script, 113 Ko
   https://kmc-events.fr/fonts/CompressaPRO-GX.woff2, police, 101 Ko
   https://kmc-events.fr/_astro/artistes.Jk3zJDew.webp, image, 92 Ko
   https://kmc-events.fr/_astro/1.CelnhPgk.webp, image, 92 Ko
   https://kmc-events.fr/_astro/1.KakXGQip.webp, image, 91 Ko
4. +3 points Les images sous la ligne de flottaison se chargent à la demande un changement de contenu

   Ajouter loading="lazy" et decoding="async" aux images sous la ligne de flottaison, avec width et height déclarés, et fetchpriority="high" à la seule image visible d’emblée.

   Astro : <Image /> charge à la demande par défaut ; loading="eager" seulement sur l’image principale.

   https://kmc-events.fr/logos/drancy.webp, sous la ligne de flottaison, ajouter loading="lazy"
   https://kmc-events.fr/logos/isepbands.webp, sous la ligne de flottaison, ajouter loading="lazy"
   https://kmc-events.fr/logos/bnp_paribas.webp, sous la ligne de flottaison, ajouter loading="lazy"
   https://kmc-events.fr/logos/waltdisney.webp, sous la ligne de flottaison, ajouter loading="lazy"
   https://kmc-events.fr/logos/neuilly.webp, sous la ligne de flottaison, ajouter loading="lazy"
   https://kmc-events.fr/logos/livenation.webp, sous la ligne de flottaison, ajouter loading="lazy"
   https://kmc-events.fr/logos/taverny.webp, sous la ligne de flottaison, ajouter loading="lazy"
   https://kmc-events.fr/logos/lepecq.webp, sous la ligne de flottaison, ajouter loading="lazy"
   https://kmc-events.fr/logos/handisport.webp, sous la ligne de flottaison, ajouter loading="lazy"
   https://kmc-events.fr/_astro/lieux.D2vvu5J8.webp, sous la ligne de flottaison, ajouter loading="lazy"
5. +3 points Deux familles de polices au plus un changement de contenu

   Limiter le site à deux familles de polices, et préférer une police système ou une police variable qui couvre toutes les graisses.

   Spline Sans
   Inter
   Compressa VF

À corriger

1. +3 points Aucune image plus de deux fois plus grande que son affichage un changement de contenu

   Gain estimé, 165 Ko et 0,024 g de CO2e par vue.

   Redimensionner chaque image à sa taille d’affichage, et proposer plusieurs largeurs par srcset et sizes pour les écrans denses.

   Astro : Donner widths et sizes à <Image />, qui produit le srcset.

   https://kmc-events.fr/team/katia.webp, 1 920 px de large pour 184 px affichés, l’exporter en 322 px
   https://kmc-events.fr/team/miguel.webp, 1 920 px de large pour 184 px affichés, l’exporter en 322 px
   https://kmc-events.fr/team/christophe.webp, 1 920 px de large pour 184 px affichés, l’exporter en 322 px
2. +3 points Deux familles de polices au plus un changement de contenu

   Limiter le site à deux familles de polices, et préférer une police système ou une police variable qui couvre toutes les graisses.

   Spline Sans
   Inter
   Compressa VF
3. +1 point Réduire la taille du DOM une refonte

   Alléger les blocs listés, ceux qui portent le plus d’éléments : ne pas dupliquer un contenu pour une animation (défilement de logos en CSS sur une seule copie), paginer ou charger à la demande les longues listes, et retirer les enveloppes div sans rôle.

   div.mb-8.space-y-4, 115 éléments
   div.border-foreground/20.flex, 55 éléments
   section.mx-auto.max-w-8xl, 45 éléments

À corriger

Pour passer en A, il manque 6 points : appliquer le conseil 1.

1. +7 points Aucune image plus de deux fois plus grande que son affichage un changement de contenu

   Gain estimé, 3 591 Ko et 0,53 g de CO2e par vue.

   Redimensionner chaque image à sa taille d’affichage, et proposer plusieurs largeurs par srcset et sizes pour les écrans denses.

   Astro : Donner widths et sizes à <Image />, qui produit le srcset.

   https://kmc-events.fr/_astro/1.NHInTl3u.webp, 1 920 px de large pour 184 px affichés, l’exporter en 322 px
   https://kmc-events.fr/_astro/2.Di5E9_MP.webp, 1 920 px de large pour 184 px affichés, l’exporter en 322 px
   https://kmc-events.fr/_astro/3.BMumbJJg.webp, 1 920 px de large pour 184 px affichés, l’exporter en 322 px
   https://kmc-events.fr/_astro/4.DkVXbc3d.webp, 1 920 px de large pour 184 px affichés, l’exporter en 322 px
   https://kmc-events.fr/_astro/5.1bdweqiq.webp, 1 920 px de large pour 184 px affichés, l’exporter en 322 px
   https://kmc-events.fr/_astro/6.CUE8v_Ul.webp, 1 920 px de large pour 184 px affichés, l’exporter en 322 px
   https://kmc-events.fr/_astro/7._vZlp5lk.webp, 1 920 px de large pour 184 px affichés, l’exporter en 322 px
   https://kmc-events.fr/_astro/8.CPCtf4it.webp, 1 920 px de large pour 184 px affichés, l’exporter en 322 px
   https://kmc-events.fr/_astro/9.BWhWfhUN.webp, 1 920 px de large pour 184 px affichés, l’exporter en 322 px
   https://kmc-events.fr/_astro/10.CR6RPZ4K.webp, 1 920 px de large pour 184 px affichés, l’exporter en 322 px
   et 30 de plus
2. +4 points Réduire la taille du DOM une refonte

   Alléger les blocs listés, ceux qui portent le plus d’éléments : ne pas dupliquer un contenu pour une animation (défilement de logos en CSS sur une seule copie), paginer ou charger à la demande les longues listes, et retirer les enveloppes div sans rôle.

   div.mt-10, 50 éléments
   div.border-foreground/20.flex, 55 éléments
3. +3 points Deux familles de polices au plus un changement de contenu

   Limiter le site à deux familles de polices, et préférer une police système ou une police variable qui couvre toutes les graisses.

   Spline Sans
   Inter
   Compressa VF
4. +1 point Alléger le chargement initial un changement de contenu

   Alléger d’abord les fichiers listés, les plus lourds du chargement initial : images à la taille d’affichage en WebP ou AVIF, JavaScript découpé et chargé à la demande, polices réduites aux caractères utilisés, et tout ce qui n’est pas vu au premier écran chargé plus tard.

   Astro : <Image> d’astro:assets avec widths et sizes, et les îlots en client:visible plutôt que client:load.

   https://kmc-events.fr/_astro/vendor.CYx9LSmD.js, script, 113 Ko
   https://kmc-events.fr/_astro/4.DkVXbc3d.webp, image, 103 Ko
   https://kmc-events.fr/fonts/CompressaPRO-GX.woff2, police, 101 Ko
   https://kmc-events.fr/_astro/2.Di5E9_MP.webp, image, 99 Ko
   https://kmc-events.fr/_astro/8.CPCtf4it.webp, image, 91 Ko

À corriger

Pour passer en A, il manque 2 points : appliquer le conseil 1.

1. +5 points Plus de trois images matricielles sur quatre en WebP ou AVIF un changement de contenu

   Gain estimé, 129 Ko et 0,019 g de CO2e par vue.

   Servir les photos en AVIF ou en WebP, au moment de la construction ou par un service d’images, en gardant le PNG ou le JPEG seulement pour l’Open Graph.

   Astro : Utiliser <Picture formats={['avif', 'webp']} /> ou <Image /> d’astro:assets, avec l’image importée depuis src/.

   https://kmc-events.fr/kmc_ancien.png, 430 Ko, environ 301 Ko en WebP ou AVIF
2. +4 points Aucune image plus de deux fois plus grande que son affichage un changement de contenu

   Gain estimé, 418 Ko et 0,062 g de CO2e par vue.

   Redimensionner chaque image à sa taille d’affichage, et proposer plusieurs largeurs par srcset et sizes pour les écrans denses.

   Astro : Donner widths et sizes à <Image />, qui produit le srcset.

   https://kmc-events.fr/kmc_ancien.png, 2 381 px de large pour 221 px affichés, l’exporter en 387 px
3. +3 points Deux familles de polices au plus un changement de contenu

   Limiter le site à deux familles de polices, et préférer une police système ou une police variable qui couvre toutes les graisses.

   Spline Sans
   Inter
   Compressa VF

À corriger

Pour passer en A, il manque 3 points : appliquer le conseil 1.

1. +5 points Aucune image plus de deux fois plus grande que son affichage un changement de contenu

   Gain estimé, 652 Ko et 0,097 g de CO2e par vue.

   Redimensionner chaque image à sa taille d’affichage, et proposer plusieurs largeurs par srcset et sizes pour les écrans denses.

   Astro : Donner widths et sizes à <Image />, qui produit le srcset.

   https://kmc-events.fr/logos/alliance.webp, 564 px de large pour 111 px affichés, l’exporter en 195 px
   https://kmc-events.fr/logos/amiens.webp, 376 px de large pour 84 px affichés, l’exporter en 147 px
   https://kmc-events.fr/logos/argenteuil.webp, 696 px de large pour 111 px affichés, l’exporter en 195 px
   https://kmc-events.fr/logos/csa.webp, 516 px de large pour 129 px affichés, l’exporter en 226 px
   https://kmc-events.fr/logos/drancy.webp, 432 px de large pour 89 px affichés, l’exporter en 156 px
   https://kmc-events.fr/logos/handisport.webp, 516 px de large pour 111 px affichés, l’exporter en 195 px
   https://kmc-events.fr/logos/lepecq.webp, 468 px de large pour 100 px affichés, l’exporter en 175 px
   https://kmc-events.fr/logos/levallois.webp, 584 px de large pour 111 px affichés, l’exporter en 195 px
   https://kmc-events.fr/logos/manteslajolie.webp, 448 px de large pour 104 px affichés, l’exporter en 182 px
   https://kmc-events.fr/logos/neuilly.webp, 872 px de large pour 155 px affichés, l’exporter en 272 px
   et 26 de plus
2. +3 points Deux familles de polices au plus un changement de contenu

   Limiter le site à deux familles de polices, et préférer une police système ou une police variable qui couvre toutes les graisses.

   Spline Sans
   Inter
   Compressa VF
3. +3 points Réduire les requêtes du chargement initial une refonte

   Regrouper ou retirer les requêtes des domaines listés : un script tiers qui n’apporte rien se retire, une police ou une bibliothèque tierce se sert depuis le site, et ce qui n’est pas vu au premier écran se charge à la demande.

   Astro : Les polices dans public/ ou par astro:assets, et les scripts tiers chargés après interaction.

   api.getgrammage.com, 1 requête

À corriger

1. +4 points Deux familles de polices au plus un changement de contenu

   Limiter le site à deux familles de polices, et préférer une police système ou une police variable qui couvre toutes les graisses.

   Spline Sans
   Inter
   Compressa VF