Vercel Speed Insights

Track Core Web Vitals and page performance from real visitors with Vercel Speed Insights.

Overview

  • Tracks Core Web Vitals (LCP, CLS, INP, FCP, TTFB) from real visitors, not synthetic tests.
  • Data is collected per-route so you can pinpoint which pages need optimization.
  • Works alongside Vercel Analytics, they are separate products with separate dashboards.
  • See the official Vercel Speed Insights docs for the full API reference and advanced configuration.

Setup

1. Install the package

pnpm add @vercel/speed-insights

2. Add the component

Drop <SpeedInsights /> into your root layout alongside <Analytics />. It renders nothing visible, it just reports performance metrics.

src/app/layout.tsx
import { Analytics } from "@vercel/analytics/next";
import { SpeedInsights } from "@vercel/speed-insights/next";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Analytics />
        <SpeedInsights />
      </body>
    </html>
  );
}

3. Enable in Vercel

Go to your Vercel project dashboard, click the Speed Insights tab, and enable it. Data will start appearing once real visitors hit the site.

Speed Insights requires real visitor traffic to collect data. You will not see metrics during local development or from your own visits in production.

Metrics

  • LCP (Largest Contentful Paint) — how fast the main content loads. Aim for under 2.5s.
  • INP (Interaction to Next Paint) — how fast the page responds to user input. Aim for under 200ms.
  • CLS (Cumulative Layout Shift) — how much the layout shifts during load. Aim for under 0.1.
  • FCP (First Contentful Paint) — how fast the first content appears. Aim for under 1.8s.
  • TTFB (Time to First Byte) — server response time. Aim for under 800ms.