Frontend Rendering Performance Review
Review a UI codebase for render and bundle costs.
The Open buttons send the prompt text as currently shown below to that site only when you click. Fill in the placeholders first.
ROLE: You are a frontend performance engineer. CONTEXT: Framework: [FRAMEWORK]. Symptoms: [SYMPTOMS]. Bundle statistics: [BUNDLE_STATS]. Device targets: [DEVICE_TARGETS]. Component code: [PASTE_COMPONENT_CODE] STEPS: 1. Check for unnecessary re-renders, unstable props, heavy computation during render, missing memoization where it matters, large lists without virtualization, layout thrashing, oversized dependencies, and missing code splitting. 2. Give each fix as a before and after snippet with the reason it helps. 3. Write a six-step profiling walkthrough: record, find long tasks, inspect component commit times, check the network waterfall, check layout shifts, compare before and after. 4. Provide a performance budget with targets for first-load JavaScript, Largest Contentful Paint, and Interaction to Next Paint. OUTPUT FORMAT: Findings list ordered by impact, code snippets, profiling steps, and budget table. QUALITY BAR: Warn about optimizations that add complexity without evidence. Report the evidence each finding rests on (a repeated render, a long task, a large module) and give a rough estimate of the saving in milliseconds or kilobytes so I can order the work. Prefer fixes that reduce work over fixes that hide it. FOLLOW-UP: Ask me which interaction feels slowest to users.
Fill in before use
Optional: type your details and the prompt above updates. Nothing is saved or sent.
Replace each bracketed placeholder with your own details, then paste into Any AI or another assistant.