Automatically optimizes application code to meet predefined performance budgets. Uses performance audits to measure key metrics like load time, First Contentful Paint (FCP), Largest Contentful Paint (LCP), and Cumulative Layout Shift (CLS). Iteratively refines codebase through targeted optimizations until budget targets are satisfied.
Achieve sub-second load times and optimal Core Web Vitals scores
Provide your application codebase and performance budget targets. The agent will automatically optimize assets, streamline delivery, and eliminate performance bottlenecks until all metrics meet the defined budget.
Setup Environment
Ensure you have Node.js installed along with Lighthouse CLI and required dependencies for performance auditing
Provide Codebase & Budget
Share your application files and specify target performance metrics or let the agent use standard web vitals thresholds
Initiate Optimization Loop
Run the loop and allow the agent to perform iterative optimizations while monitoring performance audits after each change
Analyze current performance baseline using Lighthouse audit
Tool: lighthouse-cli · Input: static HTML/CSS/JS files or live URL · Output: performance-report.json
Identify top 3 performance bottlenecks based on audit results
Tool: node-analyzer · Input: performance-report.json · Output: bottleneck-list.md
Performance
Iteratively reduces JavaScript bundle size by analyzing dependencies, identifying large modules, and applying targeted optimizations until a specified size target is met.
Performance
Automatically improves frontend page speed by iteratively analyzing Lighthouse reports and applying targeted optimizations. This loop runs until your target Lighthouse performance score is achieved.
Performance
This loop identifies and optimizes slow API endpoints by continuously benchmarking, analyzing performance bottlenecks, and applying targeted improvements until response times meet predefined budgets.
Apply targeted optimizations (e.g., lazy loading, minification, critical CSS)
Tool: code-modifier · Input: bottleneck-list.md + source files · Output: optimized-code/*
Re-run performance audit to validate improvements
Tool: lighthouse-cli · Input: optimized-code/ · Output: updated-performance-report.json
Evaluate if exit conditions are met; if not, return to step 2
Tool: condition-checker · Input: updated-performance-report.json + budget targets · Output: proceed-flag
Start the "Performance Budget Guardian" loop. Goal: Achieve sub-second load times and optimal Core Web Vitals scores Max iterations: 10 Between iterations run: lighthouse --view --output=json --output-path=./lighthouse-report.json && node analyze-lighthouse.js Exit when: All performance metrics within budget thresholds (Load Time < 1000ms, FCP < 1000ms, LCP < 2500ms, CLS < 0.1) I want to optimize my application to meet a performance budget. Here's my codebase: [INSERT CODEBASE]. My target metrics are: [INSERT TARGETS]. Please begin optimizing by identifying bottlenecks, applying fixes, and re-auditing until performance goals are reached. Self-pace this loop. After each iteration, run `lighthouse --view --output=json --output-path=./lighthouse-report.json && node analyze-lighthouse.js` and evaluate the output, and only continue if the exit condition is not met (All performance metrics within budget thresholds (Load Time < 1000ms, FCP < 1000ms, LCP < 2500ms, CLS < 0.1)). Stop when the exit condition passes or 10 iterations are reached. Give a short status update each pass.
