Core Web Vitals Monitoring

Monitor Google's Core Web Vitals to improve user experience and search rankings.

What Are Core Web Vitals?

Core Web Vitals are Google's metrics for measuring user experience:

Metric	Full Name	Measures	Good	Needs Work	Poor
LCP	Largest Contentful Paint	Loading	≤2.5s	2.5-4s	>4s
INP	Interaction to Next Paint	Interactivity	≤200ms	200-500ms	>500ms
CLS	Cumulative Layout Shift	Visual Stability	≤0.1	0.1-0.25	>0.25

Why They Matter

• SEO Impact: Google uses CWV as ranking signals
• User Experience: Correlate with engagement and conversion
• Performance Budget: Set measurable targets

Enabling CWV Monitoring

Core Web Vitals monitoring is enabled in the dashboard:

1. Go to Settings → Performance
2. Toggle Core Web Vitals Tracking ON
3. Save changes

Your script tag stays simple:

<script
  defer
  data-tracking-code="YOUR_TRACKING_CODE"
  src="https://api.zenovay.com/z.js"
></script>

The feature flag is delivered to the tracker automatically -- no script attribute changes needed.

Dashboard Overview

CWV Summary

Navigate to Performance → Web Vitals:

Core Web Vitals Overview

LCP    ████████████████░░░░ 2.1s  ✓ Good
INP    ██████████████████░░ 156ms ✓ Good
CLS    ████████████████████ 0.05  ✓ Good

75th percentile scores (last 28 days)

Score Distribution

See how your pages perform:

Rating	LCP	INP	CLS
Good	65%	72%	85%
Needs Improvement	25%	20%	10%
Poor	10%	8%	5%

Largest Contentful Paint (LCP)

What It Measures

Time until the largest content element is visible:

• Images
• Video thumbnails
• Background images
• Text blocks

LCP Dashboard

• Trend over time: Daily/weekly LCP trends
• By page: Slowest pages
• By device: Mobile vs Desktop
• By connection: 4G, 3G, slow networks
• LCP element: What element is being measured

Common LCP Issues

Issue	Impact	Solution
Slow server response	High	Optimize TTFB, use CDN
Render-blocking resources	High	Defer non-critical CSS/JS
Large images	High	Optimize, use WebP, lazy load
Client-side rendering	Medium	SSR, pre-rendering
Third-party scripts	Medium	Async load, remove unnecessary

Improving LCP

Image Optimization:

<!-- Preload LCP image -->
<link rel="preload" as="image" href="hero.webp">

<!-- Responsive images -->
<img
  src="hero.webp"
  srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
  sizes="100vw"
  loading="eager"
  fetchpriority="high"
/>

Resource Hints:

<!-- Preconnect to critical origins -->
<link rel="preconnect" href="https://cdn.example.com">
<link rel="dns-prefetch" href="https://api.example.com">

Interaction to Next Paint (INP)

What It Measures

Responsiveness to user interactions:

• Clicks
• Taps
• Key presses

INP measures the time from interaction to next visual update.

INP Dashboard

• Overall INP score: 75th percentile
• By interaction type: Clicks vs keyboard
• Slowest interactions: Specific elements
• JavaScript breakdown: Long tasks

Common INP Issues

Issue	Impact	Solution
Long JavaScript tasks	High	Break up tasks, use web workers
Large DOM	Medium	Virtualize lists, simplify structure
Heavy event handlers	High	Debounce, optimize handlers
Layout thrashing	Medium	Batch DOM reads/writes
Third-party scripts	Medium	Lazy load, isolate

Improving INP

Break Up Long Tasks:

// Before: Long synchronous task
function processLargeArray(items) {
  items.forEach(item => expensiveOperation(item));
}

// After: Yield to main thread
async function processLargeArray(items) {
  for (const item of items) {
    expensiveOperation(item);
    // Yield to allow rendering
    await new Promise(r => setTimeout(r, 0));
  }
}

Use requestIdleCallback:

function runWhenIdle(callback) {
  if ('requestIdleCallback' in window) {
    requestIdleCallback(callback, { timeout: 2000 });
  } else {
    setTimeout(callback, 100);
  }
}

Cumulative Layout Shift (CLS)

What It Measures

Visual stability - how much content shifts unexpectedly:

• Images loading without dimensions
• Ads/embeds resizing
• Dynamic content insertion
• Web fonts loading

