Vercel Features | Client Guides

🚀 Goal: Enable and use Vercel's powerful built-in features

This guide covers three powerful Vercel features that come free with your deployment: Web Analytics, Speed Insights, and Preview Deployments.

What We'll Cover

📊

Web Analytics

Understand how visitors interact with your site. Track page views, unique visitors, and user behavior without compromising privacy.

Real-time visitor data
Traffic sources breakdown
Page performance metrics
Geographic distribution

⚡

Speed Insights

Monitor your site's performance with Core Web Vitals. Identify slow pages and get actionable recommendations for improvement.

Core Web Vitals tracking
Real user metrics
Performance scoring
Optimization suggestions

👁️

Preview Deployments

Automatically create preview URLs for every pull request. Test changes in a production-like environment before merging.

Automatic preview URLs
Shareable test links
CI/CD integration
Team collaboration

ℹ️

Prerequisites

Vercel account
Project deployed to Vercel
GitHub repository connected (for preview deployments)

1. Web Analytics

Understand your visitors without compromising privacy

Enable Web Analytics

Vercel Web Analytics is built-in and privacy-friendly. Here's how to enable it:

Go to your Vercel Dashboard
Select your project
Click the "Analytics" tab in the navigation
Click "Enable Web Analytics"

💡

No setup required! Once enabled, Vercel automatically starts collecting analytics data. No need to add any code or configure environment variables.

Install the Analytics Package (Optional)

For more control over analytics tracking, you can install the Vercel Analytics package:

bash

1# Install the Analytics package
2npm install @vercel/analytics

Add it to your root layout:

src/app/layout.tsx

1import { Analytics } from "@vercel/analytics/react";
2 
3export default function RootLayout({ children }) {
4  return (
5    <html lang="en">
6      <body>
7        <ThemeProvider>
8          <ToastProvider>
9            {children}
10            <ThemeToggle />
11          </ToastProvider>
12        </ThemeProvider>
13        <Analytics />
14      </body>
15    </html>
16  );
17}

ℹ️

Already enabled? If you enabled analytics in the Vercel dashboard, you don't need to add the package manually. The dashboard integration works automatically.

View Analytics Data

Once enabled, you can view detailed analytics in your Vercel dashboard:

Available Metrics:

Views - Total page views over time
Unique Visitors - Count of unique users
Sources - Where traffic comes from (Google, Twitter, direct, etc.)
Locations - Geographic distribution of visitors
Browsers & Devices - What devices and browsers visitors use

⚠️

Data Delay

Analytics data may take 5-10 minutes to appear. Real-time data shows visitors currently on your site.

Privacy Considerations

Vercel Web Analytics is designed with privacy in mind:

No cookies required
No personal data collection
GDPR compliant by design
Does not track users across sites
IP addresses are not stored

💡

Need a cookie banner? Since Vercel Analytics doesn't use cookies, you typically don't need a cookie consent banner for analytics purposes. However, consult with legal counsel for complete compliance.

2. Speed Insights

Monitor and improve your site's performance

Enable Speed Insights

Speed Insights is automatically enabled for all Vercel deployments. No setup required!

Go to your Vercel Dashboard
Select your project
Click the "Speed Insights" tab in the navigation

ℹ️

Free forever! Speed Insights is available on all Vercel plans, including the free tier.

Understand Core Web Vitals

Speed Insights measures your site against Google's Core Web Vitals:

LCP (Largest Contentful Paint)

Measures loading performance. How fast the largest content element (like an image or heading) becomes visible. Target: under 2.5 seconds.

INP (Interaction to Next Paint)

Measures interactivity. How quickly your site responds to user interactions. Target: under 200 milliseconds.

CLS (Cumulative Layout Shift)

Measures visual stability. How much page content shifts unexpectedly. Target: under 0.1.

Install Speed Insights Package (Optional)

For more control and additional features, install the Speed Insights package:

bash

1# Install Speed Insights
2npm install @vercel/speed-insights

Add it to your root layout:

src/app/layout.tsx

