Performance Optimization

Performance configuration for José Madrid Salsa covering images, bundles, and server-side optimization.

Image Optimization

Next.js Image Optimization is configured with modern formats and responsive sizing:

images: {
  formats: ['image/avif', 'image/webp'],
  deviceSizes: [640, 750, 828, 1080, 1200, 1920],
  imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
  minimumCacheTTL: 60,
  remotePatterns: [
    { hostname: 'cdn11.bigcommerce.com' },
    { hostname: 'images.unsplash.com' },
    { hostname: 'maps.googleapis.com' },
    { hostname: 'lh3.googleusercontent.com' },
    { hostname: 'places.googleapis.com' },
    { hostname: 'logo.clearbit.com' },
    { hostname: 'www.google.com', pathname: '/s2/favicons/**' },
    { hostname: 'utfs.io' },
  ],
}

Format Priority

Images are served as AVIF first (best compression), falling back to WebP, then the original format. AVIF provides ~50% smaller files than JPEG at comparable quality.

Remote Patterns

Only images from whitelisted hostnames are optimized. This includes:

• BigCommerce CDN -- Product images
• Unsplash -- Editorial/marketing images
• Google Maps/Places -- Location photos
• UploadThing -- User-uploaded content

Bundle Size Management

Serverless Function Traces

The outputFileTracingExcludes setting keeps functions under Vercel's 250 MB limit:

outputFileTracingExcludes: {
  '*': [
    'data/**', 'docs/**', 'scripts/**', 'tests/**',
    'public/Fundraiser Forms/**', 'public/samples/**',
    'prisma/dev.db', 'prisma/seed*.ts', 'prisma/seeds/**',
  ],
}

Prisma Client is explicitly included for routes that need database access:

outputFileTracingIncludes: {
  '/api/**/*': [
    './node_modules/.prisma/client/**/*',
    './node_modules/@prisma/client/**/*',
  ],
}

External Packages

Server-heavy packages are marked as external to avoid bundling:

serverExternalPackages: ['@react-email/render'],
transpilePackages: ['@react-pdf/renderer'],

Sentry Tree-Shaking

Sentry logger statements are automatically removed from production bundles:

disableLogger: true,  // in Sentry options

Turbopack

Development uses Turbopack for fast HMR:

"dev": "next dev --turbo"

The turbopack.root is explicitly set to the project root to handle module resolution correctly:

turbopack: {
  root: projectRoot,
}

Build ID

Each build generates a unique ID to force cache invalidation:

generateBuildId: async () => {
  return `build-${Date.now()}`
}

This prevents stale cached pages from being served after a deployment.

Script Loading

Third-party tags in the root layout (GTM, the Meta and TikTok pixels, the Google Customer Reviews badge, Notifuse) use strategy="lazyOnload", so they download after the page's load event and never compete with the first render or hydration:

<Script id="gtm-script" strategy="lazyOnload" ... />

Heavy client code that is not needed for the first paint is deferred the same way:

Performance Checklist

• All product images use next/image with responsive sizes
• Remote image patterns cover all external sources
• Serverless functions stay under 250 MB unzipped
• Prisma Client is included in API route traces
• Development uses Turbopack (--turbo)
• Third-party scripts use lazyOnload; client-only SDKs load on demand
• Sentry logger tree-shaking is enabled
• Build IDs are unique per deployment