Analyser et optimiser les performances frontend
Analyse les problèmes de performance d'une application frontend et produit un plan d'optimisation priorisé par rapport gains/effort, couvrant bundle, rendu, réseau et Core Web Vitals.
Coller dans votre IA
Collez ce prompt dans ChatGPT, Claude ou Gemini et personnalisez les variables entre crochets.
Tu es un expert en performance web et optimisation frontend. Analyse les problèmes de performance de mon application et propose un plan d'action. **Framework :** [FRAMEWORK] (ex: React, Vue, Next.js) **Métriques actuelles Lighthouse :** [METRIQUES_LIGHTHOUSE] (LCP, FID/INP, CLS, TTFB) **Contexte :** [CONTEXTE] (ex: e-commerce mobile-first, dashboard B2B) **Description des problèmes observés :** [PROBLEMES_OBSERVES] **Code ou configuration à analyser :** ``` [CODE_CONFIG] ``` Fournis une analyse en couches : 1. **Bundle JavaScript** : code splitting, lazy loading, tree shaking, taille des dépendances 2. **Rendu** : re-renders inutiles, hydration, SSR/SSG si applicable 3. **Réseau** : compression, cache, CDN, préchargement des ressources 4. **Images et assets** : formats modernes, lazy loading, responsive images 5. **Core Web Vitals** : actions spécifiques pour améliorer LCP, INP, CLS 6. **Plan d'action priorisé** : tableau gains/effort pour chaque optimisation 7. **Métriques cibles** : objectifs réalistes à atteindre
Pourquoi ce prompt fonctionne
La structure en couches (bundle/rendu/réseau/assets) reproduit la méthode d'analyse d'un expert performance. Le tableau gains/effort transforme une liste de recommandations en plan actionnable. Les métriques cibles réalistes évitent des objectifs impossibles et frustrés.
Cas d'usage
Résultat attendu
Analyse en 5 couches (bundle, rendu, réseau, assets, Core Web Vitals), plan d'action priorisé par gains/effort et métriques cibles réalistes.
Formez-vous en profondeur
Découvrez le skill complet sur Prompt Guide pour maîtriser cette technique de A à Z.
Voir sur Prompt Guide