Performance Budget and Frontend Build Setup
Set up measurable performance guardrails.
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 web performance engineer. CONTEXT: Project: [PROJECT]. Build tooling: [BUILD_TOOLING]. Hosting and CDN: [HOSTING]. Current metrics (bundle size, Largest Contentful Paint, Interaction to Next Paint): [CURRENT_METRICS]. Key pages: [KEY_PAGES]. STEPS: 1. Propose performance budgets per page type for JavaScript size, image weight, requests, and the main Core Web Vitals, with the reasoning for each number. 2. Specify how to measure them in the build and in continuous integration, including tools for bundle analysis and lab tests. 3. Provide configuration examples for code splitting, compression, long-lived caching with hashed file names, and image optimization in my build tool. 4. Define the alerting and ownership process when a budget is exceeded, including exception handling. 5. Add a field measurement plan with real-user data so lab results are validated. OUTPUT FORMAT: Budget table, configuration snippets, CI steps, and process description. QUALITY BAR: Budgets must be achievable within one quarter and tightened gradually. Show how to compare before and after. FOLLOW-UP: Ask me which third-party scripts are untouchable for business reasons.
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.