Web Vitals

Monitor Core Web Vitals and performance metrics automatically.

Core Web Vitals

Core Web Vitals are a set of metrics defined by Google that measure real-world user experience. Apperio captures these automatically when autoCapture.performance is enabled.

LCP - Largest Contentful Paint

Measures how long it takes for the largest visible element (image, text block, video) to render on screen. LCP reflects perceived load speed.

Rating	Threshold	User Experience
Good	< 2.5s	Page feels fast, content appears quickly
Needs Improvement	2.5s - 4.0s	Noticeable delay before content
Poor	> 4.0s	Users may abandon the page

FID - First Input Delay

Measures the delay between the user's first interaction (click, tap, key press) and the browser's response. FID reflects input responsiveness.

Rating	Threshold	User Experience
Good	< 100ms	Interactions feel instant
Needs Improvement	100ms - 300ms	Slight lag noticeable
Poor	> 300ms	Interface feels sluggish or frozen

CLS - Cumulative Layout Shift

Measures the total unexpected visual movement of page elements during the page lifecycle. CLS reflects visual stability.

Rating	Threshold	User Experience
Good	< 0.1	Page layout is stable
Needs Improvement	0.1 - 0.25	Occasional content jumps
Poor	> 0.25	Frequent, disruptive layout shifts

TTFB - Time to First Byte

Measures the time from when the browser makes a request to when it receives the first byte of the response. TTFB reflects server responsiveness.

Rating	Threshold	User Experience
Good	< 800ms	Server responds quickly
Needs Improvement	800ms - 1800ms	Noticeable wait for content
Poor	> 1800ms	Long wait before anything happens

INP - Interaction to Next Paint

Measures the latency of all user interactions throughout the page lifecycle, reporting the worst-case delay. INP replaced FID as a Core Web Vital in 2024.

Rating	Threshold	User Experience
Good	< 200ms	All interactions feel responsive
Needs Improvement	200ms - 500ms	Some interactions lag
Poor	> 500ms	Frequent interaction delays

How Metrics Are Measured

The SDK uses the browser PerformanceObserver API to capture metrics. Measurements happen passively and do not impact application performance.

TypeScript

class="syntax-comment">// The SDK automatically sets up observers like:
class="syntax-comment">// (You do NOT need to write this code - it happens internally)

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.entryType === class="syntax-string">"largest-contentful-paint") {
      class="syntax-comment">// LCP value captured and logged
    }
    if (entry.entryType === class="syntax-string">"first-input") {
      class="syntax-comment">// FID value captured and logged
    }
    if (entry.entryType === class="syntax-string">"layout-shift") {
      class="syntax-comment">// CLS accumulated and logged
    }
  }
});

Each metric generates a log entry like:

JSON

{
  "level": "info",
  "message": "Web Vital: LCP = 1847ms",
  "eventType": "performance",
  "data": {
    "metric": "LCP",
    "value": 1847,
    "rating": "good",
    "navigationType": "navigate"
  }
}

Info

Web Vital metrics require browser support for PerformanceObserver. All modern browsers (Chrome, Edge, Firefox, Safari 15+) support this API. On unsupported browsers, performance capture is silently skipped.

Dashboard Visualization

The Apperio dashboard provides dedicated views for performance data:

Web Vital Gauges -- Color-coded gauges showing current LCP, FID, CLS, TTFB, and INP values
Trend Charts -- Time series showing how metrics change over hours, days, or weeks
Page Load Distribution -- Histogram of page load times across your application
Slowest Endpoints -- Rankings of the slowest network endpoints affecting performance

Performance Budgets

Use Apperio alert rules to set performance budgets and get notified when metrics exceed thresholds:

TypeScript

class="syntax-comment">// Example alert rule(configured via dashboard or API):
{
  class="syntax-string">"name": class="syntax-string">"LCP Budget Exceeded",
  class="syntax-string">"projectId": class="syntax-string">"your-project",
  class="syntax-string">"condition": {
    class="syntax-string">"field": class="syntax-string">"data.metric",
    class="syntax-string">"operator": class="syntax-string">"equals",
    class="syntax-string">"value": class="syntax-string">"LCP"
  },
  class="syntax-string">"threshold": {
    class="syntax-string">"field": class="syntax-string">"data.value",
    class="syntax-string">"operator": class="syntax-string">"greaterThan",
    class="syntax-string">"value": class="syntax-number">2500
  },
  class="syntax-string">"channels": [class="syntax-string">"email", class="syntax-string">"slack"],
  class="syntax-string">"cooldownMinutes": class="syntax-number">30
}

Tip

Set separate budgets for each Web Vital. A page that has good LCP but poor CLS still delivers a bad user experience. Monitor all five metrics together for a complete picture.