Vercel Speed Insights

Learn how to use Vercel Speed Insights for real-time performance monitoring.

The starter kit is pre-configured with Vercel Speed Insights to provide Real User Monitoring (RUM) performance data when deployed on Vercel.

Overview

Vercel Speed Insights provides:

Core Web Vitals - LCP, FID, CLS tracking
Real User Monitoring (RUM) - Performance metrics from actual users
Performance Trends - Track performance over time
Page-by-page Breakdown - Identify slow pages

Setup

1. Install Package

The required package is already installed:

package.json

{
  "dependencies": {
    "@vercel/speed-insights": "1.3.1"
  }
}

2. Add Component to Layout

The component is already added to your root layout:

app/layout.tsx

import { SpeedInsights } from '@vercel/speed-insights/next';

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

3. Deploy to Vercel

Speed Insights automatically works when deployed to Vercel. No additional configuration is needed.

Vercel Only Vercel Speed Insights only works when deployed on Vercel. It won't collect data in local development or when deployed elsewhere.

Core Web Vitals

Speed Insights tracks the following Core Web Vitals:

LCP (Largest Contentful Paint)

Measures loading performance. The time it takes for the largest content element to become visible.

Good: ≤ 2.5 seconds
Needs Improvement: 2.5 - 4.0 seconds
Poor: > 4.0 seconds

FID (First Input Delay)

Measures interactivity. The time from when a user first interacts with your page to when the browser responds.

Good: ≤ 100 milliseconds
Needs Improvement: 100 - 300 milliseconds
Poor: > 300 milliseconds

CLS (Cumulative Layout Shift)

Measures visual stability. The sum of all individual layout shift scores for every unexpected layout shift.

Good: ≤ 0.1
Needs Improvement: 0.1 - 0.25
Poor: > 0.25

TTFB (Time to First Byte)

Measures server response time. The time it takes for the browser to receive the first byte of the response.

Good: ≤ 800 milliseconds
Needs Improvement: 800 - 1800 milliseconds
Poor: > 1800 milliseconds

Viewing Speed Insights

Go to your Vercel Dashboard
Select your project
Navigate to the Speed Insights tab

You'll see:

Core Web Vitals scores
Performance trends over time
Page-by-page performance breakdown
Real user metrics vs. lab metrics
Performance score distribution

Configuration

Disable Speed Insights in Development

Speed Insights are automatically disabled in development, but you can explicitly disable them:

app/layout.tsx

import { SpeedInsights } from '@vercel/speed-insights/next';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        {process.env.NODE_ENV === 'production' && <SpeedInsights />}
      </body>
    </html>
  );
}

Sample Rate

You can control the sample rate to reduce the number of requests:

app/layout.tsx

import { SpeedInsights } from '@vercel/speed-insights/next';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <SpeedInsights sampleRate={0.1} /> {/* 10% of page views */}
      </body>
    </html>
  );
}

Best Practices

Monitor regularly - Check Speed Insights weekly
Optimize slow pages - Use the data to identify performance issues
Set up alerts - Configure alerts for performance degradation
Compare metrics - Compare Core Web Vitals across different pages
Track improvements - Monitor performance trends after optimizations

Troubleshooting

No data showing

Ensure you're deployed on Vercel
Check that the component is added to your layout
Wait a few minutes after deployment for data to appear
Verify you have traffic to your site

Inaccurate metrics

Speed Insights uses real user data, which can vary
Metrics are aggregated over time
Check the sample rate if metrics seem off

Limitations

Vercel only - Only works when deployed on Vercel
No historical data - Data is only available after deployment
Sample-based - Not all page views are tracked (configurable)
Real user data only - No lab/synthetic testing

For more advanced performance monitoring, consider integrating additional tools like Lighthouse CI or WebPageTest.