Group
  • Performance

    Reduce my client-side hydration and rendering cost

    Find where JavaScript re-renders what the server already rendered, and cut interactivity down to what needs it.

    • Improve quality
    • Debug & fix
    • Advanced
    • General

Free Prompt

My pages ship a lot of JavaScript that runs on load to make everything interactive, and on slower devices the page looks ready but doesn't respond to taps for seconds (main thread busy). Reduce the client-side work my pages do on load: 1. Measure the problem: total blocking time and main-thread work on my key pages using a throttled CPU profile. Identify which components/libraries account for the most scripting time on load. 2. Find over-interactive components: things that ship JS behavior but are static 99% of the time (marketing copy sections, footers, static cards, content that never changes after render). Make them plain HTML with no client-side JS. 3. Defer interactivity below the fold: components the user can't see yet shouldn't execute their setup code on initial load. Lazy-hydrate or initialize on visibility/interaction. 4. Check for duplicate rendering: components that render on the server and then immediately re-render on the client with the same data, doubling the work. Fix state initialization so the client picks up where the server left off. 5. Audit load-time initialization: analytics, observers, event listeners, timers set up for components before they're needed. Defer what's deferrable. Don't remove interactivity users expect (menus, forms, live data) to hit a metric; the goal is less work for the same behavior. The deliverable is the measurement first, then the specific changes ranked by main-thread time saved, with before/after total blocking time on a throttled profile.

What This Does / How This Helps

This measures how much JavaScript runs when your pages load, finds components doing client-side work they don't need, and cuts hydration and initialization down to what actually requires interactivity. The 'looks loaded but ignores your taps' problem is how heavy hydration feels to a user, and it's worst exactly where you can least afford it: mid-range phones. Vibe-coded apps commonly make every component fully interactive because that's the framework default, so a static marketing section costs the same main-thread time as a live dashboard. Trimming hydration to what needs it makes the whole app feel faster without changing a single visual.

Want to skip doing this by hand?

Fortivibe audits your app for all of the areas these prompts cover (and more).

See What We Check

Related Prompts