What Are the Best Examples of Using CDNs?

If you build for the web, you have probably seen threads where folks compare load times, Core Web Vitals, and edge caching strategies. CDNs often show up as the biggest single win for performance and reliability, but the real value depends on how you use them.

I’m optimizing a site for global users and keep seeing recommendations to add a CDN. I understand the basics, but what are the best examples of using CDNs in real projects? I’m looking for concrete scenarios, tips for cache headers and asset versioning, and how this applies to images, video streaming, APIs, and single-page apps. Sample configs or code would be great too.

A CDN accelerates delivery by caching content close to users, smoothing out traffic spikes, and improving resilience. Here are proven, high-impact patterns and how to implement them.

• Serve your build outputs from a CDN domain like cdn.example.com.
• Use long cache lifetimes with immutable filenames for versioning.
• Prefer modern formats for smaller payloads. For images, see JPEG vs WebP for guidance on format choices.

<!-- HTML referencing assets on a CDN -->
<link rel="preconnect" href="https://cdn.example.com">
<link rel="stylesheet" href="https://cdn.example.com/app.6a9f3e.css" integrity="sha256-..." crossorigin="anonymous">
<script src="https://cdn.example.com/app.41bb21.js" defer integrity="sha256-..." crossorigin="anonymous"></script>

# Nginx: cache control for static files
location ~* \.(css|js|png|jpg|jpeg|gif|svg|webp|ico)$ {
  expires 1y;
  add_header Cache-Control "public, max-age=31536000, immutable";
  try_files $uri =404;
}Code language: HTML, XML (xml)

Generate fingerprint filenames during the build process and then implement a secure 1-year cache. With each new release, file names are updated, ensuring that previous assets remain functional while new ones are quickly distributed.

• Host originals centrally and generate size-appropriate variants at the edge.
• Use srcset and sizes to reduce over-downloading on mobile.

<img
  src="https://cdn.example.com/images/hero-1200.jpg"
  srcset="
    https://cdn.example.com/images/hero-480.jpg 480w,
    https://cdn.example.com/images/hero-768.jpg 768w,
    https://cdn.example.com/images/hero-1200.jpg 1200w"
  sizes="(max-width: 768px) 90vw, 1200px"
  alt="Hero">Code language: HTML, XML (xml)

• Use adaptive bitrate streaming for playback stability across networks.
• A CDN minimizes startup delay, rebuffering, and bandwidth costs.

• Cache public GET endpoints that do not change often. Add Cache-Control with s-maxage for shared caches.
• For SPAs, serve the static shell from the CDN and consider stale-while-revalidate to keep it snappy.

// Express: public API caching example
app.get("/api/public-products", (req, res) => {
  res.set("Cache-Control", "public, s-maxage=300, stale-while-revalidate=60");
  res.json(data);
});Code language: PHP (php)

• Run simple logic near users for fast redirects, geolocation, or language fallback.
• Keep edge code minimal and stateless for best performance.

• Shield origins to reduce origin traffic and avoid thundering-herd effects.
• Leverage HTTP/2, Brotli, and ETags. Keep your origin simple and stable.
• Centralize and standardize how you handle media assets to cut duplication and drift.

• Immutable filenames for static assets plus long cache lifetimes.
• Responsive images and modern formats to minimize bytes.
• Adaptive streaming for video and generous CDN caching for public APIs.
• Edge logic for low-latency routing and personalization.

If you want a turnkey way to manage and deliver images and video through a global CDN, Cloudinary can streamline the workflow. Upload originals once, then transform and deliver optimized assets via CDN URLs.

<!-- Cloudinary CDN image with automatic format and quality -->
<img
  src="https://res.cloudinary.com/demo/image/upload/f_auto,q_auto,w_800,c_fill/sample.jpg"
  srcset="
    https://res.cloudinary.com/demo/image/upload/f_auto,q_auto,w_480,c_fill/sample.jpg 480w,
    https://res.cloudinary.com/demo/image/upload/f_auto,q_auto,w_800,c_fill/sample.jpg 800w,
    https://res.cloudinary.com/demo/image/upload/f_auto,q_auto,w_1200,c_fill/sample.jpg 1200w"
  sizes="(max-width: 768px) 90vw, 800px"
  alt="Sample">Code language: HTML, XML (xml)

For video, upload once and deliver adaptive streams via a CDN-backed URL. If you are weighing video delivery options, this overview of VOD vs live vs OTT is a useful reference.

• Best CDN wins come from static asset offload, responsive images, adaptive video, and light edge logic.
• Use immutable filenames plus long max-age for cacheable assets, and s-maxage for public API responses.
• Modern formats and srcset reduce bandwidth without sacrificing quality.
• Cloudinary can centralize uploads, generate on-the-fly variants, and deliver through a global CDN with smart defaults.

• PNG to WebP Converter
• WebM to MP4 Converter
• Video as a Service Guide
• Digital Asset Management Guide

Ready to optimize delivery and lighten your origin load? Sign up for Cloudinary free and start transforming and distributing your assets through a global CDN.