perf-cwv

perf-cwv

Catalogue généré le 2026-05-11

En une phrase

Audit etcomplet plan d’optimisationdes Core Web Vitals (LCP/INP/LCP, INP, CLS) + budgets. À utiliser quand d'une page estweb lente,avec lourde,diagnostic, ouplan avantcorrectif livraisonpriorisé marketing/SEO.et budgets de performance recommandés.

Quand l'utiliser

• VoirAvant la descriptionmise ci-dessusen ligne d'une landing marketing ou d'une page SEO critique

Quand une page semble lente, lourde ou saccadée Quand le score Lighthouse plafonne et laqu'on sectionne « Pour allersait plus loinquoi ».optimiser Pour fixer des budgets perf clairs (JS, CSS, images, fonts) sur un projet Avant un sprint de polish performance pour prioriser les actions à fort impact

Comment l'invoquer

• Slash command : /perf-cwv (si exposé dans ton CLI)

Phrases déclencheurs : voir la description complète ci-dessous Auto-invocation : sur✅ demandeOui explicite— quand une page est lente, lourde, ou avant livraison marketing/SEO

PourDescription aller plus loindétaillée

Performance

Ce —skill suit une procédure structurée en quatre temps. D'abord il mesure (via Lighthouse ou des données réelles si elles existent), puis il diagnostique chacune des trois métriques Core Web Vitals (CWV):

Objectif

le

Réduire LCP/INP/CLS, améliorer perf perçue, définir budgets, proposer fixes priorisés.

Procédure

MesurerLCP (Lighthouse / field data si dispo) Diagnostiquer :

LCP : élément LCP,principal qui s'affiche, image hero, fonts, SSR/streaming,cache, cacheSSR), l'INP :(réactivité handlersaux lourds,clics, hydration,hydration React/Vue, long tasks, listeners,taille bundlede bundle) et le CLS :(sauts médiasvisuels causés par des images sans dimensions, des fonts qui chargent tard, des injections tardives,dynamiques). fonts,

Ensuite UIil dynamiques

produit

Fixun plan :d'actions priorisé

en TopP0/P1/P2, avec les 5 actionschantiers (impactà fort)plus Budgetsfort (JS/CSS/images/fonts)impact, et

propose Vérifierdes budgets concrets pour ne pas laisser le projet regrasser après fixeslivraison. Il donne aussi des snippets prêts à coller (re-run)lazy loading,

Outputpreload attendu

des

ressources Diagnosticcritiques, LCPaspect-ratio /pour INPles /médias, CLScode (causessplitting). probables)

Pour

PlanThymon priorisé: (P0/P1/P2)c'est Budgetsl'outil recommandésà Snippetsdégainer (lazy,quand preload,un aspect-ratio,site split)fonctionne bien mais "rame", ou quand on veut s'assurer qu'une page marketing ne va pas couler au moment du lancement. Il est aussi utile en post-mortem si Lighthouse signale une régression après un déploiement.

Source

• Plugin : perso (standalone)
• Nom interne : perf-cwv
• Fichier : /home/thymon/.claude/skills/perf-cwv/SKILL.md