Monitor Core Web Vitals

Requires v3.1.0

Track real-user performance metrics collected directly from your visitors' browsers. Umami captures Core Web Vitals and other performance signals so you can identify slow pages and spot regressions.

Step 1: Enable performance tracking

Add the data-performance attribute to your tracker script:

<script
  defer
  src="https://your-umami.example.com/script.js"
  data-website-id="your-website-id"
  data-performance="true"
></script>

Umami begins collecting the following metrics from real visitors:

Step 2: View performance data

Navigate to your website and open the Performance screen. You'll see:

• Metric cards showing the 75th percentile (p75) value for each metric. The p75 means 75% of your visitors experience this value or better.
• Score indicators based on Google's thresholds: green (good), yellow (needs improvement), red (poor).
• Pages breakdown showing performance by individual page URL.
• Environment breakdown showing performance by browser, operating system, and device type.

Step 3: Identify slow pages

Use the Pages breakdown to find which pages have the worst metrics:

1. Sort by LCP to find pages that load slowly.
2. Sort by CLS to find pages with layout shift issues (often caused by images without dimensions or dynamic content injection).
3. Sort by INP to find pages with sluggish interactions (often caused by heavy JavaScript).

Step 4: Diagnose and fix issues

Common causes and fixes for each metric:

LCP (Largest Contentful Paint)

• Cause: Large unoptimized images, slow server response, render-blocking resources.
• Fix: Compress images, use modern formats (WebP/AVIF), add loading="lazy" to below-fold images, preload the LCP element.

INP (Interaction to Next Paint)

• Cause: Long-running JavaScript, large DOM size, expensive event handlers.
• Fix: Break up long tasks, use requestAnimationFrame for visual updates, reduce DOM complexity.

CLS (Cumulative Layout Shift)

• Cause: Images/ads without dimensions, dynamically injected content, web fonts causing FOIT/FOUT.
• Fix: Always set width and height on images, reserve space for dynamic content, use font-display: swap.

Step 5: Track improvements

After making changes, use the date range selector to compare performance before and after your fix. Performance data is real-user data, so it reflects actual visitor experience rather than synthetic lab tests.

Focus on the p75 value: if the 75th percentile improves, you've made a meaningful impact for the majority of your users.