Kordant/tasks/web-production/05-cdn-asset-optimization.md

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