How to use a CDN with WordPress?

To use a CDN with WordPress, you either route your whole domain through a proxy CDN like Cloudflare by changing your nameservers, or you create a "pull zone" with a provider like BunnyCDN and use a plugin to rewrite your images, CSS, and JavaScript URLs to the CDN's address. Either way, the CDN keeps copies of your files on servers around the world and serves visitors from the location closest to them, which makes your site faster and reduces the load on your hosting.

Setting up a CDN is one of the most effective performance upgrades you can make, and it's easier than it sounds. This guide explains how a CDN works, the two main ways to connect one to WordPress, step-by-step setup for popular options, how to handle caching and purging, and how to fix the problems that sometimes appear afterward.

What Is a CDN?

A Content Delivery Network (CDN) is a network of servers, often called edge servers or points of presence (PoPs), spread across many cities and countries. Instead of every visitor downloading files from your single hosting server, the CDN stores cached copies of those files at the edge and delivers them from the nearest location.

Without a CDN, a visitor in Tokyo loading a site hosted in New York has to wait for every request to travel across the Pacific and back. With a CDN, most of those files come from a server in or near Tokyo. The physical distance, and therefore the latency, drops dramatically.

Why Use a CDN With WordPress?

A CDN helps your WordPress site in several ways:

• Faster load times worldwide: Static files load from nearby servers, which improves metrics like Largest Contentful Paint.
• Less work for your host: The CDN serves most of your bandwidth, so your server spends its resources running WordPress instead of sending images.
• Better handling of traffic spikes: Cached content keeps flowing even when your origin server is under pressure.
• Security benefits: Many CDNs include DDoS protection, a web application firewall (WAF), bot filtering, and free SSL certificates.
• Modern protocols: CDNs typically support HTTP/2, HTTP/3, Brotli compression, and TLS 1.3 without any server configuration on your part.

A CDN matters most when your visitors are spread across different regions, or when your site is image-heavy. Even for a local audience, the offloading and security features often make it worthwhile.

How a CDN Works With WordPress

Most CDNs are "pull" CDNs. You don't upload files to them. Instead:

1. A visitor requests a file: For example, https://cdn.example.com/wp-content/uploads/2026/09/photo.webp.

2. The edge checks its cache: If the nearest edge server already has a fresh copy, it sends it immediately. This is a cache hit.

3. On a miss, the edge pulls from your server: If it doesn't have the file, it fetches it from your WordPress host (the "origin"), stores a copy, and sends it to the visitor.

4. Later visitors get the cached copy: Everyone else in that region is served from the edge until the cached copy expires or you purge it.

Two Ways to Connect a CDN to WordPress

Option 1: Full-Site Proxy CDN

With a proxy CDN like Cloudflare, you point your domain's nameservers to the CDN. All traffic to example.com then flows through the CDN, which caches static assets automatically and forwards everything else to your server.

Pros: No URL rewriting, built-in security features, can cache full HTML pages, and very easy to start on a free plan.

Cons: You move DNS management to the provider, and you need to understand its caching rules to avoid caching things like cart pages.

Option 2: Pull Zone With URL Rewriting

With providers like BunnyCDN, KeyCDN, or Amazon CloudFront, you create a pull zone that gets its own hostname, such as mysite.b-cdn.net, or a custom subdomain like cdn.example.com. A WordPress plugin then rewrites asset URLs in your HTML so they point to the CDN instead of your domain.

Pros: You keep DNS where it is, you control exactly which files use the CDN, and pricing is usually usage-based and affordable.

Cons: Requires a plugin or code to rewrite URLs, and it typically only covers static files unless you set up more advanced configurations.

Many managed WordPress hosts also include a built-in CDN that you can switch on from your hosting dashboard. If yours does, that's often the simplest route of all.

Before You Start

Take a few minutes to prepare:

1. Back up your site: Especially before changing DNS or adding rewrite rules.
2. Make sure HTTPS works: Your site should already load correctly over https://.
3. Note your current DNS records: Screenshot or export them from your domain registrar or host, including MX records for email.
4. Check for conflicting features: Some caching plugins and hosts have their own CDN options. Use one approach, not three at once.

How to Set Up Cloudflare With WordPress

Cloudflare's free plan is the most popular way to add a CDN to WordPress.

Step 1: Add Your Site to Cloudflare

