Core Web Vitals

✨ Core Web Vitals

GermainUX RUM JS collects browser performance metrics from real user sessions, helping teams identify pages and user segments affected by slow loading, poor responsiveness, or visual instability.

📋 Current Core Web Vitals

The current Core Web Vitals are:

✨ Benefits

Core Web Vitals monitoring helps teams:

• Measure actual page performance experienced by real users.

• Identify slow or unstable pages.

• Detect responsiveness problems affecting user interactions.

• Compare performance across browsers, devices, locations, and application versions.

• Identify regressions following a release.

• Correlate poor performance with abandonment, conversion loss, or reduced productivity.

• Replay affected sessions to understand the surrounding user experience.

• Prioritize improvements according to affected users and business impact.

Preconfigured monitoring

Core Web Vitals monitoring is preconfigured in GermainUX RUM JS.

Once RUM JS is deployed, supported browser-performance metrics are automatically collected. No additional configuration is normally required.

Customization is needed only when customers want to:

• Change thresholds or SLAs.

• Exclude pages or user segments.

• Create application-specific measures or pivots.

• Configure additional performance marks.

• Add custom notifications or reports.

• Extend responsiveness monitoring for a GermainUX version that does not yet collect INP.

Largest Contentful Paint

Largest Contentful Paint measures how long it takes for the largest visible image or text block in the viewport to render.

LCP helps identify pages whose primary content appears too slowly.

GermainUX can analyze LCP by:

• Page or route

• Application

• Environment

• Application version

• Browser and browser version

• Device

• Operating system

• Geography

• User or customer segment

• Network context, when available

A poor LCP can be associated with conditions such as:

• Slow server response

• Large images

• Delayed resource loading

• Render-blocking JavaScript or CSS

• Client-side rendering delays

• Slow third-party resources

Additional monitoring is required to establish the actual cause.

Interaction to Next Paint

Interaction to Next Paint measures page responsiveness across user interactions. It includes input delay, event-handler execution, and the time required to display the next frame.

INP helps identify pages that feel slow or unresponsive when users click, tap, or type.

When INP collection is supported by the installed GermainUX version, it can be analyzed alongside:

• User Click duration

• JavaScript long tasks

• Browser freezes

• Slow JavaScript functions

• Network requests

• Page memory

• Session Replay

• Business-process duration

If the installed GermainUX version collects FID but not INP, FID should be treated as a legacy responsiveness metric. Use User Click, long-task, freeze, and JS Profiler insights for additional responsiveness analysis, or upgrade/configure INP collection as supported.

First Input Delay

First Input Delay measures the delay between a user’s first interaction and the browser’s ability to begin processing it.

GermainUX versions that collect FID can expose it as a measure associated with the initial user interaction.

FID remains useful for historical comparison but is no longer a current Core Web Vital. It measures only the delay before processing the first interaction and does not measure the complete interaction lifecycle.

Cumulative Layout Shift

Cumulative Layout Shift measures unexpected movement of visible page content.

A poor CLS can result in:

• Users clicking the wrong element

• Buttons or links moving before interaction

• Forms becoming difficult to complete

• Content shifting while being read

• Increased user frustration

• Checkout or workflow errors

GermainUX can associate CLS information with the relevant page, session, and user activity when the browser exposes the required data.

Analysis

Core Web Vitals can be analyzed using:

• Average

• Median

• Percentiles

• Minimum and maximum

• Number of affected users

• Number of affected sessions

• SLA-violation count

• Performance trend

• Comparison with another period or release

Percentiles are especially important because averages can hide slow experiences affecting a significant group of users.

Results can be segmented by:

• Page or route

• Application

• Environment

• Application version

• Browser

• Browser version

• Device

• Operating system

• Geography

• User role

• Customer segment

• Business process

• Conversion outcome

Business impact

Core Web Vitals can be correlated with business and user-experience outcomes.

A poor Core Web Vital does not by itself prove that a user abandoned or failed a task. Correlating the metric with user behavior and business outcomes provides the required context.

Session Replay and root-cause analysis

When Session Replay is enabled, teams can review what occurred during an affected session.

GermainUX can correlate Core Web Vitals with:

• Page loads

• User interactions

• JavaScript errors

• Network requests

• Browser long tasks

• Browser freezes

• Page memory

• Application version

• Business-process milestones

• Conversion or abandonment

For deeper JavaScript analysis, deploy the GermainUX JS Profiler.

For backend analysis, deploy the GermainUX Engine and supported Code Profiler components.

SLAs and notifications

Configure an SLA only when the preconfigured thresholds do not meet the organization’s requirements.

Core Web Vitals can be used to:

• Identify pages exceeding a performance threshold.

• Trigger an alert when poor performance affects a significant number of users.

• Notify interested users through a Watch.

• Generate a dashboard or report.

• Compare performance before and after a release.

• Initiate an approved investigation workflow.

A Watch notifies GermainUX users about an existing performance insight; it does not create a new insight.

Browser support and limitations

Core Web Vitals depend on browser APIs and actual user activity.

Consider the following:

• Not every metric is available in every browser.

• INP requires the user to interact with the page.

• A page with no qualifying interaction may not produce an INP value.

• LCP can change as larger content appears.

• CLS depends on layout changes observed during the page lifecycle.

• Single-page applications require correct route and page identification.

• Short or interrupted sessions may not produce complete measurements.

• Cross-origin frames can limit the data visible to RUM JS.

• Available metrics depend on the deployed GermainUX version.

GermainUX Real User Monitoring measures actual field performance. Results may differ from synthetic or laboratory tools such as Lighthouse because the users, devices, networks, and measurement conditions differ.

Privacy

Core Web Vitals are performance measurements, but their associated sessions can contain user and business context.

Before production deployment:

• Collect only the metadata required for analysis.

• Mask or exclude sensitive Session Replay content.

• Restrict access to user-level information.

• Configure consent where required.

• Apply the organization’s retention policy.

• Avoid unnecessary collection of personal or device identifiers.

Validation

1. Deploy GermainUX RUM JS.

2. Open the monitored application in a supported browser.

3. Load several representative pages.

4. Perform user interactions so responsiveness metrics can be calculated.

5. Confirm that LCP and CLS appear in GermainUX.

6. Confirm whether the installed GermainUX version reports INP.

7. If applicable, verify that legacy FID is labeled separately from current Core Web Vitals.

8. Confirm that page, application, browser, device, and version properties are correct.

9. Compare the results with the browser’s performance tools.

10. Verify associated Session Replay and technical evidence.

Deployment and configuration

Component: GermainUX RUM JS
Feature availability: LCP, CLS, and FID monitoring are documented for GermainUX 2022.2 or later; confirm INP support for the installed GermainUX version.

✨ Feature

Germain collects all Core Web Vitals metrics to boost your website performance and improve user experience.

⏳ Largest Contentful Paint (LCP)

LCP measures perceived load speed as it marks when the page's main content (image or text block) visible within the viewport has likely loaded.

KPI: KPIs for User Monitoring and Replay | Core Web Vitals KPIs

👉 First Input Delay (FID)

First Input Delay (FID) measures load responsiveness as it quantifies the experience users feel when trying to interact with unresponsive pages. Collected data is accessible on User Click KPI as First Input Duration measure.

🖼️ Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) measures visual stability as it quantifies how often users experience unexpected layout shifts. Collected data is accessible on User Click KPI but only on the Detail Execution Flow portlet.

ℹ️ Get Help

The Germain Team can help you set this up. Contact GermainUX Support.