Skip to content

SPEED_INSIGHTS.md

Latest commit

 

History

History
54 lines (40 loc) · 1.59 KB

SPEED_INSIGHTS.md

File metadata and controls

54 lines (40 loc) · 1.59 KB
Raw

Vercel Speed Insights Integration

This Next.js application has been configured with Vercel Speed Insights to track and monitor real-user performance metrics.

What's Been Configured

1. Package Installation

The @vercel/speed-insights package has been installed:

"@vercel/speed-insights": "^1.3.1"

2. Integration in Root Layout

The SpeedInsights component has been added to the root layout (src/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>
  );
}

How It Works

The SpeedInsights component automatically:

  • Tracks Core Web Vitals (LCP, FID, CLS, FCP, TTFB, INP)
  • Collects real user performance data
  • Sends metrics to Vercel's analytics platform

Deploying to Vercel

When deployed to Vercel:

  1. Enable Speed Insights in your project dashboard
  2. Deploy your application
  3. The tracking script will be automatically served at /_vercel/speed-insights/script.js
  4. View metrics in the Speed Insights tab of your Vercel dashboard

Local Development

Speed Insights is designed to work in production. In development mode, the component is present but won't send data to Vercel's analytics.

Learn More