CLS Dashboard

• Overall CLS score: Sum of all shifts
• By page: Pages with most shift
• Shift sources: What elements cause shifts
• Timeline: When shifts occur

Common CLS Issues

Issue	Impact	Solution
Images without dimensions	High	Always set width/height
Ads without reserved space	High	Use placeholder containers
Dynamic content above fold	Medium	Reserve space, use transforms
Web font loading	Medium	Use font-display: swap
Late-loading embeds	Medium	Reserve space, lazy load

Improving CLS

Reserve Space for Images:

<!-- Always include dimensions -->
<img src="photo.jpg" width="800" height="600" alt="Photo">

<!-- Or use aspect ratio -->
<style>
.image-container {
  aspect-ratio: 16 / 9;
}
</style>

Reserve Space for Ads:

.ad-slot {
  min-height: 250px;
  background: #f0f0f0;
}

Font Loading Strategy:

@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2') format('woff2');
  font-display: swap;
}

Page-Level Analysis

Drill Down by Page

1. Click any metric in overview
2. View page-by-page breakdown
3. Sort by worst performers
4. Click page for detailed analysis

Page Performance Card

/products/widget

LCP:  2.8s   ⚠ Needs Improvement
INP:  145ms  ✓ Good
CLS:  0.18   ⚠ Needs Improvement

Top Issues:
• Hero image is 2.4MB (recommend < 200KB)
• Layout shift from late-loading reviews widget
• 3 render-blocking scripts

Sessions affected: 12,450

Segmentation

By Device Type

Device      LCP      INP     CLS
Desktop     2.0s     120ms   0.05
Mobile      3.2s     210ms   0.12
Tablet      2.4s     160ms   0.08

By Connection Type

Connection  LCP      INP     CLS
4G          2.4s     150ms   0.06
3G          4.1s     180ms   0.08
2G          8.2s     320ms   0.10

By Browser

Browser     LCP      INP     CLS
Chrome      2.1s     140ms   0.05
Safari      2.3s     160ms   0.06
Firefox     2.2s     150ms   0.05
Edge        2.1s     145ms   0.05

By Geography

See CWV scores by country/region to identify CDN or server location issues.

Alerts & Monitoring

Set Up Alerts

1. Go to Settings → Alerts
2. Click New Alert
3. Select Web Vital Degradation
4. Configure:
   • Metric: LCP, INP, or CLS
   • Threshold: e.g., LCP > 2.5s
   • Comparison: vs last week
   • Notification method

Alert Types

Alert	Trigger
Threshold breach	Metric exceeds target
Regression	Significant worsening
Page-specific	Specific URL degrades
Device-specific	Mobile performance drops

Integration with Other Tools

Google Search Console

Compare Zenovay data with GSC:

• Zenovay: Real user data (RUM)
• GSC: Lab data + field data

Lighthouse

Correlate Lighthouse audits with real-world data.

PageSpeed Insights

Use Zenovay for monitoring, PageSpeed for recommendations.

Historical Comparison

Trend Analysis

• Compare 28-day periods
• See improvement over time
• Correlate with deployments
• Track toward goals

Release Impact

1. Tag releases in Zenovay
2. See CWV changes per release
3. Identify regressions early
4. Celebrate improvements

Best Practices

Monitoring Strategy

1. Set baselines: Know current performance
2. Define targets: Based on industry/competitors
3. Monitor continuously: Not just one-time audits
4. Segment analysis: Mobile often worse
5. Prioritize fixes: Impact vs effort

Performance Budget

Metric     Current   Target   Budget
LCP        2.8s      2.0s     ✗ Over
INP        150ms     150ms    ✓ On target
CLS        0.08      0.1      ✓ Under

Regular Reviews

• Weekly: Check for regressions
• Monthly: Deep dive analysis
• Quarterly: Strategic planning

Troubleshooting

Data Not Appearing

Check:

• Script installed correctly
• Core Web Vitals tracking is enabled in Settings → Performance
• Sufficient traffic (need real users)

Unexpected Values

Consider:

• Bot traffic skewing data
• Development/staging traffic
• Browser support differences

Discrepancy with Lab Data

Normal - RUM captures:

• Real network conditions
• Actual device performance
• Real user behavior
• Geographic distribution

Next Steps

• Page Load Performance
• Performance by Device
• Performance Alerts