vercel-performance-tuning

# Vercel Performance Tuning ## Overview 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 ```bash # 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 ```typescript // 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(), ...