Optimize React Application Performance
Optimize your React application to achieve excellent Core Web Vitals metrics through advanced memoization and code splitting techniques.
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 spécialisé dans React et l'optimisation des Core Web Vitals. Mon application React souffre de problèmes de performance que je dois résoudre.
Métriques actuelles :
- LCP (Largest Contentful Paint) : [EX: 4.2s, objectif < 2.5s]
- FID/INP (Interaction to Next Paint) : [EX: 320ms, objectif < 200ms]
- CLS (Cumulative Layout Shift) : [EX: 0.25, objectif < 0.1]
- Taille du bundle JS : [EX: 2.3MB non compressé]
Stack technique :
- React [VERSION] avec [EX: Next.js 14, Vite, Create React App]
- Gestion d'état : [EX: Redux Toolkit, Zustand, Context API]
- Composant ou page problématique : [DESCRIPTION]
Code du composant problématique :
[COLLER_LE_COMPOSANT_REACT]
Analyse et optimise en couvrant :
- Re-renders inutiles : identifie les causes et applique React.memo, useMemo, useCallback avec justification pour chaque usage.
- Code splitting : identifie les opportunités de lazy loading avec React.lazy et Suspense.
- Optimisation des images : formats modernes (WebP, AVIF), lazy loading natif, dimensions explicites.
- Virtualisation : si des listes longues sont présentes, implémente react-virtual ou react-window.
- Bundle analysis : identifie les dépendances lourdes et propose des alternatives légères.
- Métriques après optimisation : estime l'amélioration attendue pour chaque métrique Core Web Vitals.
Personalize this prompt with Léa
Answer 3 questions and Léa tailors the prompt to your situation.
Why this prompt works
<p>This prompt integrates Core Web Vitals metrics as a starting point because they provide measurable objectives and correspond to Google's ranking criteria. This data-driven approach ensures optimizations are prioritized based on their actual impact on user experience.</p><p>Requesting justification for each use of React.memo, useMemo, and useCallback is crucial: these optimizations are often misapplied and can even degrade performance if used incorrectly. Contextual explanation prevents the frequent misuse by intermediate React developers.</p><p>Estimating expected gains for each optimization transforms the analysis into a prioritized action plan, allowing efforts to focus on high-impact changes before tackling micro-optimizations.</p>
Use Cases
Expected Output
A React performance issue analysis with optimized code, optimization explanations, and estimated Core Web Vitals gains.
Improve this prompt
Run this prompt through the Optimizer to strengthen its context, constraints and expected format.
Improve this prompt with the OptimizerComments
- LéaAI
Pour une analyse précise, utilisez React Profiler pour identifier les re-renders coûteux avant d’appliquer useMemo ou React.memo. Cela évite les optimisations prématurées qui complexifient le code.
📬 Get new prompts every week
Join our newsletter and never miss a prompt.
Go further
Similar Prompts
Prompt Gemini for Creating a Software Architecture
Designing a solid software architecture is one of the most critical steps in any development project. A poor architecture leads to technical debt, scalability issues, and exploding maintenance costs. Gemini, Google's AI model, excels at structuring complex systems thanks to its ability to simultaneously analyze multiple technical constraints. By providing a well-built prompt, you get a detailed architecture covering technology choices, design patterns, data flows, and deployment strategies. Whether you are starting from scratch or looking to modernize an existing monolith, Gemini helps you explore trade-offs between microservices and monolith, identify potential points of failure, and document your architectural decisions. The tool is particularly useful for architects wanting to validate their intuitions, senior developers upskilling on architecture, and teams needing a structured starting point for their ADRs (Architecture Decision Records). Here is how to formulate your prompts to get the most out of it.
Implement OWASP security headers
Add security headers
Implement secrets management
Secure credentials management
Gemini Prompt for Creating a Chatbot
Gemini, Google's artificial intelligence model, offers remarkable capabilities for designing high-performance chatbots tailored to your needs. Whether you want to create a customer assistant for your e-commerce site, a technical support bot or a conversational companion, Gemini excels at understanding natural language nuances and generating contextual responses. Thanks to its extended context window and multimodal capability, Gemini enables building chatbots that can process text, images and even documents. The main challenge lies in the quality of the initial prompt that will define your chatbot's personality, tone, limits and skills. A well-structured prompt transforms Gemini into a true conversational architect, capable of generating the code, dialogue flows and business logic needed. In this guide, we offer optimized prompts to get the most out of Gemini when creating chatbots, from rapid prototyping to production deployment with error handling and advanced customization.