Speed Insights Intake API
Learn how to use Speed Insights in Vercel with any frontend framework or project through the Speed Insights intake API.This API is deprecated. Use the @vercel/speed-insights framework agnostic package instead.
Vercel Speed Insights supports Next.js, Nuxt.js, and Gatsby with zero configuration through build plugins. You can use Speed Insights with any frontend framework or project through the Speed Insights API as shown below.
POST /v1/vitals
Send web vitals data to the Vercel Speed Insights API.
To use the Speed Insights API, you'll need to retrieve the analytics ID for your Vercel project. This value is exposed during the build and can be accessed by process.env.VERCEL_ANALYTICS_ID
inside Node.js.
Inside your framework or Node.js script, you can then use this value in the body
of your request to the Vercel Speed Insights API.
vercel pull
does not pull
VERCEL_ANALYTICS_ID
as the Vercel Analytics ID environment variable is inlined during the
build process. It is not part of your project Environment Variables, which can be
pulled locally using Vercel CLI.
You can view an example of the following code implemented inside our Create React App and SvelteKit starters.
import { getCLS, getFCP, getFID, getLCP, getTTFB } from 'web-vitals';
const vitalsUrl = 'https://vitals.vercel-analytics.com/v1/vitals';
function getConnectionSpeed() {
return 'connection' in navigator &&
navigator['connection'] &&
'effectiveType' in navigator['connection']
? navigator['connection']['effectiveType']
: '';
}
function sendToAnalytics(metric, options) {
const page = Object.entries(options.params).reduce(
(acc, [key, value]) => acc.replace(value, `[${key}]`),
options.path,
);
const body = {
dsn: options.analyticsId, // qPgJqYH9LQX5o31Ormk8iWhCxZO
id: metric.id, // v2-1653884975443-1839479248192
page, // /blog/[slug]
href: location.href, // https://{my-example-app-name-here}/blog/my-test
event_name: metric.name, // TTFB
value: metric.value.toString(), // 60.20000000298023
speed: getConnectionSpeed(), // 4g
};
if (options.debug) {
console.log('[Analytics]', metric.name, JSON.stringify(body, null, 2));
}
const blob = new Blob([new URLSearchParams(body).toString()], {
// This content type is necessary for `sendBeacon`
type: 'application/x-www-form-urlencoded',
});
if (navigator.sendBeacon) {
navigator.sendBeacon(vitalsUrl, blob);
} else
fetch(vitalsUrl, {
body: blob,
method: 'POST',
credentials: 'omit',
keepalive: true,
});
}
export function webVitals(options) {
try {
getFID((metric) => sendToAnalytics(metric, options));
getTTFB((metric) => sendToAnalytics(metric, options));
getLCP((metric) => sendToAnalytics(metric, options));
getCLS((metric) => sendToAnalytics(metric, options));
getFCP((metric) => sendToAnalytics(metric, options));
} catch (err) {
console.error('[Analytics]', err);
}
}
Was this helpful?