1import { SpeedInsights } from "@vercel/speed-insights/react";
2 
3export default function RootLayout({ children }) {
4  return (
5    <html lang="en">
6      <body>
7        <ThemeProvider>
8          <ToastProvider>
9            {children}
10            <ThemeToggle />
11          </ToastProvider>
12        </ThemeProvider>
13        <SpeedInsights />
14      </body>
15    </html>
16  );
17}

ℹ️

Combined with Analytics You can use both Analytics and Speed Insights together:

src/app/layout.tsx

1import { Analytics } from "@vercel/analytics/react";
2import { SpeedInsights } from "@vercel/speed-insights/react";
3 
4// In your component:
5<>
6  <Analytics />
7  <SpeedInsights />
8</>

Interpreting Speed Insights Data

Speed Insights provides scores and recommendations:

Performance Scores:

Good (90-100) - Excellent performance
Needs Improvement (50-89) - Some issues to address
Poor (0-49) - Critical issues requiring attention

Click on any metric to see:

Real user data distribution
Device breakdown (mobile, desktop, tablet)
Specific optimization recommendations
Historical performance trends

Performance Optimization Tips

Here are common recommendations from Speed Insights:

🎨 Optimize Images

Use Next.js Image component
Specify explicit width and height
Use modern formats (WebP, AVIF)
Implement lazy loading

📦 Optimize Bundles

Code splitting with dynamic imports
Remove unused JavaScript
Use smaller alternatives (lodash → lodash-es)
Enable bundle analyzer in development

🔧 Server-Side Improvements

Implement caching strategies
Use Edge functions where appropriate
Optimize database queries
Reduce API response times

3. Preview Deployments

Test changes in production-like environments before merging

How Preview Deployments Work

Preview deployments are automatically created when you open a pull request:

Create a new branch and make changes
Open a pull request on GitHub
Vercel automatically creates a preview deployment
Get a unique URL to test your changes
After merging, production deployment triggers automatically

ℹ️

No configuration needed! Preview deployments work automatically when you connect your GitHub repository to Vercel.

Accessing Preview Deployments

There are several ways to access your preview deployment:

Method 1: Vercel Dashboard

Go to your Vercel project
Click on "Deployments" tab
Find the preview deployment (green dot indicates preview)
Click to view details and access the URL

Method 2: GitHub Pull Request

Open your pull request on GitHub
Look for the Vercel bot comment
Click the preview URL in the comment
You can also click "View Deployment" button

Method 3: Vercel CLI

bash

1# List deployments
2vercel ls
3 
4# Open latest preview
5vercel link --yes && vercel open

Preview Deployment Features

Preview deployments come with powerful features:

🔗 Shareable URLs

Each preview gets a unique URL that you can share with teammates, clients, or stakeholders for feedback.

🧪 Full Environment

Preview deployments run the same infrastructure as production, so you can test real behaviors.

👥 Team Collaboration

Team members can access preview URLs without needing local setup or credentials.

📱 Device Testing

Test on real devices by sharing the preview URL, great for cross-device testing.

Configuring Preview Deployments

Customize preview deployment behavior in vercel.json:

vercel.json

1{
2  "framework": "nextjs",
3  "builds": [
4    {
5      "src": "package.json",
6      "use": "@vercel/next"
7    }
8  ],
9  "previewSuffix": "preview" // Custom suffix for preview URLs
10}

ℹ️

Default behavior By default, preview deployments use the branch name in the URL (e.g., my-branch.vercel.app). The production deployment uses your custom domain.

Best Practices for Preview Testing

Get the most out of preview deployments:

✅ Test Critical Paths

User authentication flows
Payment/checkout processes
Database operations
API integrations

🔒 Test with Real Data

Use anonymized production data
Test edge cases and error states
Verify error handling works
Check database migrations

👥 Involve Your Team

Share preview URLs in PR comments
Request specific feedback
Use preview for stakeholder demos
Include QA in the review process

Summary: Quick Reference

Feature	How to Enable	Cost
Web Analytics	Dashboard → Analytics → Enable	Free
Speed Insights	Automatic (no setup)	Free
Preview Deployments	Automatic with GitHub PRs	Free

