{
"$type": "site.standard.document",
"bskyPostRef": {
"cid": "bafyreibopvowztsn7pzp4tepobmxnybtshvkruyyv6hiujaanh53skbkr4",
"uri": "at://did:plc:25rdn5elo5izoxrmtis34zuk/app.bsky.feed.post/3mom7jqq5trd2"
},
"coverImage": {
"$type": "blob",
"ref": {
"$link": "bafkreicaodk2nriweqqtwkqwneuhxij75hzplzhebg3gv32nshv67mrzrq"
},
"mimeType": "image/webp",
"size": 66872
},
"path": "/feidou/real-user-monitoring-measuring-web-performance-in-production-32b6",
"publishedAt": "2026-06-19T01:20:00.000Z",
"site": "https://dev.to",
"tags": [
"saas",
"analytics",
"performance",
"web",
"tanstackship.com",
"Core Web Vitals Optimization Guide",
"Performance Budgeting: Setting Targets and Automating Enforcement",
"SaaS Monitoring and Observability Guide",
"Lighthouse 95+ Optimization Tips for SaaS"
],
"textContent": "Lab tests (Lighthouse, CI benchmarks) tell you how your app performs on a test machine. Real User Monitoring tells you how your app performs for actual users on their devices, networks, and locations. RUM catches performance issues that lab tests never will — slow connections, memory pressure, ad blocker interference, and geographic variance. This guide covers the RUM implementation at tanstackship.com.\n\n## Lab vs Field Data\n\nAspect | Lab (Lighthouse) | Field (RUM)\n---|---|---\n**Environment** | Controlled (Moto G4, slow 3G) | Real user devices\n**Network** | Simulated throttling | Actual connections (5G, 4G, 3G, WiFi)\n**Location** | Single location | Global (330+ Cloudflare locations)\n**Device** | Fixed device profile | All devices and form factors\n**Sample size** | Single run per PR | Every page load\n**Detects** | Optimization opportunities | Actual user experience issues\n**Missing** | What real users experience | Controlled comparison\n\n**The truth** : Lab data tells you what to fix. Field data tells you what users actually experience. You need both.\n\n## RUM Data Collection\n\n### Setting Up Web Vitals Collection\n\n\n // src/lib/rum.ts\n import { onLCP, onCLS, onINP, onTTFB, onFCP } from \"web-vitals/attribution\"\n\n type VitalName = \"LCP\" | \"CLS\" | \"INP\" | \"TTFB\" | \"FCP\"\n\n interface VitalReport {\n name: VitalName\n value: number\n rating: \"good\" | \"needs-improvement\" | \"poor\"\n id: string\n metadata: Record<string, string>\n deviceType: string\n connectionType: string\n }\n\n export function initRUM() {\n const vitals: Array<{ name: VitalName; fn: (metric: any) => void }> = [\n { name: \"LCP\", fn: onLCP },\n { name: \"CLS\", fn: onCLS },\n { name: \"INP\", fn: onINP },\n { name: \"TTFB\", fn: onTTFB },\n { name: \"FCP\", fn: onFCP },\n ]\n\n vitals.forEach(({ name, fn }) => {\n fn((metric) => {\n sendVital({\n name,\n value: metric.value,\n rating: metric.rating,\n id: metric.id,\n metadata: extractAttribution(metric),\n deviceType: getDeviceType(),\n connectionType: getConnectionType(),\n })\n })\n })\n }\n\n function extractAttribution(metric: any): Record<string, string> {\n if (metric.attribution) {\n // Extract useful debugging info\n const { element, url, fcp, ...rest } = metric.attribution\n return {\n ...(element && { lcpElement: element.tagName }),\n ...(url && { lcpUrl: url }),\n }\n }\n return {}\n }\n\n function getDeviceType(): string {\n const ua = navigator.userAgent\n if (/Mobi|Android/i.test(ua)) return \"mobile\"\n if (/Tablet|iPad/i.test(ua)) return \"tablet\"\n return \"desktop\"\n }\n\n function getConnectionType(): string {\n const conn = (navigator as any).connection\n return conn?.effectiveType ?? \"unknown\"\n }\n\n\n### Sending RUM Data to the Backend\n\n\n // Use sendBeacon for reliable delivery (survives page navigation)\n function sendVital(report: VitalReport) {\n const payload = {\n ...report,\n pathname: window.location.pathname,\n timestamp: Date.now(),\n }\n\n if (navigator.sendBeacon) {\n navigator.sendBeacon(\"/api/vitals\", JSON.stringify(payload))\n } else {\n fetch(\"/api/vitals\", {\n method: \"POST\",\n body: JSON.stringify(payload),\n keepalive: true,\n })\n }\n }\n\n\n### Server-Side Storage\n\n\n // server/rum.ts\n export const reportVital = createServerFn({ method: \"POST\" }).handler(\n async ({ request, context }) => {\n const data = await request.json()\n\n // Store in D1 for querying\n await context.env.DB.prepare(`\n INSERT INTO rum_metrics (\n id, name, value, rating, pathname,\n device_type, connection_type,\n country, metadata, created_at\n ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)\n `).bind(\n data.id,\n data.name,\n data.value,\n data.rating,\n data.pathname,\n data.deviceType,\n data.connectionType,\n request.cf?.country ?? \"unknown\",\n JSON.stringify(data.metadata),\n data.timestamp\n ).run()\n\n return { received: true }\n }\n )\n\n\n## Analyzing RUM Data\n\n### Querying by Metric\n\n\n export const getRumDashboard = createServerFn({ method: \"GET\" }).handler(\n async ({}, { context }) => {\n // Overall metrics for the last 7 days\n const overall = await context.env.DB.prepare(`\n SELECT\n name,\n COUNT(*) as samples,\n APPROX_PERCENTILE(value, 0.5) as p50,\n APPROX_PERCENTILE(value, 0.75) as p75,\n APPROX_PERCENTILE(value, 0.95) as p95,\n SUM(CASE WHEN rating = 'good' THEN 1 ELSE 0 END) * 100.0 / COUNT(*) as good_pct\n FROM rum_metrics\n WHERE created_at > datetime('now', '-7 days')\n GROUP BY name\n `).all()\n\n // Breakdown by pathname (top 10 slowest)\n const byPath = await context.env.DB.prepare(`\n SELECT\n pathname,\n APPROX_PERCENTILE(CASE WHEN name = 'LCP' THEN value END, 0.5) as lcp_p50,\n APPROX_PERCENTILE(CASE WHEN name = 'INP' THEN value END, 0.5) as inp_p50,\n COUNT(*) as pageviews\n FROM rum_metrics\n WHERE created_at > datetime('now', '-7 days')\n GROUP BY pathname\n ORDER BY lcp_p50 DESC\n LIMIT 20\n `).all()\n\n return { overall: overall.results, slowestPaths: byPath.results }\n }\n )\n\n\n## RUM Dashboard\n\n\n RUM Dashboard (Last 7 Days)\n\n Web Vitals Overview:\n ┌────────┬──────────┬──────────┬──────────┬─────────┐\n │ Metric │ P50 │ P75 │ P95 │ % Good │\n ├────────┼──────────┼──────────┼──────────┼─────────┤\n │ LCP │ 1,200ms │ 2,100ms │ 4,500ms │ 78% │\n │ CLS │ 0.02 │ 0.05 │ 0.15 │ 85% │\n │ INP │ 80ms │ 150ms │ 350ms │ 82% │\n │ TTFB │ 150ms │ 350ms │ 900ms │ 88% │\n └────────┴──────────┴──────────┴──────────┴─────────┘\n\n Performance by Geographic Region:\n ┌─────────────┬─────────┬──────────┬──────────────┐\n │ Region │ P50 LCP │ P95 LCP │ Slow % (>3s) │\n ├─────────────┼─────────┼──────────┼──────────────┤\n │ US East │ 900ms │ 2,100ms │ 3% │\n │ US West │ 1,100ms │ 2,800ms │ 5% │\n │ Europe │ 1,300ms │ 3,200ms │ 8% │\n │ Asia Pacific│ 2,100ms │ 5,500ms │ 20% │\n │ South America│ 2,400ms│ 6,000ms │ 25% │\n └─────────────┴─────────┴──────────┴──────────────┘\n\n Top 5 Slowest Pages:\n 1. /dashboard/analytics (p50 LCP: 4.2s) — heavy charts\n 2. /products/listing (p50 LCP: 3.8s) — large images\n 3. /reports/export (p50 LCP: 3.5s) — slow API\n\n\n## Alerts from RUM Data\n\n\n export const checkRumAlerts = createServerFn({ method: \"GET\" }).handler(\n async ({}, { context }) => {\n const alerts = []\n\n // Alert if LCP good percentage drops below threshold\n const lcpQuality = await context.env.DB.prepare(`\n SELECT\n COUNT(*) as total,\n SUM(CASE WHEN rating = 'good' THEN 1 ELSE 0 END) * 100.0 / COUNT(*) as good_pct\n FROM rum_metrics\n WHERE name = 'LCP' AND created_at > datetime('now', '-1 hour')\n `).first()\n\n if (lcpQuality && Number(lcpQuality.good_pct) < 70) {\n alerts.push({\n type: \"rum_degradation\",\n metric: \"LCP\",\n goodPct: Math.round(Number(lcpQuality.good_pct)),\n threshold: 70,\n severity: \"high\",\n })\n }\n\n // Alert if any specific page has p95 LCP > 5s\n const slowPages = await context.env.DB.prepare(`\n SELECT pathname, COUNT(*) as views\n FROM rum_metrics\n WHERE name = 'LCP'\n AND value > 5000\n AND created_at > datetime('now', '-1 hour')\n GROUP BY pathname\n HAVING views > 10\n ORDER BY views DESC\n LIMIT 5\n `).all()\n\n if (slowPages.results.length > 0) {\n alerts.push({\n type: \"slow_pages\",\n pages: slowPages.results,\n severity: \"medium\",\n })\n }\n\n return alerts\n }\n )\n\n\n## Using RUM to Drive Optimizations\n\nRUM Signal | Investigation | Optimization\n---|---|---\nHigh LCP on mobile | Check hero image size | Serve AVIF, preload hero, reduce image size\nHigh CLS on product page | Check dynamic content insertion | Reserve space, fix font swap layout shift\nHigh INP on dashboard | Profile main thread activity | Break up long tasks, lazy load charts\nPoor APAC LCP | Geographic latency issue | Edge caching, CDN optimization\nPoor TTFB on auth pages | Auth middleware overhead | Optimize session lookup, cache auth state\n\n## RUM Data Schema\n\n\n -- migrations/rum_metrics.sql\n CREATE TABLE IF NOT EXISTS rum_metrics (\n id TEXT PRIMARY KEY,\n name TEXT NOT NULL, -- LCP, CLS, INP, TTFB, FCP\n value REAL NOT NULL, -- Metric value in ms or score\n rating TEXT NOT NULL, -- good, needs-improvement, poor\n pathname TEXT NOT NULL, -- URL path\n device_type TEXT, -- mobile, desktop, tablet\n connection_type TEXT, -- 4g, 3g, 2g, slow-2g\n country TEXT, -- Two-letter country code\n metadata TEXT, -- JSON with attribution data\n created_at INTEGER NOT NULL\n );\n\n CREATE INDEX idx_rum_name ON rum_metrics(name);\n CREATE INDEX idx_rum_created ON rum_metrics(created_at);\n CREATE INDEX idx_rum_path ON rum_metrics(pathname);\n\n\n## RUM Implementation Checklist\n\n * [ ] Web Vitals library installed and initialized on all pages\n * [ ] RUM data sent via sendBeacon for reliable delivery\n * [ ] Server endpoint stores metrics in D1 or Analytics Engine\n * [ ] Sample rate configured (100% for initial setup, then reduce to 10-25%)\n * [ ] Dashboard built for p50/p75/p95 metrics\n * [ ] Geographic breakdown visible in dashboard\n * [ ] Pathname-level aggregation for slow page detection\n * [ ] Automated alerts for RUM degradation\n * [ ] Device type segmentation (mobile vs desktop)\n * [ ] Connection type tracking for network-aware optimization\n * [ ] Integration with CI pipeline — compare PR RUM vs production RUM\n * [ ] Historical data retention for trend analysis\n\n\n\n## Conclusion\n\nReal User Monitoring bridges the gap between what you test in development and what your users experience in production. Without RUM, you are optimizing based on assumptions. With RUM, every optimization decision is backed by data from actual users.\n\nThe implementation is straightforward:\n\n 1. Collect Web Vitals from every page load\n 2. Store them in D1 or Analytics Engine\n 3. Build dashboards for visualization\n 4. Set alerts for degradation\n 5. Use the data to prioritize optimization work\n\n\n\nFor a production SaaS with RUM implemented across all pages, see tanstackship.com.\n\n### Related Resources\n\n * Core Web Vitals Optimization Guide\n * Performance Budgeting: Setting Targets and Automating Enforcement\n * SaaS Monitoring and Observability Guide\n * Lighthouse 95+ Optimization Tips for SaaS\n\n",
"title": "Real User Monitoring: Measuring Web Performance in Production"
}