Optimize Vercel API performance with caching, batching, and connection pooling.
Use when experiencing slow API responses, implementing caching strategies,
or optimizing request throughput for Vercel integrations.
Trigger with phrases like "vercel performance", "optimize vercel",
"vercel latency", "vercel caching", "vercel slow", "vercel batch".
Optimize Vercel deployment performance across four levers: edge caching, bundle size reduction, serverless function cold start elimination, and Core Web Vitals improvement. Uses real Vercel cache headers, ISR, and Edge Functions for maximum performance.
Prerequisites
Vercel project deployed with accessible URL
Access to Vercel Analytics (dashboard)
Bundle analyzer available (@next/bundle-analyzer or similar)
Instructions
Step 1: Establish Performance Baseline
# Check deployment size and function count
vercel inspect https://my-app.vercel.app
# Run Lighthouse via CLI
npx lighthouse https://my-app.vercel.app --output=json --quiet \
| jq '{performance: .categories.performance.score, lcp: .audits["largest-contentful-paint"].numericValue, cls: .audits["cumulative-layout-shift"].numericValue}'
# Check bundle size (Next.js)
ANALYZE=true npx next build
# Opens bundle analyzer report in browser
Enable Vercel Analytics in the dashboard under Analytics tab for ongoing monitoring.
Step 2: Configure Edge Caching
// api/cached-data.ts — cache API responses at the edge
import type { VercelRequest, VercelResponse } from '@vercel/node';
export default function handler(req: VercelRequest, res: VercelResponse) {
// Cache at Vercel edge for 60s, serve stale for 300s while revalidating
res.setHeader('Cache-Control', 's-maxage=60, stale-while-revalidate=300');
res.json({ data: fetchData(), cachedAt: new Date().toISOString() });
}
// api/revalidate.ts
import type { VercelRequest, VercelResponse } from '@vercel/node';
export default async function handler(req: VercelRequest, res: VercelResponse) {
const secret = req.query.secret;
if (secret !== process.env.REVALIDATION_SECRET) {
return res.status(401).json({ error: 'Invalid secret' });
}
const path = req.query.path as string;
await res.revalidate(path);
res.json({ revalidated: true, path });
}
// Trigger: POST /api/revalidate?secret=xxx&path=/products/123
Step 4: Reduce Cold Starts
// Lazy initialization — don't import heavy modules at top level
// BAD: Cold start loads everything
import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient(); // Runs on every cold start
// GOOD: Lazy singleton — only connects when first used
let prisma: PrismaClient | null = null;
function getDb(): PrismaClient {
if (!prisma) {
prisma = new PrismaClient();
}
return prisma;
}
export default async function handler(req, res) {
const users = await getDb().user.findMany();
res.json(users);
}
Move latency-critical paths to Edge Functions (zero cold starts):
