Performance Optimization Template
A template for identifying and resolving performance bottlenecks including bundle size reduction, query optimization, caching strategies, and Core Web Vitals improvements.
Template Preview
Copy and use in your projectOptimize performance for [Page/Feature/API]
As a user, I want the application to load and respond quickly so that I can complete my tasks without frustration caused by slow page loads or laggy interactions.
Description
Acceptance Criteria
Given the optimizations are deployed
When I run a Lighthouse performance audit on the target page
Then the Performance score is 90 or above and all Core Web Vitals are in the 'Good' range
Given the JavaScript bundle has been optimized
When I analyze the bundle with next/bundle-analyzer
Then the total JS shipped to the client is reduced by at least 20% compared to the pre-optimization baseline
Given the API endpoint has been optimized
When I measure the p95 response time under normal load
Then responses return within 500ms and database queries use efficient indexes without N+1 patterns
Given the optimizations are in place
When I navigate through the application on a mid-tier mobile device (Moto G Power)
Then the experience feels smooth with no visible jank, layout shifts, or input delay
Import directly into Codepylot
Skip the copy-paste. Codepylot has built-in templates you can use with one click, plus AI that generates even richer stories from your ideas.
Try Codepylot Free