62 lines
2.1 KiB
Markdown
62 lines
2.1 KiB
Markdown
# 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
|