temp_preferences_customTHE FUTURE OF PROMPT ENGINEERING

Web Vitals Real User Monitoring Setup

Implements a complete Real User Monitoring (RUM) pipeline for Core Web Vitals using the web-vitals library, custom performance marks, and dashboard-ready metric reporting.

terminalclaudetrending_upRisingcontent_copyUsed 123 timesby Community

observabilityperformance-monitoringanalyticsweb-vitalsrum

claude

0 words

System Message

You are a Web Performance Monitoring Engineer specializing in Real User Monitoring, performance observability pipelines, and Web Vitals instrumentation for production web applications. Your task is to implement a complete Web Vitals RUM (Real User Monitoring) pipeline. You must design and implement: 1. **web-vitals Library Integration** — Complete setup for onLCP, onINP, onCLS, onFCP, onTTFB with correct attribution data extraction. Include LCP element identification, INP interaction source, CLS layout shift source elements 2. **Metric Collection Code** — TypeScript implementation that captures all 5 Core Web Vitals with attribution, adds page URL route (SPA-aware), user agent device category, effective connection type from Network Information API, and custom session ID 3. **Beacon API Submission** — navigator.sendBeacon() for reliable metric submission on page unload, with fetch() fallback. Batch metrics to avoid N HTTP requests per page 4. **Custom Performance Marks** — Performance.mark() and Performance.measure() for business-critical milestones: 'app-interactive', 'above-fold-rendered', 'data-loaded'. Integration with PerformanceObserver 5. **SPA Route Change Tracking** — Detect History API pushState/replaceState to reset CLS accumulator and track per-route metrics in Next.js/React Router/Angular Router 6. **Sampling Strategy** — 10% baseline sampling, 100% sampling for poor/needs-improvement threshold violations, session sampling vs page sampling decision 7. **Analytics Endpoint Schema** — JSON payload schema for the metrics API endpoint with all fields, BigQuery table schema, and Grafana dashboard query examples for p75 percentile per route 8. **Performance Budget Monitoring** — alerting thresholds configuration: LCP > 4s, INP > 500ms, CLS > 0.25 = alert; LCP 2.5-4s, INP 200-500ms, CLS 0.1-0.25 = warning For each component: - Provide complete TypeScript code - Explain sampling and batching decisions - Include error handling for environments where APIs are unavailable When given {&{FRAMEWORK}}, {&{ANALYTICS_BACKEND}}, and {&{SAMPLING_REQUIREMENTS}}, produce the complete RUM implementation.

User Message

Framework: {&{FRAMEWORK}} Analytics Backend: {&{ANALYTICS_BACKEND}} Sampling Requirements: {&{SAMPLING_REQUIREMENTS}} Custom Metrics: {&{CUSTOM_METRICS}} Implement a complete Web Vitals RUM pipeline.

About this prompt

Lighthouse scores measure lab conditions, but Real User Monitoring reveals how actual users on real devices and networks experience your site. This prompt designs a complete RUM pipeline using the web-vitals library to capture LCP, INP, CLS, FCP, and TTFB from real users, sends them to a backend analytics endpoint with user context, and provides a reporting dashboard schema. It covers metric sampling strategy, attributing metric values to page routes, device category segmentation, connection type filtering, and percentile aggregation (p75 for CWV). The implementation includes performance marks for custom business metrics (e.g., 'first product visible', 'checkout ready'), Web Worker-based metric batching to avoid impacting INP, beacon API usage for reliable metric submission, and a Grafana/BigQuery schema design for the metrics warehouse.

signal_cellular_altadvancedcodeMore Frontend Dev prompts

Latest Insights

Stay ahead with the latest in prompt engineering.

View blogchevron_right

How to Write System Prompts That Actually Work

Article

person Admin•schedule 5 min read

How to Write System Prompts That Actually Work

System prompts set the rules of the game for every AI interaction. This hands-on guide shows you exactly how to structure them for reliability and consistency.

Claude vs GPT-4o: Which Model Fits Your Use Case?

Article

person Admin•schedule 5 min read

Claude vs GPT-4o: Which Model Fits Your Use Case?

Choosing between Claude and GPT-4o is less about which is "better" and more about which fits your specific task. Here is a practical breakdown.

How Our Design Team Cut Brief-Writing Time by 70% with AI

Article

person Admin•schedule 5 min read

How Our Design Team Cut Brief-Writing Time by 70% with AI

A real-world case study on how a 12-person design team at a product agency standardised their creative brief process using prompt templates on PromptShip.

Why AI Hallucinations Happen (and How to Reduce Them)

Article

person Admin•schedule 5 min read

Why AI Hallucinations Happen (and How to Reduce Them)

Hallucinations are not bugs — they are a fundamental property of how language models work. Understanding why they happen is the first step to minimising them.

The State of AI Coding Assistants in 2026

Article

person Admin•schedule 5 min read

The State of AI Coding Assistants in 2026

From autocomplete to autonomous agents — AI coding tools have changed dramatically. Here is where things stand and what to expect next.

From Idea to Shipped Prompt: A Solo Founder's AI Workflow

Article

person Admin•schedule 5 min read

From Idea to Shipped Prompt: A Solo Founder's AI Workflow

One founder. No team. A dozen AI-powered tools and a tight prompt library. Here is the workflow that runs a bootstrapped SaaS doing $15k MRR.

Recommended Prompts

claudeshieldTrusted

bookmark

MCP Server Observability Engineer

Designs observability for MCP servers covering tool call tracing, latency metrics, error tracking, and usage analytics.

Core Web Vitals & Critical Path Specialist

Technical optimization of LCP, CLS, and INP metrics to pass Google's PageSpeed Insights.

Observability Stack Design & Monitoring Strategy

Designs a complete observability strategy covering metrics, logs, and traces — with tool selection, dashboard design, alerting rules, and SLI/SLO definitions.

Database Monitoring & Observability Engineer

Designs database monitoring covering slow query logging, connection metrics, table bloat, replication lag, and alerting.

WAI-ARIA & WCAG 2.1 Compliance Auditor

Enterprise accessibility audit for complex UI components and dynamic application states.

React Context API Optimization Specialist

Restructures overused or misused React Context implementations to eliminate unnecessary re-renders, improve maintainability, and establish proper context composition patterns.

star 0fork_right 143

bolt

pin_invoke