Performance Monitoring

Mtrix's performance monitoring captures critical metrics about your application's performance in real user environments, helping you identify issues and optimize user experience.

Core Web Vitals

Mtrix automatically tracks Core Web Vitals and other key performance metrics:

• Largest Contentful Paint (LCP): Measures loading performance

• First Input Delay (FID): Measures interactivity

• Cumulative Layout Shift (CLS): Measures visual stability

• Time to First Byte (TTFB): Measures server response time

• First Contentful Paint (FCP): Measures when first content appears

Enabling Performance Monitoring

Performance monitoring is disabled by default. Enable it during initialization:

mtrix.init({
  organizationId: 'your-organization-id',
  projectId: 'your-project-id',
  environment: 'production',
  options: {
    performanceReporting: {
      tracking: true,
      metrics: ['CLS', 'FID', 'LCP', 'TTFB', 'FCP'],
      sampleRatio: 0.5 // Track for 50% of users
    }
  }
});

Accessing Performance Data

You can access the current performance metrics programmatically:

// Get current performance metrics
const metrics = mtrix.getPerformance();

console.log('Core Web Vitals:');
console.log(`LCP: ${metrics.LCP}ms`);
console.log(`FID: ${metrics.FID}ms`);
console.log(`CLS: ${metrics.CLS}`);
console.log(`TTFB: ${metrics.TTFB}ms`);
console.log(`FCP: ${metrics.FCP}ms`);

Custom Performance Metrics

Track custom metrics relevant to your application:

// Track time to render a specific component
const startTime = performance.now();

renderComplexComponent().then(() => {
  const renderTime = performance.now() - startTime;
  
  // Track as a custom performance metric
  mtrix.trackEvent('Performance', {
    metric: 'componentRenderTime',
    value: renderTime,
    component: 'productGallery'
  });
});

Real User Monitoring Data

Performance data is collected from real users and includes:

{
  "LCP": 2341,
  "FID": 15,
  "CLS": 0.05,
  "TTFB": 187,
  "FCP": 956,
  "url": "https://example.com/products",
  "pageTitle": "Product Catalog",
  "deviceType": "Mobile",
  "browser": "Chrome",
  "connection": "4G",
  "viewport": {
    "width": 375,
    "height": 812
  },
  "timestamp": 1647532967843
}

Performance Visualization

In the Mtrix dashboard, performance data is visualized to help you understand:

• Performance trends over time

• Performance by device type, browser, and connection speed

• Correlation between performance metrics and conversion rates

• Impact of deployments on performance

Optimizing Performance with Mtrix

Identifying Issues

// Set a custom threshold for LCP
mtrix.init({
  // ... other config
  options: {
    performanceReporting: {
      tracking: true,
      thresholds: {
        LCP: 2500, // 2.5 seconds
        FID: 100,  // 100ms
        CLS: 0.1   // 0.1
      },
      // Track when metrics exceed thresholds
      trackExceededThresholds: true
    }
  }
});

When a threshold is exceeded, Mtrix will track a special event:

{
  "eventName": "PerformanceThresholdExceeded",
  "metric": "LCP",
  "value": 3245,
  "threshold": 2500,
  "url": "/products",
  "timestamp": 1647532967843
}