Web Vitals

Web Vitals are a set of metrics developed by Google that measure real-world user experience on the web. FastStats collects these metrics from your users' browsers and provides dashboards, historical trends, and actionable breakdowns so you can pinpoint and resolve performance bottlenecks.

Core Web Vitals

Core Web Vitals are the subset of Web Vitals that Google considers most important for user experience — and that directly influence your search ranking.

Additional Metrics

These metrics provide deeper insight into specific phases of the page load lifecycle.

Thresholds

Every metric is evaluated against standardized thresholds and given a rating:

FastStats uses the 75th percentile (p75) of collected samples to determine the overall rating for each metric, matching the methodology used by Google's Chrome User Experience Report.

Enabling Web Vitals

1. Enable in Project Settings

Navigate to your project's Settings → Web Analytics and turn on the Web Vitals toggle. You can optionally configure a sampling rate to control the volume of data collected.

2. Install the SDK

Add the FastStats Web SDK to your site. The SDK uses the web-vitals library under the hood to capture all metrics automatically.

npm i faststats

3. Initialize the Tracker

import { initFastStats } from "@faststats/web";

initFastStats({
	projectId: "your-project-id",
	webVitals: true,
	cookieless: true,
});

When cookieless mode is enabled in project settings, add cookieless: true to the config.

That's it. Once the page loads, the SDK will automatically measure LCP, CLS, INP, FCP, and TTFB and report them to FastStats. No additional code is needed.

Script Tag Alternative

If you prefer not to use a bundler, include the SDK as a script tag:

<script
	defer
	data-project-id="your-project-id"
	data-web-vitals="true"
	data-cookieless="true"
	src="https://cdn.faststats.dev/tracker.js"
></script>

When using cookieless mode (enabled in project settings), add data-cookieless="true" to the script tag.

Configuration Options

How Cookieless Mode Works

When cookieless mode is enabled, the SDK derives a daily visitor identifier instead of using cookies. The identifier is computed as:

SHA256(IP + User-Agent + project_id + YYYY-MM-DD)

• IP — the visitor's IP address
• User-Agent — the browser's user agent string
• project_id — your FastStats project ID
• YYYY-MM-DD — today's date in ISO format

The hash rotates daily, so the same visitor gets a new identifier each day. This provides approximate unique visitor counts without storing cookies, making it suitable for GDPR-sensitive deployments.

Data Collected

For each Web Vital event, FastStats stores the following data points:

• Metric name and value — the measured performance score
• Page URL — which page the metric was recorded on
• Device type — mobile or desktop
• Browser, OS, and Country — for segmentation and filtering
• Attribution data (optional) — detailed breakdown of what caused the score

Data Retention

Web Vitals data is retained for 30 days. After this period, all stored events are automatically deleted and can no longer be accessed.

Dashboard Features

Once data is flowing, the Web Vitals dashboard provides:

• Overview scores with good / needs-improvement / poor distribution for each metric
• Trend charts showing p75 values over time
• Pages table ranking your routes by performance
• Geographic map highlighting regional performance differences
• Device and browser breakdowns for targeted optimization
• Detailed drill-down per metric with attribution data