Optimize Your Web Application Frontend Performance
A comprehensive prompt to audit and optimize web application frontend performance, covering bundle size, rendering, assets and Core Web Vitals.
Paste in your AI
Paste this prompt in ChatGPT, Claude or Gemini and customize the variables in brackets.
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 : 1. **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. 2. **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). 3. **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. 4. **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). 5. **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.
Why this prompt works
<p>This prompt turns the AI into a frontend performance consultant. By providing your <strong>framework</strong>, <strong>application description</strong>, <strong>observed issues</strong> and <strong>tech stack</strong>, you get a structured, actionable audit tailored to your specific context.</p><p>The approach covers the five pillars of frontend performance: JavaScript bundle optimization, client-side rendering efficiency, static asset management, Google Core Web Vitals metrics, and a prioritized action plan. Each recommendation comes with concrete code examples for immediate implementation.</p><p><strong>Usage tip</strong>: for even more precise results, paste a problematic code snippet or a screenshot of Chrome DevTools Performance tab. You can also chain this with a code review prompt to validate proposed optimizations before applying them in production.</p>
Use Cases
Expected Output
A structured audit report with identified issues, recommendations ranked by priority, and before/after code examples for each proposed optimization.
Learn more
Check the full skill on Prompt Guide to master this technique from A to Z.
View on Prompt Guide📬 Get new prompts every week
Join our newsletter and never miss a prompt.
Similar Prompts
Analyze and Optimize Algorithmic Complexity
Analyze the Big O complexity of your algorithms and optimize them with appropriate data structures and more efficient algorithms.
Configure an Optimized Dockerfile for Your Application
This prompt generates a production-ready Dockerfile with multi-stage build, security best practices and cache optimization, tailored to your language and framework.
Design a Robust Microservices Architecture
A complete prompt to design a professional microservices architecture covering DDD decomposition, inter-service communication, Kubernetes deployment, and observability.
Create an Optimized Production Dockerfile
Create a multi-stage Dockerfile optimized for production with maximum security, lightweight image, and best practices.