1. Create an account: Sign up at Cloudflare and choose Add a site (or Add a domain).
2. Enter your domain: Type your root domain, such as example.com, and select the Free plan to start.
3. Review DNS records: Cloudflare scans your existing records. Compare them against your notes and add anything missing, especially MX, TXT (SPF, DKIM, DMARC), and any subdomains.
4. Set proxy status: Records with an orange cloud are proxied through the CDN. Your main A or CNAME records for example.com and www should be proxied. Mail-related records and anything that isn't a website should be "DNS only" with a grey cloud.

Step 2: Change Your Nameservers

Cloudflare gives you two nameservers, like ada.ns.cloudflare.com and bob.ns.cloudflare.com. Log in to your domain registrar, find the nameserver settings for your domain, replace the existing nameservers with Cloudflare's, and save. The change usually takes effect within a few hours, though it can take up to 24 to 48 hours.

Step 3: Configure SSL Correctly

This step prevents the most common Cloudflare problem. In the Cloudflare dashboard, go to SSL/TLS > Overview and choose Full (strict). This requires a valid SSL certificate on your host, which most hosts provide free through Let's Encrypt.

Avoid Flexible mode on WordPress. It connects to your server over plain HTTP, and when WordPress is set to use HTTPS, it often causes an endless redirect loop.

Then go to SSL/TLS > Edge Certificates and turn on Always Use HTTPS.

Step 4: Install the Cloudflare Plugin (Optional)

The official Cloudflare plugin for WordPress can apply recommended settings and automatically purge the cache when you update content. You can also enable Automatic Platform Optimization (APO), a paid add-on on the free plan, which caches your full HTML pages at Cloudflare's edge while bypassing cache for logged-in users.

Step 5: Add Cache Rules for WordPress

If you're not using APO but want Cloudflare to cache HTML, create a cache rule under Caching > Cache Rules, and make sure you bypass the cache for dynamic areas. At a minimum, exclude:

