Optimize React application performance
Optimize your React application to achieve excellent Core Web Vitals metrics through advanced memoization techniques and code splitting.
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 :** ```jsx [COLLER_LE_COMPOSANT_REACT] ``` Analyse et optimise en couvrant : 1. **Re-renders inutiles** : identifie les causes et applique React.memo, useMemo, useCallback avec justification pour chaque usage. 2. **Code splitting** : identifie les opportunités de lazy loading avec React.lazy et Suspense. 3. **Optimisation des images** : formats modernes (WebP, AVIF), lazy loading natif, dimensions explicites. 4. **Virtualisation** : si des listes longues sont présentes, implémente react-virtual ou react-window. 5. **Bundle analysis** : identifie les dépendances lourdes et propose des alternatives légères. 6. **Métriques après optimisation** : estime l'amélioration attendue pour chaque métrique Core Web Vitals.
Why this prompt works
<p>This prompt integrates Core Web Vitals metrics as a starting point because they provide measurable objectives and align with Google's ranking criteria. This data-driven approach ensures that optimizations are prioritized based on their actual impact on user experience.</p><p>The requirement for 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 frequent misuse among intermediate React developers.</p><p>Estimating expected gains for each optimization transforms the analysis into a prioritized action plan, allowing efforts to be focused on high-impact changes before tackling micro-optimizations.</p>
Use Cases
Expected Output
An analysis of React performance issues with optimized code, explanations of optimizations and estimation of gains on Core Web Vitals.
Learn more
Check the full skill on Prompt Guide to master this technique from A to Z.
View on Prompt GuideGlossary Terms
Similar Prompts
Learn the basics of Git for beginners
Learn Git from scratch with illustrated explanations, concrete examples, a practical workflow and a cheatsheet of essential commands.
Define a Git strategy for a team
Define a comprehensive Git strategy adapted to your team: branching model, conventions, code review and release management.
Configure a CI/CD pipeline with GitHub Actions
Configure a professional CI/CD pipeline with GitHub Actions covering testing, security, Docker build and multi-environment deployment.
Write integration tests for an API
Create comprehensive API integration tests with database setup, authentication, CRUD and end-to-end scenarios.