Installation Commands

If you want full control over analytics and speed insights, install both packages:

bash

1# Install both packages
2npm install @vercel/analytics @vercel/speed-insights

Then add to your layout:

src/app/layout.tsx

1import { Analytics } from "@vercel/analytics/react";
2import { SpeedInsights } from "@vercel/speed-insights/react";
3 
4export default function RootLayout({ children }) {
5  return (
6    <html lang="en">
7      <body>
8        <ThemeProvider>
9          <ToastProvider>
10            {children}
11            <ThemeToggle />
12          </ToastProvider>
13        </ThemeProvider>
14        <Analytics />
15        <SpeedInsights />
16      </body>
17    </html>
18  );
19}

💡

Optional! Both features work without installing any packages. Install them only if you need more control or custom configuration.

Related Guides

Production Deployment

Deploy your SaaS application to production with comprehensive environment setup

Advanced Configuration

Comprehensive guide to all environment variables and advanced configuration options

🎉 You're All Set!

Vercel's built-in features give you powerful insights into your application's performance and usage:

Web Analytics - Understand your visitors without privacy concerns
Speed Insights - Monitor Core Web Vitals and get optimization recommendations
Preview Deployments - Test changes in production-like environments before shipping

All of these features come free with your Vercel deployment - no additional cost required!

What We'll Cover

📊

Web Analytics

Understand how visitors interact with your site. Track page views, unique visitors, and user behavior without compromising privacy.

Real-time visitor data
Traffic sources breakdown
Page performance metrics
Geographic distribution

⚡

Speed Insights

Monitor your site's performance with Core Web Vitals. Identify slow pages and get actionable recommendations for improvement.

Core Web Vitals tracking
Real user metrics
Performance scoring
Optimization suggestions

👁️

Preview Deployments

Automatically create preview URLs for every pull request. Test changes in a production-like environment before merging.

Automatic preview URLs
Shareable test links
CI/CD integration
Team collaboration

1import { Analytics } from "@vercel/analytics/react"; 2 3export default function RootLayout({ children }) { 4 return ( 5 <html lang="en"> 6 <body> 7 <ThemeProvider> 8 <ToastProvider> 9 {children} 10 <ThemeToggle /> 11 </ToastProvider> 12 </ThemeProvider> 13 <Analytics /> 14 </body> 15 </html> 16 ); 17}

1import { SpeedInsights } from "@vercel/speed-insights/react"; 2 3export default function RootLayout({ children }) { 4 return ( 5 <html lang="en"> 6 <body> 7 <ThemeProvider> 8 <ToastProvider> 9 {children} 10 <ThemeToggle /> 11 </ToastProvider> 12 </ThemeProvider> 13 <SpeedInsights /> 14 </body> 15 </html> 16 ); 17}

Feature

How to Enable

Cost

Web Analytics

Dashboard → Analytics → Enable

Free

Speed Insights

Automatic (no setup)

Free

Preview Deployments

Automatic with GitHub PRs

Free

Installation Commands

If you want full control over analytics and speed insights, install both packages:

bash

1# Install both packages
2npm install @vercel/analytics @vercel/speed-insights

Then add to your layout:

src/app/layout.tsx

1import { Analytics } from "@vercel/analytics/react";
2import { SpeedInsights } from "@vercel/speed-insights/react";
3 
4export default function RootLayout({ children }) {
5  return (
6    <html lang="en">
7      <body>
8        <ThemeProvider>
9          <ToastProvider>
10            {children}
11            <ThemeToggle />
12          </ToastProvider>
13        </ThemeProvider>
14        <Analytics />
15        <SpeedInsights />
16      </body>
17    </html>
18  );
19}

💡

Optional! Both features work without installing any packages. Install them only if you need more control or custom configuration.

🎉 You're All Set!

Vercel's built-in features give you powerful insights into your application's performance and usage:

Web Analytics - Understand your visitors without privacy concerns

Speed Insights - Monitor Core Web Vitals and get optimization recommendations

Preview Deployments - Test changes in production-like environments before shipping

All of these features come free with your Vercel deployment - no additional cost required!