Web Vitals

Report Core Web Vitals from the browser SDK

Set webVitals.enabled to report LCP, CLS, INP, FCP, and TTFB from visitor sessions.

Enable Web Vitals

Turn the feature on with the object form so you can also set attribution.

<Analytics siteKey="your_site_key" webVitals={{ enabled: true }} />
nuxt.config.ts
faststats: {
	siteKey: "your_site_key",
	webVitals: { enabled: true },
}
new WebAnalytics({
	siteKey: "your_site_key",
	webVitals: { enabled: true },
});

Collected Metrics

The tracker reports the standard set of Core Web Vitals.

MetricName
LCPLargest Contentful Paint
CLSCumulative Layout Shift
INPInteraction to Next Paint
FCPFirst Contentful Paint
TTFBTime to First Byte

Each metric is sent with its value, an id, a rating and the navigation type. Metrics are flushed when the page is hidden and when the route changes in a single page app.

Attribution

Turn on attribution to include extra debugging data that points to the element or event responsible for a metric. This payload is larger, so leave it off unless you are chasing a specific issue.

webVitals: {
	enabled: true,
	attribution: true,
}

On this page