Compétence : Performance
Rendez l'UI rapide et stable. Traitez la performance comme un enjeu d'accessibilité — les UI lentes/saccadées impactent en premier les appareils bas de gamme.
Étapes
- Lisez
workflows/performance.md(cibles Core Web Vitals, stratégie de chargement, décalage de mise en page, performance des animations, coût d'exécution du système de design). - Diagnostiquez par rapport aux budgets : LCP ≤ 2,5 s, INP ≤ 200 ms, CLS ≤ 0,1. Mesurez sur un profil mobile de milieu de gamme (limitation slow 4G + CPU ×4).
- Chargement : affichez d'abord le contenu au-dessus de la ligne de flottaison (SSR/Server Components), découpez le code par route + widget lourd, chargez paresseusement le contenu en dessous/derrière une interaction (îles Astro / Qwik), préchargez un poids de police critique, images responsives modernes.
- Éliminez les décalages de mise en page : dimensionnez les squelettes aux dimensions finales, réservez l'espace média via
aspect-ratio(tokens/sizing.json), n'injectez jamais de contenu au-dessus du contenu existant. - Animation : uniquement
transform/opacity, utilisezwill-changeavec parcimonie, 100–300 ms (tokens/motion.json), respectezprefers-reduced-motion. Préférez le style CSS avec état plutôt que JS pour un faible INP ; importations arborescentes/par composant.
Vérification (définition de fait)
- Lighthouse / données de terrain atteignent LCP ≤ 2,5 s, INP ≤ 200 ms, CLS ≤ 0,1 sur mobile milieu de gamme.
- La première interaction reste réactive sous limitation slow-4G + CPU ×4.
- Les squelettes + l'espace média réservent la place (CLS nul au chargement) ; aucune animation non-compositeur dans les boucles.