get to prod tasks

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

@@ -0,0 +1,61 @@
+# 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