performance-optimizer - SKILL.md Agent Skill

name: performance_optimizer description: Outils et instructions pour maintenir un score Lighthouse > 90 et un LCP < 2.5s.

Ce skill est conçu pour maintenir l'application courstrompette.fr au sommet de sa forme en termes de rapidité.

Zéro Image Lourde : Toutes les images doivent être en WebP et < 200 Ko pour les bannières, < 10 Ko pour les icônes/avatars.
LCP Priority : L'image principale de chaque page (Hero) doit TOUJOURS avoir l'attribut priority.
Lazy Loading : Les composants non critiques (Chatbot, widgets Amazon en bas de page) doivent être chargés en différé (next/dynamic avec ssr: false).
Resized Assets : Utiliser l'attribut sizes pour éviter de télécharger des images desktop sur mobile.
Layout Stability (CLS) : Toujours spécifier width et height ou utiliser fill avec un conteneur à ratio fixe pour éviter les sauts de mise en page.
Polices (Fonts) : Utiliser next/font avec display: 'swap' pour garantir que le texte est lisible avant le chargement complet de la police.

scripts/analyze-images.ps1 : Scan le dossier public/ et liste les fichiers qui dépassent les quotas.
scripts/optimize-images.ps1 : Convertit automatiquement les JPG/PNG en WebP haute performance.
scripts/check-priority.ps1 : Analyse les fichiers .tsx pour s'assurer que les images critiques sont prioritaires.
scripts/check-layout-shift.ps1 : Détecte les balises Image qui risquent de provoquer des sauts de mise en page.

Lorsqu'un utilisateur signale une lenteur ou après l'ajout d'une nouvelle page :

Exécuter le scan d'images pour vérifier si des assets non optimisés ont été introduits.
Utiliser Google Lighthouse pour identifier le nouvel élément qui bloque le thread principal.
Appliquer les correctifs de redimensionnement et de format (WebP).