Web Vitals Monitoring

This documentation provides a step-by-step guide to setting up web vitals monitoring using SigNoz and OpenTelemetry. In short, you’ll capture Core Web Vitals from real users—a RUM (Real User Monitoring)–style approach—so you can analyze field performance in SigNoz.

Overview

Web vitals are essential metrics to measure the user experience on your website. SigNoz allows you to monitor these vitals seamlessly using OpenTelemetry. The key web vitals are:

• Largest Contentful Paint (LCP)
• Interaction to Next Paint (INP)
• Cumulative Layout Shift (CLS)
• Time to First Byte (TTFB)
• First Contentful Paint (FCP)

Metrics vs Traces: Choosing the Right Approach

Web vitals can be exported as either metrics or traces in OpenTelemetry, and the choice depends on your specific use case:

Exporting as Metrics

Best for larger scale deployments where sampling might be required:

• Provides aggregated statistical data (percentiles, histograms)
• More efficient for high-volume applications
• Better for trend analysis and alerting
• Easier to implement sampling strategies
• Ideal when you need to monitor overall performance trends across your user base

Exporting as Traces

Best for simple, straightforward cases:

• Provides detailed, individual performance data for each page load
• Better for debugging specific user issues
• Easier to correlate with other trace data
• More suitable for development and debugging scenarios
• Ideal when you need granular visibility into individual user experiences
• Enables easy addition of custom attributes for RUM (Real User Monitoring) features like browser information, user ID, device type, and other contextual data

Choose the approach that aligns with your monitoring goals and infrastructure requirements. For production environments with high traffic, histogram metrics are often the better choice, while traces provide more detailed insights for development and troubleshooting scenarios.