• /wp-admin/* and /wp-login.php
• Requests with cookies starting with wordpress_logged_in_ or wp-postpass_
• WooCommerce pages like /cart/, /checkout/, and /my-account/, plus requests with woocommerce_items_in_cart cookies
• /wp-json/* if your REST API returns user-specific data

If you're unsure, stick with Cloudflare's default behavior, which caches static files like images, CSS, and JavaScript but not HTML.

Step 6: Restore Real Visitor IP Addresses

Behind a proxy, your server sees Cloudflare's IP addresses instead of your visitors'. This affects comment spam filtering, security plugins, and login limiting. Most hosts handle this automatically, often through Apache's mod_remoteip or Nginx's real_ip module. If you manage Nginx yourself, a configuration like this in the http or server block restores real IPs:

# Add every current Cloudflare IP range from https://www.cloudflare.com/ips/
set_real_ip_from 173.245.48.0/20;
set_real_ip_from 103.21.244.0/22;
# ...remaining IPv4 and IPv6 ranges...
real_ip_header CF-Connecting-IP;

Keep the list of ranges up to date from Cloudflare's published list, and don't trust the header from sources outside those ranges.

How to Set Up a Pull-Zone CDN (BunnyCDN Example)

If you'd rather keep your DNS where it is, a pull zone is a great option. The steps are similar for KeyCDN, CloudFront, and others.

Step 1: Create a Pull Zone

1. Sign up: Create an account with BunnyCDN.
2. Add a pull zone: Give it a name and set the Origin URL to your site, such as https://example.com.
3. Pick regions: Choose the pricing tier and regions that match your audience.
4. Save: You'll get a CDN hostname like example.b-cdn.net.

Step 2: Add a Custom CDN Hostname (Optional)

A branded hostname like cdn.example.com looks cleaner. In your DNS, add a CNAME record:

Type:  CNAME
Name:  cdn
Value: example.b-cdn.net
TTL:   Auto (or 3600)

Then add cdn.example.com as a custom hostname in the pull zone settings and enable the free SSL certificate for it.

Step 3: Rewrite URLs in WordPress

Now WordPress needs to use the CDN hostname for static files. You have a few choices:

• The official bunny.net plugin: Enter your pull zone details and it rewrites URLs for you.
• CDN Enabler: A lightweight free plugin that rewrites asset URLs to any CDN hostname.
• Your caching plugin: WP Rocket, W3 Total Cache, and LiteSpeed Cache all include a CDN URL field.

If you prefer code and only want to serve uploaded media from the CDN, a small filter in a custom plugin or child theme's functions.php can do it:

function sajjad_cdn_upload_url( $uploads ) {
    $cdn_host  = 'https://cdn.example.com';
    $site_host = untrailingslashit( home_url() );

    $uploads['url']     = str_replace( $site_host, $cdn_host, $uploads['url'] );
    $uploads['baseurl'] = str_replace( $site_host, $cdn_host, $uploads['baseurl'] );

    return $uploads;
}

if ( ! is_admin() ) {
    add_filter( 'upload_dir', 'sajjad_cdn_upload_url' );
}

Because this filter only changes URLs on the front end, uploads in the dashboard continue to work normally. A plugin is still the better choice if you also want CSS and JavaScript served from the CDN.

Step 4: Verify It's Working

Load your site, right-click an image, and open it in a new tab. The URL should start with your CDN hostname. You can also check the headers:

curl -sI https://cdn.example.com/wp-content/uploads/2026/09/photo.webp

Look for headers such as cdn-cache: HIT or x-cache: HIT on the second request.

Choosing the Right CDN for WordPress

Here are some well-known options and what they're good at:

• Cloudflare: Generous free plan, full-site proxy, strong security features, and optional APO for WordPress HTML caching.
• BunnyCDN (bunny.net): Simple pull zones, low pay-as-you-go pricing, and optional image optimization.
• KeyCDN: Straightforward pull zones with usage-based pricing.
• Amazon CloudFront: Powerful and flexible, especially if you already use AWS, but more complex to configure.
• Jetpack's Site Accelerator: A free image and static file CDN included with Jetpack, handy for beginners.
• Your host's CDN: Many managed WordPress hosts include a CDN that's already tuned for their platform.

Pricing varies by provider, region, and traffic, so compare current plans before you commit. For most small to medium sites, a free Cloudflare plan or a low-cost pull zone is more than enough.

Managing Cache and Purging

Once your CDN is active, you need to know how to refresh content.

• Static files with version strings: WordPress adds ?ver= to enqueued CSS and JavaScript, so updating a theme or plugin changes the URL and the CDN fetches the new file automatically. Make sure your CDN is set to treat query strings as part of the cache key.
• Replaced images: If you replace an image using the same file name, purge that URL in the CDN dashboard, or upload it with a new file name.
• HTML pages: If your CDN caches HTML, use its WordPress plugin or integration so posts purge automatically when you update them.
• Purge everything: Every CDN dashboard has a Purge all option. Use it sparingly, since your origin will be busier for a while as the cache refills.

Troubleshooting Common CDN Problems

Too many redirects: Almost always caused by Cloudflare's Flexible SSL mode. Switch to Full (strict) and make sure your host has a valid certificate.

Fonts or icons missing: Browsers block cross-origin font requests without the right header. Enable CORS headers in your CDN settings, or add them on your server. On Apache:

<IfModule mod_headers.c>
    <FilesMatch "\.(woff2?|ttf|otf|eot)$">
        Header set Access-Control-Allow-Origin "*"
    </FilesMatch>
</IfModule>

Mixed content warnings: Some assets still load over http://. Make sure your CDN URL uses https:// and that Settings > General shows HTTPS for both the WordPress Address and Site Address.

Old content keeps showing: Purge the CDN cache and your caching plugin, then check whether the CDN is caching HTML without purge integration.

Logged-in pages or carts cached: Your CDN cache rules are too broad. Add bypass rules for admin paths, logged-in cookies, and store pages.

Admin or editor behaving oddly: Make sure /wp-admin/ and /wp-json/ aren't being cached or heavily modified by optimization features like Rocket Loader. Disable those features for the admin, or entirely, and test again.

---

FAQ: Using a CDN With WordPress

---

Conclusion

Using a CDN with WordPress comes down to choosing one of two approaches: proxy your entire domain through a service like Cloudflare, or create a pull zone and rewrite your asset URLs with a plugin. Both put your files on servers close to your visitors, reduce the load on your host, and make your site faster and more resilient.

Whichever you pick, take a backup first, set SSL correctly, exclude dynamic pages from HTML caching, and verify your setup with response headers. Once it's running, a CDN is mostly set-and-forget, quietly serving your content from around the world while your WordPress server focuses on what it does best.