What Is CDN (Content Delivery Network)?
A Content Delivery Network (CDN) is a geographically distributed network of servers that caches and delivers web content (images, CSS, JS, video) from locations close to the end user. Instead of every request going to a single origin server, a CDN routes users to the nearest 'edge' server, dramatically reducing latency, improving page speed, and reducing load on your origin server.
What a CDN does
Without a CDN, every visitor downloads your files from one origin server, so someone on another continent waits for each request to cross the globe and back. A CDN places copies of those files in data centres, called points of presence (PoPs) or edge locations, in many cities. Well-known providers include Cloudflare, Fastly, Akamai, Amazon CloudFront and Bunny.net, and hosts such as Netlify and Vercel include a CDN as part of their platform. Most CDNs now do more than caching: they terminate HTTPS close to the visitor, apply gzip or Brotli compression, support HTTP/2 and HTTP/3, absorb DDoS attacks, and can resize or convert images. There are also free public CDNs for open-source libraries, such as jsDelivr and cdnjs, which is how Bootstrap's documentation offers its compiled CSS and JavaScript files.
How a CDN works
When you put a site behind a CDN, your domain's DNS points at the CDN instead of your server. Many CDNs use anycast routing, so the same IP address is announced from every location and each visitor's request reaches a nearby edge server. The edge looks up the requested URL in its cache. On a cache hit it responds immediately; on a miss it fetches the file from your origin (sometimes through a regional "shield" cache that protects the origin from repeated requests), returns it to the visitor and stores a copy for the next one. How long a copy stays depends on the caching headers you send: Cache-Control: max-age applies to browsers and shared caches, s-maxage overrides it for shared caches such as CDNs, and no-store prevents caching entirely. The cache key is normally the host and full URL, so style.css?v=2 and style.css?v=3 are stored separately, which is why versioned or fingerprinted file names are a reliable way to publish updates. When content changes under the same URL, you purge it through the CDN's dashboard or API, or let a short TTL expire. Because the TLS handshake also happens at the nearby edge, even responses that cannot be cached, such as personalised pages, often arrive faster.
How CDNs improve performance
Without a CDN: a user in Tokyo loading a site hosted in London experiences ~250ms of network latency just for round-trip time. With a CDN: the same user loads cached assets from a Tokyo edge server in ~10 to 20ms. CDNs cache static assets (images, CSS, JS) at edge locations globally. Dynamic content (API responses, server-rendered HTML) is typically not cached but can be routed via CDN with shorter paths.
CDN and Core Web Vitals
CDNs primarily benefit LCP (Largest Contentful Paint) by making images and assets load faster from nearby edge servers. They also improve TTFB (Time to First Byte) for cached responses. Using a CDN for your hero image, fonts, and JavaScript bundles can meaningfully improve LCP scores, especially for internationally distributed audiences.
Popular CDN options
Cloudflare (free tier, DDoS protection, global network, used by canvasbuilder.co). AWS CloudFront (pay-per-use, deeply integrated with AWS services). Fastly (enterprise-focused, used by GitHub and Stripe). Bunny.net (affordable, simple setup, DigitalOcean Spaces compatible). Vercel Edge Network (built into Vercel deployments). For most sites, Cloudflare's free tier is the first and best choice.
Best practices for using a CDN
Give static assets fingerprinted file names (for example main.8c1f2a.js) and serve them with Cache-Control: public, max-age=31536000, immutable, so both the CDN and browsers keep them for a year and each new build simply references new names. For HTML, use a short s-maxage or revalidation and purge on deploy, so visitors never see a stale page for long. Never cache responses that contain personal data, such as account pages or anything that depends on a login cookie, and be careful with Vary, because varying on headers like User-Agent fragments the cache into thousands of copies. Monitor the cache hit ratio in your CDN's analytics; a low ratio usually means query strings, cookies or missing cache headers are bypassing the cache. Consider self-hosting libraries such as Bootstrap on your own CDN instead of a public one: Chrome, Firefox and Safari now partition their HTTP cache by site, so a file cached from jsDelivr on another website is not reused on yours, and serving from your own domain avoids an extra DNS lookup and connection. If you do load from a public CDN, pin an exact version and add the integrity and crossorigin="anonymous" attributes so the browser rejects a tampered file. Finally, test from several regions with a tool such as WebPageTest to confirm that Time to First Byte actually drops for distant visitors.
CDN (Content Delivery Network) and Canvas Builder
Canvas Builder's export bundles the HTML, CSS, JavaScript, fonts and images into one package, which is the easiest kind of site to put behind a CDN: every file can be cached at the edge with a single set of rules. Because the assets ship with the site instead of depending on third-party CDN links, you control their caching headers and can serve everything from your own domain. canvasbuilder.co serves all static assets through Cloudflare's global CDN, and AI-generated template preview images are served from DigitalOcean Spaces CDN, ensuring fast load times for users worldwide.
Start building freeFrequently asked questions
Do I need a CDN for a small website?
Not always, but it is often free or cheap and rarely hurts. If most visitors are near your server, the latency gain is small, but a CDN still adds HTTPS at the edge, compression, HTTP/3 and protection against traffic spikes. Many static hosts include one automatically.
Does a CDN improve SEO?
A CDN is not a ranking factor itself, but it can reduce Time to First Byte and speed up Largest Contentful Paint for visitors far from your server, which supports Core Web Vitals. It also keeps the site available under heavy load, so crawlers and visitors are less likely to hit errors.
What is the difference between a CDN and web hosting?
Web hosting runs your origin server, where the original files, databases and application code live. A CDN sits in front of that origin and delivers cached copies from many locations. You still need hosting; the CDN reduces how often visitors have to reach it.
Should I load Bootstrap from a public CDN?
A public CDN such as jsDelivr is convenient for prototypes and demos. For production sites, self-hosting the files, or serving them through your own CDN, is usually as fast or faster, because browsers no longer share cached files between different websites. If you use a public CDN, pin the exact version and include the integrity attribute.
Does canvasbuilder.co use a CDN?
Yes, canvasbuilder.co uses Cloudflare as its CDN, with static assets also served from DigitalOcean Spaces CDN (cdn.digitaloceanspaces.com) for generated images.