Web Vitals without vendor lock-in

How it works?

Overview

The Problem with current RUM tools

Real User Monitoring tools exist. Vercel Speed Insights, Sentry, DataDog — they all offer some form of performance tracking. But enterprises consistently hit three barriers:

Cost. Getting real Core Web Vitals data means buying into entire platforms. You don't need another dashboard subscription — you need a feature.

Bad implementation. Tools exist but aren't configured correctly. We've seen this firsthand: CookUnity had unreliable analytics data and bad tooling implementation. Months of data, none of it actionable.

Fragmentation. Backend teams use DataDog. Marketing uses Google Analytics. Frontend uses SpeedCurve. No unified view. No single source of truth connecting real user performance to business outcomes.

Many teams default to Google Analytics for performance data. The problem? GA data is delayed by weeks. You're diagnosing last month's problems, not today's regressions.

How next-cwv-monitor solves it

A lightweight client SDK automatically collects Core Web Vitals from every user session. Data flows to a self-hosted ClickHouse backend optimized for time-series analytics. A real-time dashboard surfaces route-level performance with percentile breakdowns (p50, p75, p90, p95), distribution histograms, and time-series comparisons.

No platform fees. No data leaving your infrastructure. No vendor lock-in.

Architecture overview

The system has three components:

1. Client SDK — A lightweight script that hooks into the web-vitals API. Automatically detects routes in both App Router and Pages Router. Collects LCP, INP, CLS, TTFB, FCP, and FID with zero configuration.

2. Ingestion Layer — Handles 1,000+ events per second without data loss. Batches and streams events to ClickHouse with 90-day default retention.

3. Dashboard — Overview page provides an at-a-glance health check in a single screen. Route detail views show time-series charts, percentile breakdowns, and distribution histograms. Loads in under 2 seconds for typical datasets (100K+ events).

Data flow

User visits your app → SDK collects CWV metrics → Events batched and sent to ingestion endpoint → ClickHouse stores and indexes → Dashboard queries and visualizes in real-time.

Get started

Step 1: Deploy the monitoring stack

Spin up the ClickHouse backend and dashboard using Docker. A single docker-compose up gets you the ingestion layer and monitoring dashboard running on your infrastructure.

Step 2: Install the SDK

Add the lightweight client SDK to your Next.js app. Works with both App Router and Pages Router — automatic route detection means zero configuration for most setups.

Step 3: Start collecting data

Deploy your updated app. Within minutes, real user Core Web Vitals start flowing into your dashboard. Route-level breakdowns, percentile analysis, and regression detection — all from real field data.

Roadmap

• Custom business event correlation (connect CWV to conversion funnels)
• Alerting system for performance regressions
• Multi-project support for teams managing multiple Next.js apps
• Export API for integrating with existing BI tools
• Extended retention configuration and data archival

Outcome

Stop paying platform fees to understand your own application's performance. next-cwv-monitor gives you the same real user monitoring capabilities as enterprise tools — self-hosted, open source, and fully under your control. Track regressions the moment they happen, not weeks later. Connect performance to the metrics that actually matter to your business.

Built by the team that delivered 70% LCP improvements for CookUnity, monitored 150M+ monthly visits across Iberion's portals, and maintained 18+ months of zero performance regressions for revenue-critical applications.