# 05. CDN & Asset Optimization

meta:
  id: web-production-05
  feature: web-production
  priority: P2
  depends_on: []
  tags: [performance, infrastructure, production]

objective:
- Configure CDN for static assets and optimize frontend bundle delivery

deliverables:
- CDN configuration (Cloudflare, Vercel Edge, or AWS CloudFront)
- Asset optimization (images, fonts, JS/CSS)
- Brotli/Gzip compression
- Cache-Control headers for static assets

steps:
1. Configure CDN for static assets:
   - Set up Cloudflare or Vercel Edge Network
   - Point CDN to web/dist/client or .output/public
   - Configure cache rules for static files
2. Optimize image delivery:
   - Convert landing page SVGs to optimized formats where appropriate
   - Add responsive image srcset for photos
   - Implement lazy loading for below-fold images
3. Configure compression:
   - Enable Brotli compression (better than gzip)
   - Ensure Nitro/Vite build outputs compressed assets
4. Set Cache-Control headers:
   - Immutable assets (hashed filenames): 1 year
   - HTML pages: no-cache (for SSR)
   - API responses: no-store or short cache
5. Implement resource hints:
   - Preconnect to API domain, Stripe, Clerk
   - Prefetch critical routes
6. Add tests verifying asset optimization

tests:
- Unit: Test asset hashing and cache headers
- Integration: Test CDN cache hit rates
- Performance: Lighthouse performance audit >90

acceptance_criteria:
- Static assets served from CDN with <50ms TTFB
- Brotli compression active on all text assets
- Cache-Control headers correct per asset type
- Image optimization reducing total page weight by >30%
- Lighthouse Performance score ≥ 90
- Preconnect hints present on critical pages

validation:
- `curl -I https://cdn.example.com/assets/main.js` → Cache-Control: public, max-age=31536000, immutable
- Lighthouse CI run shows Performance ≥ 90
- PageSpeed Insights shows <2s LCP on mobile

notes:
- SolidStart with Nitro should handle asset hashing automatically
- Vercel deployment may include CDN automatically
- Consider using @solidjs/start image optimization if available