Prompt pour optimiser les performances frontend de votre application web
Un prompt complet pour auditer et optimiser les performances frontend d'une application web, couvrant le bundle, le rendu, les assets et les 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 frontend et en optimisation web. Analyse le code et l'architecture frontend de mon projet pour identifier les problèmes de performance et proposer des optimisations concrètes.
Contexte du projet :
- Framework/librairie utilisé : [FRAMEWORK_UTILISE] (ex : React, Vue, Next.js, Angular, Svelte)
- Description de l'application : [DESCRIPTION_APPLICATION]
- Problèmes de performance observés : [PROBLEMES_OBSERVES] (ex : temps de chargement lent, interface qui freeze, score Lighthouse faible)
- Stack technique complet : [STACK_TECHNIQUE] (ex : TypeScript, Tailwind, Webpack, Vite)
Réalise un audit complet en suivant cette structure :
-
Analyse du bundle : Identifie les dépendances lourdes, le code mort, les imports non optimisés. Propose du tree-shaking, du code-splitting et du lazy loading adaptés au framework.
-
Optimisation du rendu : Détecte les re-renders inutiles, les calculs coûteux dans le cycle de rendu, les fuites mémoire potentielles. Propose des solutions spécifiques (mémoïsation, virtualisation de listes, debouncing).
-
Assets et réseau : Optimise les images (formats modernes, lazy loading, srcset), les fonts (font-display, subset), le CSS (purge, critical CSS), et la stratégie de cache.
-
Core Web Vitals : Propose des actions ciblées pour améliorer le LCP (Largest Contentful Paint), le FID/INP (Interaction to Next Paint), et le CLS (Cumulative Layout Shift).
-
Plan d'action priorisé : Classe chaque optimisation par impact (fort/moyen/faible) et effort (rapide/moyen/complexe). Commence par les quick wins à fort impact.
Pour chaque recommandation, fournis un exemple de code avant/après montrant l'implémentation concrète.
Personnaliser ce prompt avec Léa
Léa réécrit ce prompt pour ton métier et ton objectif précis — 3 questions suffisent.
Pourquoi ce prompt fonctionne
<p>Ce prompt transforme l'IA en consultant performance frontend. En fournissant votre <strong>framework</strong>, la <strong>description de votre application</strong>, les <strong>problèmes observés</strong> et votre <strong>stack technique</strong>, vous obtenez un audit structuré et actionnable adapté à votre contexte précis.</p><p>L'approche couvre les cinq piliers de la performance frontend : l'optimisation du bundle JavaScript, l'efficacité du rendu côté client, la gestion des assets statiques, les métriques Core Web Vitals de Google, et un plan d'action priorisé. Chaque recommandation est accompagnée d'exemples de code concrets pour une mise en œuvre immédiate.</p><p><strong>Conseil d'utilisation</strong> : pour des résultats encore plus précis, collez un extrait de code problématique ou une capture de l'onglet Performance de Chrome DevTools. Vous pouvez aussi enchaîner avec un prompt de review de code pour valider les optimisations proposées avant de les appliquer en production.</p>
Cas d'usage
Résultat attendu
Un rapport d'audit structuré avec des problèmes identifiés, des recommandations classées par priorité, et des exemples de code avant/après pour chaque optimisation proposée.
Améliorez ce prompt
Passez ce prompt dans l'Optimiseur pour renforcer le contexte, les contraintes et le format attendu.
Améliore ce prompt avec l'OptimiseurCommentaires
- LéaIA
Remplacez les sections entre crochets par des données réelles, notamment les métriques Lighthouse de production et les fichiers de configuration (webpack/vite). Pour un diagnostic plus précis, fournissez aussi un profil de performance Chrome DevTools ou un rapport WebPageTest.
Termes du glossaire
📬 Recevez de nouveaux prompts chaque semaine
Rejoignez notre newsletter et ne manquez aucun prompt.
Pour aller plus loin
Prompts similaires
Prompt ChatGPT pour générer du code Python
ChatGPT est devenu un outil incontournable pour les développeurs Python, qu'ils soient débutants ou expérimentés. Grâce à sa compréhension avancée du langage naturel, il peut transformer une description fonctionnelle en code Python propre, structuré et fonctionnel en quelques secondes. Mais la qualité du code généré dépend directement de la qualité du prompt utilisé. Un prompt vague produira un code générique et souvent inutilisable, tandis qu'un prompt bien structuré génèrera du code prêt pour la production, avec gestion des erreurs, typage et documentation. Dans ce guide, nous vous proposons des prompts optimisés pour tirer le meilleur parti de ChatGPT dans la génération de code Python. Que vous ayez besoin d'écrire un script d'automatisation, une API REST, un algorithme de traitement de données ou une classe complexe, ces prompts vous permettront d'obtenir des résultats précis et professionnels. L'objectif est de vous faire gagner du temps tout en maintenant un niveau de qualité élevé, en guidant ChatGPT avec les bonnes instructions pour qu'il respecte les conventions PEP 8, inclue des docstrings et produise du code maintenable.
Générez une documentation technique complète pour votre code
Un prompt complet pour générer de la documentation technique structurée et professionnelle, adaptée au public cible et au type de projet.
Maîtriser les types avancés TypeScript
Renforcez la sécurité de type de votre code TypeScript avec des types génériques avancés, utility types et discriminated unions.
Stratégie de backup Kubernetes
Plan de reprise d'activité pour Kubernetes