Performance Monitoring

Performance Monitoring helps you investigate performance issues by recording resource timing, slow resources, and user interactions. Give AI the data it needs to identify and fix performance bottlenecks.

Overview

When you run a performance investigation:

  • Resource timing is captured for all assets
  • Slow resources are flagged (>1 second)
  • Large resources are identified (>100KB)
  • Device and network information is recorded
  • User interactions are tracked

Starting a Performance Investigation

  1. Open the Pointa sidebar
  2. Click the Report Issue button and select performance investigation
  3. A recording indicator appears (max 30 seconds)
  4. Interact with your application normally
  5. Click Stop when done

What Gets Captured

Resource Timing

For each resource (scripts, styles, images, fonts, etc.):

  • URL: Resource location
  • Duration: Total load time
  • Size: Transfer size
  • Type: Script, stylesheet, image, etc.
  • Timing breakdown:
    • DNS lookup time
    • TCP connection time
    • Request time
    • Response time

Slow Resources

Resources taking longer than 1 second are flagged as slow. The report shows:

  • Which resources are bottlenecks
  • How much time each consumes
  • Timing breakdown to identify the slow phase

Large Resources

Resources over 100KB are highlighted. Large resources often contribute to slow page loads, especially on slower connections.

Device Information

  • CPU core count
  • Available memory
  • Network connection type (4G, WiFi, etc.)
  • Viewport dimensions

User Interactions

All interactions during recording:

  • Clicks
  • Scrolls
  • Input events
  • Navigation

Performance Report

After stopping the investigation, you'll see a performance report with:

Summary Metrics

  • Total resources loaded
  • Number of slow resources
  • Total transfer size
  • Recording duration

Slow Resources List

Sorted by duration:

/api/large-query     - 2.3s
/images/hero.png     - 1.8s
/bundle.js           - 1.2s

Resource Breakdown

Timing details for each slow resource, showing where time is spent.

Submitting for AI Analysis

After reviewing the performance data:

  1. Add a description of the issue

    • "Page loads slowly on first visit"
    • "Images take too long to appear"
    • "API calls are blocking the UI"

  2. Click Submit

AI receives:

  • Full resource timing data
  • Slow resource details
  • Device/network context
  • Your description

What AI Can Help With

Based on the performance data, AI can suggest:

Resource Optimization

  • Compress large images
  • Lazy load below-fold content
  • Split large JavaScript bundles

Caching Improvements

  • Add caching headers
  • Implement service workers
  • Cache API responses

Network Optimization

  • Reduce API calls
  • Batch requests
  • Use connection keep-alive

Code Improvements

  • Optimize database queries
  • Add pagination
  • Reduce re-renders

Tips for Performance Monitoring

Test Representative Scenarios

Record performance during typical user flows:

  • Initial page load
  • Navigation between pages
  • Form submissions
  • Data-heavy operations

Clear Cache First

For accurate first-load metrics:

  1. Open DevTools (F12)
  2. Right-click the refresh button
  3. Select "Empty Cache and Hard Reload"
  4. Then start your performance recording

Test on Throttled Connections

Your development machine is fast. Test with:

  • DevTools Network throttling (Slow 3G)
  • Smaller viewport sizes
  • Limited CPU (DevTools Performance tab)

Focus on User-Facing Issues

Prioritize performance issues that affect user experience:

  • Time to first meaningful paint
  • Interactivity delay
  • Content layout shifts

Related Features