CDN & Performance Optimization
Optimize web performance with CDNs - cache headers, edge caching, image optimization, Core Web Vitals, and CloudFront configuration.
skill: CDN & Performance Optimization category: DevOps tags: [CDN, Performance, Caching, Core Web Vitals, CloudFront] readingTime: 6
Performance is a feature - a 1-second delay in page load reduces conversions by 7%. CDNs serve assets from the edge (near the user) instead of your origin server. The fastest HTTP request is the one that never reaches your server - maximizing cache hit rates is the highest-leverage performance optimization.
Workflow
- Configure cache-control headers correctlyCache-Control headers tell browsers and CDNs how long to cache resources. Wrong headers cause users to get stale assets or miss caching entirely.
- Set up CloudFront distributionCloudFront serves assets from 400+ edge locations worldwide - reduces latency from hundreds of milliseconds to single digits.
- Optimize imagesImages are 50-80% of page weight on most sites. Modern formats (WebP, AVIF) reduce size by 30-80% vs. JPEG/PNG.
- Measure Core Web VitalsGoogle uses Core Web Vitals (LCP, CLS, INP) in ranking - poor scores hurt SEO. Measure in real user conditions, not just Lighthouse.
- Implement resource hintsResource hints (preload, prefetch, preconnect) tell the browser to start loading critical resources earlier in the page load.
Output Format
CDN setup: Cache-Control headers per asset type, CloudFront distribution, WebP/AVIF images, Core Web Vitals measurement, and resource hints.
Static assets: Cache-Control: public, max-age=31536000, immutable
HTML: Cache-Control: no-cache
API: stale-while-revalidate
LCP image: preload + fetchpriority="high" + width/height
CloudFront: compress=true + custom_error for SPAExamples
Input
Output
Edge Cases & Gotchas
- Cache invalidation timing - CDN caches stale content after deploys unless you use content-hashed filenames. Never deploy code and assets separately - always invalidate or use atomic deploys.
- Vary header complexity - Vary: Accept-Encoding creates separate cache entries per encoding. Only set Vary headers the CDN understands - CloudFront ignores most Vary values.
- CORS on CDN - Cross-origin requests to CDN assets need CORS headers. Configure the CDN to pass Origin header to origin and cache based on it, or add a wildcard CORS header on the CDN.
- Cache stampede on cold start - When a cached entry expires, many requests hit the origin simultaneously. Use stale-while-revalidate or request coalescing (Cloudflare does this automatically).
When to Break These Rules
- Use Vercel or Netlify instead of configuring CloudFront manually - they provide automatic CDN, image optimization, and immutable deployments out of the box.
- Use Fastly instead of CloudFront when you need programmatic cache purging and edge Compute@Edge logic - Fastly's VCL and Compute platform are more flexible.
Reference Files
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Controlhttps://web.dev/vitals/