Find why a page is slow and prove the fix with a second trace

Your agent records a performance trace of your slow page in Chrome, explains the biggest problem, makes one fix and records a second trace so you can compare.

Pluginboard· Posted Oct 26· 5 steps

No ratings yet · be the first

Before you start

Chrome DevTools MCP runs on your machine through npx (chrome-devtools-mcp@latest) and needs Node.js and a current Chrome. Chrome starts the first time your agent uses a tool that needs it. Your agent can see and change anything in that browser, so don't sign in to personal accounts there. The performance tools may send trace URLs to Google's Chrome UX Report API; the maker documents --no-performance-crux to turn that off.

Record a baseline

Start your dev server, then ask for a trace of the slow page without changing any code. You need numbers to compare against later.

Say to Claude Code

My app is running at [http://localhost:3000/your-page] and it loads slowly. Record a performance trace of a fresh page load, tell me the main insights, and don't change any code yet.

Look into the biggest one

The server can drill into a single insight, such as a slow Largest Contentful Paint.

Say to Claude Code

Find why a page is slow and prove the fix with a second trace

Before you start

Record a baseline

Look into the biggest one

Ratings

Browse plugins, skills and use-case recipes by category.

Find why a page is slow and prove the fix with a second trace

Before you start

Record a baseline

Look into the biggest one

Make one change

Record again and compare

Check nothing broke

What you get

Ratings

Ratings

Ratings

More recipes with Chrome DevTools MCP