Skip to content
Agent loop · Browser & QA

Web Vitals Until Budget

Measure Core Web Vitals and bundle size with Lighthouse, fix the biggest offender, and re-measure until each key page fits your performance budget.

Up to 8 iterationsStop rules and safety limits
The prompt

Copy the Web Vitals Until Budget loop

Stops when every listed page meets the LCP, CLS, TBT, and JavaScript size budgets across three runs, or after 8 iterations. Edit the settings block, then paste the whole prompt into your agent.

web-vitals-until-budget.prompt.md
You are running the "Web Vitals Until Budget" loop.

Settings (edit before running):
- Build and serve: npm run build && npm run start (production mode, never the dev server)
- Pages: http://localhost:3000/, /pricing, /blog
- Budget (median of 3 mobile Lighthouse runs): LCP under 2.5 s, CLS under 0.1, TBT under 200 ms, JavaScript under 200 KB compressed per page
- Max iterations: 8

Goal: every page meets every budget.

Each iteration:
1. Build and serve the production build.
2. Run Lighthouse in mobile mode three times per page and record the median LCP, CLS, TBT, and total JavaScript transferred.
3. Pick the page and metric furthest over budget. Read the diagnostics: LCP element, render-blocking resources, long tasks, layout shift sources, largest scripts.
4. Apply one targeted fix, for example: size and compress the LCP image and give it priority, defer or split a heavy script, lazy-load below-the-fold components, preload the main font with a fallback, reserve space for images and embeds.
5. Rebuild and re-measure. If the median did not improve, revert the change and try another approach.
6. Log: iteration, page, metric, before, after, change.

Stop when:
- Every page meets every budget. Success.
- You reach the max iteration count.

Rules:
- Measure production builds only, with the same settings every time.
- Do not remove features, content, or analytics the page needs, and do not special-case Lighthouse's user agent.
- Keep visual output the same unless a change is needed to prevent layout shift; describe any visible change.

Final report: a before and after table per page, changes kept, and changes tried and reverted.
When to use it

When this loop fits

  • Search Console flags poor Core Web Vitals on important pages.
  • A new feature or dependency made the main bundle noticeably heavier.
  • You want a performance budget enforced before launch instead of after complaints.
How it works

What happens on each pass

The agent repeats these steps until the stop condition holds or it runs out of iterations.

  1. Measure a baseline. Run Lighthouse three times per page against a production build and take the median.
  2. Find the biggest offender. Use the report's diagnostics to find what dominates the worst metric: an image, a script, a font, or a layout shift.
  3. Fix one thing. Apply one targeted fix such as image sizing, code splitting, preloading, or reserving space.
  4. Re-measure. Rebuild, re-run Lighthouse three times, and keep the change only if the median improves.
Recommended servers

MCP servers for this loop

The 6 strongest of 575 matching servers, ranked by how closely they fit and then by trust score.

More in Browser automation
  • Trust score 67 of 100, Good

    Google PageSpeed Insights — runs Lighthouse against any public URL and returns the performance…

    RegistryRemote
    LicenseQualityMaintenanceLicense: A. MIT is a permissive open source license.Quality: Not graded. No README or tool list has been captured yet.Maintenance: A. Last commit or release 9 days ago.
    0 stars19/wk weekly downloads— tools
  • Trust score 54 of 100, Fair

    Google PageSpeed Insights and CrUX: six workflow tools for web performance.

    Registry
    LicenseQualityMaintenanceLicense: A. Apache-2.0 is a permissive open source license.Quality: Not graded. No README or tool list has been captured yet.Maintenance: A. Last commit or release 23 days ago.
    72 stars1.5K/wk weekly downloads— tools
  • Trust score 52 of 100, Fair

    Access saved Google and Bing brand-search ad observations and reports through Ads Lighthouse.

    RegistryRemote
    LicenseQualityMaintenanceLicense: Not graded. No license is recorded for this server.Quality: Not graded. No README or tool list has been captured yet.Maintenance: Not graded. No commit or release date has been recorded.
    — stars—/wk weekly downloads— tools
  • PageSpeed & Lighthouse Checker logo
    Trust score 52 of 100, Fair

    Lighthouse scores, Core Web Vitals (LCP, CLS, INP/TBT) and top fixes for any URL, mobile or desktop.

    RegistryRemote
    LicenseQualityMaintenanceLicense: Not graded. No license is recorded for this server.Quality: Not graded. No README or tool list has been captured yet.Maintenance: Not graded. No commit or release date has been recorded.
    — stars—/wk weekly downloads— tools
Run it

How to run this loop

  1. Connect the tools. Install a server the loop can use, for example Pagespeed Insights, or rely on your agent's built-in terminal and file access.
  2. Edit the settings block. Replace the example commands, targets, and limits with your project's own. Keep the iteration cap low on the first run.
  3. Paste it into an agent session. Start a fresh session in Claude Code, Cursor, or VS Code agent mode, in the repository root, and paste the prompt.
  4. Review before you merge. Read the final report and the diff. The loop leaves its work for you to review rather than shipping it.
FAQ

Web Vitals Until Budget questions

When does the Web Vitals Until Budget loop stop?

It stops as soon as every listed page meets the LCP, CLS, TBT, and JavaScript size budgets across three runs. It also stops after 8 iterations by default, or earlier when the prompt's own stop rules say it is stuck, and then reports what changed and what is left. Change the cap in the settings block at the top of the prompt.

Why does the loop take the median of three Lighthouse runs?

Lighthouse scores vary from run to run because of CPU load, network timing, and caching. A single run can make a useless change look like a win. The median of three runs is a cheap way to keep the agent from chasing noise.

Will passing the budget in Lighthouse fix my Search Console report?

It usually helps, but Search Console uses field data from real users over 28 days, while Lighthouse is a lab test on one machine. Ship the improvements, then watch field data over the following weeks to confirm the change.

Keep exploring
All loops