What are Web Vitals? Core Performance Metrics in Analytics

Web vitals

A set of user-centric web performance metrics (LCP, FID, CLS) measuring loading, interactivity, and visual stability.

Overview of Web Vitals

• Largest contentful paint (lcp)

  Measures the time it takes for the largest content element (image, video poster, or block text) to become visible within the viewport.

  • Threshold:

    ≤ 2.5 seconds is good; 2.5–4.0 seconds needs improvement; > 4.0 seconds is poor.

  • What it measures:

    Render time of the largest image or text block visible on the screen.

• First input delay (fid)

  Captures the time from a user’s first interaction (click, tap, or key press) to the moment the browser is able to respond.

  • Threshold:

    < 100 milliseconds is good; 100–300 ms needs improvement; > 300 ms is poor.

  • What it measures:

    Delay between user input and the execution of the corresponding event handler.

• Cumulative layout shift (cls)

  Quantifies visual stability by summing the impact of unexpected layout shifts that occur during the page lifecycle.

  • Threshold:

    < 0.1 is good; 0.1–0.25 needs improvement; > 0.25 is poor.

  • What it measures:

    Aggregate score of all unexpected layout shifts visible to the user.

Why Web Vitals Matter

• User experience

  Better loading times, responsiveness, and stability directly boost engagement, reduce bounce rate, and increase conversions.

• Search engine ranking

  Google uses Core Web Vitals as ranking signals; pages that meet thresholds can gain an SEO advantage.

Tracking Web Vitals with SaaS Analytics Tools

• Google analytics 4 (ga4)

  GA4 offers built-in Core Web Vitals reports and allows custom event tracking via gtag.js or Google Tag Manager.

  • Built-in reports:

    Navigate to Reports → Engagement → Core Web Vitals to view aggregated LCP, FID, and CLS data.

  • Custom event tracking:

    Use the web-vitals library with gtag.js or GTM to send metrics as custom events for deeper analysis.

• Plainsignal

  PlainSignal is a lightweight, cookie-free analytics solution. Integrate its script and send Web Vitals alongside your pageview data.

  • Integration snippet:

    Add this before </head>:

    <link rel="preconnect" href="//eu.plainsignal.com/" crossorigin />
    <script defer data-do="yourwebsitedomain.com" data-id="0GQV1xmtzQQ" data-api="//eu.plainsignal.com" src="//cdn.plainsignal.com/PlainSignal-min.js"></script>
    

  • Reporting metrics:

    Send Web Vitals as custom events:

    import { getLCP, getFID, getCLS } from 'web-vitals';
    getLCP(m => ps('event', 'web-vitals', { LCP: m.value }));
    getFID(m => ps('event', 'web-vitals', { FID: m.value }));
    getCLS(m => ps('event', 'web-vitals', { CLS: m.value }));
    

Best Practices for Improving Web Vitals

• Optimize loading performance (lcp)

  Speed up rendering of the largest element.

  • Use a cdn:

    Distribute assets globally to reduce latency.

  • Preload key resources:

    Preload fonts, images, and critical CSS.

• Minimize input delay (fid)

  Reduce main-thread work to respond faster to user input.

  • Code splitting:

    Break large JavaScript bundles into smaller chunks.

  • Defer third-party scripts:

    Async or defer non-essential scripts to free up the main thread.

• Reduce layout shifts (cls)

  Ensure visual elements remain stable during load.

  • Set size attributes:

    Define width/height for images and video elements.

  • Reserve space for ads & embeds:

    Use CSS containers to prevent content shifts.

Related terms