profiling-performance

Performance Profile

Use this skill when a web application feels slow, janky, or unresponsive. Cursor's built-in browser has CPU profiling tools that capture real call stacks and timing data.

How It Works

The cursor-ide-browser MCP provides browser_profile_start and browser_profile_stop tools that capture Chrome DevTools-format CPU profiles. Profile data is written to ~/.cursor/browser-logs/ as both raw JSON and a human-readable summary.

Steps

1. Ensure the app is running — start the dev server if it isn't already running.

1. Navigate to the slow page:

   Tool: browser_navigate
   Arguments: { "url": "http://localhost:3000/slow-page" }

1. Start profiling:

   Tool: browser_profile_start

1. Reproduce the slow interaction — use browser tools to trigger the slow behavior:

• Click buttons, scroll, type in inputs, navigate between pages
• Use browser_click, browser_scroll, browser_fill to interact
• Wait a few seconds for the interaction to complete

1. Stop profiling:

   Tool: browser_profile_stop

This writes two files to ~/.cursor/browser-logs/:

• cpu-profile-{timestamp}.json — raw Chrome DevTools profile
• cpu-profile-{timestamp}-summary.md — human-readable summary

1. Analyze the results — read both files. Key things to look for in the raw JSON:

• profile.nodes[].hitCount — how many samples hit each function
• profile.nodes[].callFrame.functionName — the function names
• profile.samples.length — total number of samples collected

Cross-reference with the summary to identify:

• Functions consuming the most CPU time
• Unexpected re-renders or layout thrashing
• Expensive third-party library calls
• Synchronous operations blocking the main thread

1. Suggest fixes — based on the profile data, recommend specific optimizations:

• Memoize expensive computations
• Debounce rapid event handlers
• Move heavy work to a Web Worker
• Lazy-load components or routes
• Virtualize long lists

Notes

• Always read the raw .json profile to verify the summary — the summary can miss nuances.
• Profile in development mode first, but be aware that React dev mode adds overhead. For accurate measurements, profile a production build.
• Short profiles (2-5 seconds of interaction) are usually more useful than long ones.
• Compare before/after profiles to verify your optimization actually helped.