Chrome DevTools Performance Optimization Cookbook

<Steps>
  <Step title="Add the Pre-Built Agent">
    Visit the [Chrome Dev Tools Agent](https://continue.dev/continuedev/chrome-dev-tools-agent) on Continue Mission Control and click **"Install Agent"** or run:
    
    ```bash
    cn --agent continuedev/chrome-dev-tools-agent
    ```

    This agent includes:
    - **Optimized prompts** for performance analysis and debugging
    - **Built-in rules** for consistent formatting and error handling
    - **[Chrome DevTools MCP](https://continue.dev/google/chrome-devtools-mcp)** for reliable browser automation
  </Step>

  <Step title="Run Performance Analysis">
    In the TUI that opens, type:
    ```
    Analyze performance of http://localhost:3000 and provide optimization recommendations
    ```

    That's it! The agent handles Chrome automation automatically.
  </Step>
</Steps>

<Info>
  **Why Use the Agent?** Results are more consistent and debugging is easier thanks to the Chrome DevTools MCP integration and pre-tested prompts.
</Info>

    ```yaml
    name: Chrome DevTools MCP
    version: 0.0.1
    schema: v1
    mcpServers:
      - name: Chrome DevTools MCP
        command: npx
        args:
          - chrome-devtools-mcp@latest
    ```

    The MCP will automatically launch Chrome and connect to DevTools when needed.
  </Step>

  <Step title="Verify Setup">
    Test the connection:

    **TUI Mode Prompt:**
    ```
    Open web.dev and take a screenshot
    ```
  </Step>

  <Step title="Run Performance Analysis">
    Navigate to your project directory:

    **TUI Mode Prompt:**
    ```
    Navigate to http://localhost:3000 and record a performance trace. Analyze LCP, FID, and CLS.
    ```
  </Step>
</Steps>

<Info>
  **Manual Setup**: While you can configure the MCP manually, the pre-built agent provides optimized prompts and better error handling for performance analysis workflows.
</Info>

The agent will automatically detect and use your configuration.

Navigate to http://localhost:3000 and record a performance trace with page reload. Analyze the trace and show me the LCP, FID, CLS, and total blocking time.

Chrome DevTools Performance Panel automatically tracks:
- **Core Web Vitals**: LCP, FID, CLS, INP
- **Loading Performance**: DOMContentLoaded, Load events, First Paint
- **Runtime Performance**: JavaScript execution time, layout shifts, paint events
- **Resource Usage**: Memory consumption, CPU utilization

Record a performance trace for http://localhost:3000 and analyze all Performance Insights. For each insight found, provide detailed information about:
- The specific issue (e.g., DocumentLatency, SlowCSS)
- Root cause analysis
- Affected resources or code
- Recommended optimizations
- Expected impact on Core Web Vitals

Navigate to https://my-site.com and:
1. List all network requests made during page load
2. Identify the 5 slowest requests and their sizes
3. Find any requests over 1MB
4. Detect render-blocking resources
5. Check for inefficient caching (missing cache headers)
6. Suggest specific optimizations for each issue found

Test my site's performance under different conditions:

1. Navigate to http://localhost:3000
2. Emulate 4x CPU slowdown and Fast 3G network
3. Record a performance trace with reload
4. Analyze LCP and Total Blocking Time
5. Take a screenshot when page is fully loaded

Then repeat the test with:
- Slow 3G network + 6x CPU slowdown
- Offline network (to test service worker)

Compare results and identify which conditions cause the worst performance degradation."

Record a performance trace for http://localhost:3000 and:
1. Identify all long tasks (>50ms) blocking the main thread
2. Find the specific JavaScript functions causing these tasks
3. Measure total JavaScript execution time
4. Detect unused JavaScript being loaded
5. Show the call stack for the longest task
6. Recommend code splitting or lazy loading opportunities"

Create a performance monitoring script that:
1. Opens my site at http://localhost:3000
2. Records a performance trace with reload
3. Extracts Core Web Vitals (LCP, FID, CLS, INP)
4. Checks console for JavaScript errors
5. Takes a screenshot
6. Saves results to performance-report.json with format:
   {
     'timestamp': 'ISO date',
     'lcp': number,
     'fid': number,
     'cls': number,
     'inp': number,
     'errors': array,
     'screenshot': 'path'
   }

Save this as scripts/performance-monitor.js that I can run regularly"

Set up visual regression testing:
1. Navigate to http://localhost:3000
2. Take full-page screenshots at:
   - Desktop viewport (1920x1080)
   - Tablet viewport (768x1024)
   - Mobile viewport (375x667)
3. Save screenshots to screenshots/baseline/
4. Create a script to compare future screenshots against baseline
5. Highlight any pixel differences over 5%
6. Generate a visual diff report"

Create a performance budget checker that:

Requirements:
- LCP must be < 2.5 seconds
- FID must be < 100ms
- CLS must be < 0.1
- Total JavaScript < 300KB
- Total page size < 1MB
- No console errors

Implementation:
1. Navigate to http://localhost:3000
2. Record performance trace with reload
3. List all network requests and calculate total sizes
4. Check console messages for errors
5. Validate all metrics against budgets
6. Exit with code 1 if any budget is exceeded
7. Generate a detailed report showing pass/fail for each metric

Save as scripts/performance-budget.js for CI/CD integration"

name: Performance Check

on:
  pull_request:

jobs:
  performance:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: "20"

      - name: Install Dependencies
        run: |
          npm install -g @continuedev/cli
          npm ci

      - name: Build Project
        run: npm run build

      - name: Start Dev Server
        run: |
          npm run dev &
          npx wait-on http://localhost:3000

      - name: Run Performance Tests
        env:
          CONTINUE_API_KEY: ${{ secrets.CONTINUE_API_KEY }}
        run: |
          cn --agent continuedev/chrome-dev-tools-agent \
             -p "Navigate to http://localhost:3000 and:
             1. Record performance trace with reload
             2. Extract LCP, FID, CLS values
             3. List network requests and calculate total bundle size
             4. Output results as JSON to performance.json" \
             --auto

      - name: Check Performance Budgets
        run: |
          node << 'EOF'
          const fs = require('fs');
          const perf = JSON.parse(fs.readFileSync('performance.json'));

          const budgets = {
            lcp: 2.5,
            fid: 100,
            cls: 0.1,
            bundleSize: 300000
          };

          let failed = false;
          const results = [];

          if (perf.lcp > budgets.lcp) {
            results.push(`❌ LCP: ${perf.lcp}s (budget: ${budgets.lcp}s)`);
            failed = true;
          } else {
            results.push(`✅ LCP: ${perf.lcp}s`);
          }

          if (perf.fid > budgets.fid) {
            results.push(`❌ FID: ${perf.fid}ms (budget: ${budgets.fid}ms)`);
            failed = true;
          } else {
            results.push(`✅ FID: ${perf.fid}ms`);
          }

          if (perf.cls > budgets.cls) {
            results.push(`❌ CLS: ${perf.cls} (budget: ${budgets.cls})`);
            failed = true;
          } else {
            results.push(`✅ CLS: ${perf.cls}`);
          }

          if (perf.bundleSize > budgets.bundleSize) {
            results.push(`❌ Bundle: ${perf.bundleSize}KB (budget: ${budgets.bundleSize}KB)`);
            failed = true;
          } else {
            results.push(`✅ Bundle: ${perf.bundleSize}KB`);
          }

          console.log(results.join('\n'));

          if (failed) {
            process.exit(1);
          }
          EOF

      - name: Comment Performance Results
        if: always()
        uses: actions/github-script@v7
        with:
          script: |
            const fs = require('fs');
            const perf = JSON.parse(fs.readFileSync('performance.json'));

            const comment = `## 📊 Performance Report

            | Metric | Value | Budget | Status |
            |--------|-------|--------|--------|
            | LCP | ${perf.lcp}s | 2.5s | ${perf.lcp <= 2.5 ? '✅' : '❌'} |
            | FID | ${perf.fid}ms | 100ms | ${perf.fid <= 100 ? '✅' : '❌'} |
            | CLS | ${perf.cls} | 0.1 | ${perf.cls <= 0.1 ? '✅' : '❌'} |
            | Bundle Size | ${perf.bundleSize}KB | 300KB | ${perf.bundleSize <= 300 ? '✅' : '❌'} |

            ${perf.lcp > 2.5 || perf.fid > 100 || perf.cls > 0.1 || perf.bundleSize > 300
              ? '⚠️ **Performance budgets exceeded. Please optimize before merging.**'
              : '✅ **All performance budgets met!**'}`;

            github.rest.issues.createComment({
              issue_number: context.issue.number,
              owner: context.repo.owner,
              repo: context.repo.repo,
              body: comment
            });

Compare performance between my site and competitors:

Sites to test:
- http://localhost:3000 (my site)
- https://competitor1.com
- https://competitor2.com

For each site:
1. Navigate to homepage
2. Record performance trace with reload
3. Extract LCP, FID, CLS, Total Blocking Time
4. List network requests and calculate total page size
5. Count JavaScript and CSS files

Create a comparison table showing:
- Site name
- All Core Web Vitals
- Total page size
- Number of requests
- Which site performs best for each metric

Provide specific recommendations for how my site can improve based on what competitors do better."

Test performance across all major routes:

Routes to test:
- / (homepage)
- /products
- /products/[id] (pick a sample product)
- /checkout
- /blog

For each route:
1. Navigate to the URL
2. Record performance trace
3. Extract LCP, Total Blocking Time, bundle size
4. Check console for errors
5. Take a screenshot

Generate a report showing:
- Which routes have the worst LCP
- Routes with the most JavaScript errors
- Bundle size variations across routes
- Recommendations for route-specific optimizations"

Analyze mobile performance for http://localhost:3000:

1. Resize viewport to mobile (375x667)
2. Emulate Slow 3G network + 4x CPU slowdown
3. Record performance trace with reload
4. Analyze Performance Insights for mobile-specific issues
5. Check for:
   - Touch target sizes too small
   - Horizontal scrolling issues
   - Oversized images not optimized for mobile
   - Excessive JavaScript on mobile
6. Take mobile screenshot
7. Provide mobile-specific optimization recommendations"

Debug performance regression on http://localhost:3000:

1. Record performance trace
2. Analyze all Performance Insights
3. List console errors and warnings
4. Check network requests for:
   - Failed requests
   - Slow requests (>1s)
   - Large requests (>500KB)
5. Identify the top 3 performance bottlenecks
6. For each bottleneck, suggest:
   - Root cause
   - Specific code or resource causing it
   - Step-by-step fix
   - Expected performance improvement"

  **Tools Available**
  - `performance_start_trace`: Start recording with auto-reload
  - `performance_stop_trace`: Stop and analyze trace
  - `performance_analyze_insight`: Deep dive into specific issues

  **Tools Available**
  - `list_network_requests`: See all requests and sizes
  - `get_network_request`: Inspect specific request details
  - `emulate_network`: Test under various network conditions

  **Tools Available**
  - `list_console_messages`: Get all console logs and errors
  - `evaluate_script`: Run JavaScript in page context
  - Automatic error pattern detection

  **Tools Available**
  - `take_screenshot`: Capture full or partial page
  - `take_snapshot`: Get accessibility tree snapshot
  - `resize_page`: Test responsive layouts

Compare performance of two implementations:
1. Test variant A at http://localhost:3000?variant=A
2. Test variant B at http://localhost:3000?variant=B
Run each test 5 times and calculate average LCP, FID, CLS
Determine which variant has better performance and by how much

Create a script that runs daily performance audits:
1. Navigate to production site
2. Record performance trace
3. Calculate Lighthouse-style performance score based on:
   - FCP (10%)
   - SI (10%)
   - LCP (25%)
   - TTI (10%)
   - TBT (30%)
   - CLS (15%)
4. Track score over time in performance-history.json
5. Alert if score drops below 90

Set up automated regression detection:
1. Record baseline performance for main branch
2. Save baseline metrics to baseline-perf.json
3. On each PR, run performance tests
4. Compare PR metrics with baseline
5. Flag regressions over 10% for any metric
6. Generate visual diff report with screenshots