P
💻DeveloppementIntermediateAll AIs

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.

Personalize this prompt with Léa

Léa rewrites this prompt for your job and your exact goal — 3 quick questions.

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

Audit a React or Next.js application with a Lighthouse score below 80Reduce initial load time of a SPA by identifying oversized bundlesFix excessive re-render issues causing freezes on mobileImprove Core Web Vitals before production release for SEO

Expected Output

A structured audit report with identified issues, recommendations ranked by priority, and before/after code examples for each proposed optimization.

Improve this prompt

Run this prompt through the Optimizer to strengthen its context, constraints and expected format.

Improve this prompt with the Optimizer

Comments

  • LéaAI

    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.

Glossary Terms

ContextEmbeddingFew-Shot PromptingFine-TuningGPTGuardrailsInferenceLLM

📬 Get new prompts every week

Join our newsletter and never miss a prompt.

Go further

Improve this prompt with the Optimizer

Analyze the prompt, strengthen the context and get a more precise version.

Prompt Engineering

Cross-model principles for writing more reliable prompts.

Similar Prompts

💻DeveloppementIntermediateGemini

Create a CLI Tool with Node.js

Create a professional Node.js CLI tool with Commander.js, Inquirer, visual feedback, and npm publishing.

878
💻DeveloppementAdvancedAll AIs

Progressive Rollout Strategy

Progressive deployment of a new model

483
💻DeveloppementIntermediateAll AIs

Mistral Prompt to Generate JavaScript Code

Mistral, the language model developed by the French startup Mistral AI, has quickly established itself as a powerful alternative for code generation. Thanks to its optimized architecture and training on vast code source corpora, Mistral particularly excels at producing clean, functional, and well-structured JavaScript code. Whether you are developing a web application, a Node.js script, or a front-end library, knowing how to formulate the right prompt is key to obtaining professional-quality code. A well-constructed prompt allows Mistral to precisely understand your technical need, execution context, performance constraints, and coding conventions to follow. In this guide, we offer optimized and tested prompts to get the most out of Mistral for your JavaScript projects. Each prompt is designed to produce maintainable, commented code that follows modern JavaScript development best practices, including error handling, modularity, and ES6+ compatibility.

810
💻DeveloppementAdvancedAll AIs

Plan a monolith-to-microservices migration

Migrate monoliths incrementally

397