RUM Performance

The Performance tab in Real User Monitoring provides comprehensive insights into your web application’s loading speed, user traffic patterns, and Core Web Vitals metrics. Monitor how your application performs for real users and identify optimization opportunities.

Accessing Performance Monitoring

1. Navigate to Real User Monitoring in Last9
2. Select the Performance tab (active by default)
3. Choose your application, environment, and version from the top filters
4. Set your desired time range using the date picker

Dashboard Components

Views Over Time

Track user traffic patterns throughout your selected time period. The chart shows page view volume, helping you:

• Identify peak usage times and traffic spikes
• Detect unusual drops that might indicate issues
• Understand user behavior patterns
• Correlate performance with traffic volume

Top Paths by Views

See which pages receive the most traffic with view counts for each path. This ranking helps you:

• Prioritize optimization efforts on high-impact pages
• Focus monitoring on critical user journeys
• Understand which content drives the most engagement

Web Vitals Analysis

Monitor Core Web Vitals with real-time performance data at P75, P90, and P99 percentiles.

Grouping and Filtering

Group by Options

Click the Group by button to segment your data:

• Browser: See performance differences across Chrome, Firefox, Safari, etc.
• Screen Size: Compare desktop vs mobile vs tablet performance
• Network Type: Analyze 4G, unknown, and other connection impacts
• Device Type: Understand mobile vs desktop user experience

Path and Attribute Filtering

Use the search bar to filter by specific pages or user attributes:

Path Filtering

Filter by URL paths using these operators:

• = (equals): Exact path match
• exists: Pages where the path field is present
• not exists: Pages missing path information
• starts with: Paths beginning with specific text
• ends with: Paths ending with specific text
• contains: Paths containing specific text
• does not contain: Paths excluding specific text

Example: path starts with /api to analyze API endpoint performance

Attribute Filtering

Filter by collected attributes including:

Page Attributes:

• origin: Page origin (protocol + hostname)
• page.hash: Current page hash
• page.hostname: Current page hostname
• page.route: Current page route/path
• page.search: Current page search/query string
• page.url: Current page URL
• url.path: Current page path
• path: Folded path (for navigation)

Web Vitals Attributes:

For each web vital metric (CLS, FCP, LCP, TTFB, INP), these attributes are available:

• web_vital.<metric>.id: Unique ID for the metric
• web_vital.<metric>.value: Value of the metric
• web_vital.<metric>.timestamp: When the metric was recorded
• web_vital.<metric>.rating: Rating (‘good’, ‘needs-improvement’, ‘poor’)
• web_vital.<metric>.delta: Delta value
• web_vital.<metric>.entries_count: Number of entries
• web_vital.navigation_type: Navigation type (‘reload’, ‘navigate’)

Core Web Vitals Explained

Time To First Byte (TTFB)

• Definition: Measures server responsiveness—the time between a user’s request and when the first byte of response arrives
• Performance Thresholds:
  • 🟢 Good: ≤ 800ms
  • 🟡 Needs Improvement: ≤ 1.8s
  • 🔴 Poor: > 1.8s
• What It Means: High TTFB indicates server-side performance issues like slow database queries, inefficient processing, or network latency
• Optimization Focus: Server performance, database optimization, CDN usage, caching strategies

Largest Contentful Paint (LCP)

• Definition: Tracks when the main content becomes visible—specifically when the largest content element finishes rendering
• Performance Thresholds:
  • 🟢 Good: ≤ 2.5s
  • 🟡 Needs Improvement: ≤ 4s
  • 🔴 Poor: > 4s
• What It Means: LCP directly impacts perceived loading performance. Users judge speed based on when they see main content
• Optimization Focus: Image optimization, lazy loading, critical resource prioritization, server response times

First Contentful Paint (FCP)

• Definition: Measures when users first see any content—the time until the first text, image, or element appears
• Performance Thresholds:
  • 🟢 Good: ≤ 1.8s
  • 🟡 Needs Improvement: ≤ 3s
  • 🔴 Poor: > 3s
• What It Means: FCP indicates how quickly users perceive your page is starting to load
• Optimization Focus: Critical CSS, font loading strategies, eliminating render-blocking resources

Cumulative Layout Shift (CLS)

• Definition: Quantifies visual stability by measuring unexpected layout shifts during page loading
• Performance Thresholds:
  • 🟢 Good: ≤ 0.1
  • 🟡 Needs Improvement: ≤ 0.25
  • 🔴 Poor: > 0.25
• What It Means: High CLS creates frustrating experiences when elements move unexpectedly as users try to interact
• Optimization Focus: Size attributes for images/videos, space reservation for dynamic content

Interaction to Next Paint (INP)

• Definition: Measures interface responsiveness by tracking time between user interactions and the next visual update
• Performance Thresholds:
  • 🟢 Good: ≤ 200ms
  • 🟡 Needs Improvement: ≤ 500ms
  • 🔴 Poor: > 500ms
• What It Means: INP affects how responsive your application feels to user interactions
• Optimization Focus: JavaScript optimization, reducing main thread work, efficient event handlers

Best Practices

• Regular Monitoring: Check performance metrics weekly to catch regressions early
• Focus on High-Impact Pages: Prioritize optimization on pages with high traffic and poor performance
• Monitor All Percentiles: P99 shows what your worst-performing users experience
• Correlate with Deployments: Use version filtering to understand how releases affect performance
• Set Performance Budgets: Define acceptable thresholds for each metric and monitor against them
• Use Grouping: Segment by browser, device, or network to identify specific user experience issues

---

Troubleshooting

Please get in touch with us on Discord or Email if you have any questions.