How to set up a CDN for WordPress
A CDN keeps copies of your site's static files on servers near your visitors. Put one in front of the whole site through DNS, as Cloudflare works, or serve only static files from a second hostname with a plugin. Then check HTTPS, the response headers and the checkout.
- By
- WP Ministry
- Published
In short
- A CDN serves images, stylesheets, scripts and fonts from servers near the visitor. The page itself still comes from your server unless you set up more.
- A CDN does not make a slow server fast for pages it cannot cache, such as the dashboard, the cart and the checkout.
- One kind sits in front of the whole site and is set up in DNS. The other serves static files from a second hostname and is set up with a plugin.
- With Cloudflare, put a valid certificate on your server and use the Full (strict) encryption mode. A mode that does not match the server causes redirect loops and mixed content.
- Afterwards, check that the site loads over HTTPS, that the headers show the CDN, and that the dashboard and checkout are not cached.
- Know how to go back before you start. Both kinds can be switched off without moving the site.
A content delivery network, or CDN, is a group of servers in many locations that keep copies of a site's files. A visitor is answered by a server near them, not by your one hosting server wherever it happens to be.
For a WordPress site, the files in question are the static ones: images, stylesheets, scripts and fonts. They are the same for every visitor, so a copy can be handed out safely. WordPress's own performance guide says that moving their delivery to a CDN is faster and takes load off your server.
What a CDN does not do
- It does not build your pages. The HTML of each page still comes from your server, where WordPress runs PHP and reads the database. Cloudflare's documentation states that it does not cache HTML by default. If the server takes two seconds to produce a page, it still takes two seconds with a CDN in front.
- It cannot help pages that must stay personal. The dashboard, the cart, the checkout and account pages are different for each person and are fetched from your server every time.
- It does not shrink files. An image that is far too large is still too large when it arrives from nearby. See how to optimize WordPress images.
A slow server is a job for a page cache or better hosting. WordPress caching plugins compared covers the first, and how to speed up WordPress covers the rest.
Two kinds of CDN
| In front of the whole site | Static files only | |
|---|---|---|
| Example | Cloudflare | A pull zone at a CDN provider, with a plugin |
| How it is set up | Your domain's DNS moves to the CDN, and every request passes through it | A plugin rewrites the addresses of static files to a second hostname |
| What visitors get from it | Static files from its cache. Pages are passed on to your server | Static files only. Pages never touch it |
| What you change | Nameservers at your domain registrar | A plugin setting, plus one DNS record if you want a hostname of your own |
| How to go back | Switch the DNS records to DNS only | Deactivate the plugin or clear its CDN setting |
Choose one. A service in front of the whole site already serves your static files, so a second hostname on top adds nothing but another cache to clear.
Before either, check your hosting panel. If your plan includes a CDN, switching that on is less work than adding one of your own.
Set up a CDN in front of the whole site
These steps follow Cloudflare's documentation for its standard setup, in which Cloudflare becomes the DNS host for your domain. Cloudflare has a free plan.
Step 1: Put a valid certificate on your server
Your hosting panel should show a certificate that covers your domain, with and without www, and has not expired. The encryption mode set in a later step needs one.
Step 2: Add the domain to Cloudflare
Create an account, add your domain without www, and choose a plan. Cloudflare scans for your existing DNS records.
Step 3: Check every DNS record
Compare Cloudflare's list with the records at your current DNS host. Look hardest at the records for the domain itself, for www, for other subdomains and for email. A record that is missing here stops working when the nameservers change.
Records for web addresses are either Proxied, which sends that address's web traffic through Cloudflare, or DNS only, which answers with your server's real address and passes nothing through. Mail records are always DNS only.
Step 4: Turn off DNSSEC if it is on
If DNSSEC is active for the domain, Cloudflare's instructions say to turn it off at your registrar before you replace the nameservers. You can switch it on again through Cloudflare afterwards.
Step 5: Change the nameservers at your registrar
Cloudflare assigns nameservers to your domain. Log in where the domain is registered, remove the existing nameservers and enter Cloudflare's exactly as shown. Registrars can take up to 24 hours to apply the change. Cloudflare emails you when the domain is active.
Step 6: Set the encryption mode to Full (strict)
In Cloudflare's SSL/TLS settings, choose Full (strict). Cloudflare then reaches your server over HTTPS whenever the visitor came over HTTPS, and checks that the server's certificate is valid for your domain. Cloudflare recommends Full or Full (strict). Do not use Flexible on a WordPress site that already runs on HTTPS.
Step 7: Install Cloudflare's plugin if you want cache clearing from WordPress
The Cloudflare plugin in the WordPress.org directory applies settings recommended for WordPress and clears Cloudflare's cache when the site's appearance is updated. It is optional.
Cloudflare issues its own certificate for your domain within 15 minutes to 24 hours of the domain becoming active. For a site that is already live, Cloudflare suggests leaving the site's records on DNS only until that certificate is in place, then switching them to Proxied.
Set up a CDN for static files only
This kind leaves your DNS and your pages alone. The CDN fetches each static file from your site the first time someone asks for it, and serves its own copy for a set length of time before fetching it again. CDN providers call this a pull zone.
Step 1: Create a pull zone at the CDN
In the CDN provider's dashboard, add a zone of the pull type and give it your site's address, beginning with
https://, as the origin. The provider gives the zone a hostname.Step 2: Decide which hostname to use
You can use the hostname the provider gave you, or one of your own such as
cdn.example.com. For your own, add the CNAME record the provider asks for and switch on a certificate for that name in the provider's dashboard. Without a certificate that covers that name, browsers refuse the files.Step 3: Tell WordPress to use it
Enter the hostname in a plugin that rewrites the addresses of static files. CDN Enabler is a free plugin that does only this: it rewrites the addresses of stylesheets, scripts and images so that they are served by the CDN. WP Super Cache, W3 Total Cache, WP Fastest Cache and WP Rocket each have a CDN setting that does the same, so use that if one of them is already on the site.
Step 4: Clear the page cache
Cached pages still hold the old addresses. Clear the cache so that pages are rebuilt with the new ones.
Do not enter a Cloudflare address in a plugin's CDN hostname field. Cloudflare works through DNS and needs no rewritten addresses. WP Rocket's documentation warns that entering one in its own CDN settings breaks the site.
Check the result
Do these in a private browser window, logged out.
- The site loads over HTTPS. Open the home page, an inner page and, on a store, a product. There should be no warning and no missing padlock.
- The response headers show the CDN. Open the browser's developer tools, go to the network tab, reload, and select an image or a stylesheet. With Cloudflare, look for the
cf-cache-statusheader.MISSmeans the file was fetched from your server this time, andHITon the next reload means Cloudflare served its own copy. With a static-file CDN, the file's address should begin with the CDN hostname, and your provider's documentation names the header it adds. - Pages are not cached by accident. Select the page itself in the network tab. With Cloudflare's defaults its
cf-cache-statusisDYNAMIC, which means the request went to your server. Check the cart and the checkout the same way. Neither should ever sayHIT. - The dashboard and the store work. Log in, edit a post and save it. On a store, add a product to the cart in one browser and open the cart in a second browser: the second cart must be empty. Then place an order through to the end.
- Email still arrives. After a DNS move, send a message to an address on the domain and send a form from the site.
What goes wrong
The site redirects in a loop
The browser says the page redirected too many times. Cloudflare's encryption mode does not match the server. In Flexible mode Cloudflare talks to your server over plain HTTP. If the server sends every HTTP request to HTTPS, the visitor goes round in circles. Set the mode to Full or Full (strict), which needs a certificate on the server. In the Full modes the same loop appears if the server redirects HTTPS back to HTTP. Remove that redirect at the server.
The padlock is missing or parts of the page do not load
That is mixed content: a page served over HTTPS that asks for files over plain HTTP. It appears when Cloudflare reaches your server over HTTP, because WordPress then writes HTTP addresses for its own files. It also appears when a static-file CDN's hostname was entered with http://. How to fix mixed content warnings covers both.
A certificate warning
A warning on the whole site soon after the nameserver change can mean that Cloudflare's certificate for your domain has not been issued yet. Set the records to DNS only until it has. Images and styles that fail from a hostname such as cdn.example.com mean the certificate at the CDN does not cover that name. How to fix "Your connection is not private" explains how to read the code on the warning. With Full (strict), an invalid certificate on your own server shows visitors Cloudflare's error 526 instead.
An old stylesheet after an update
WordPress adds a version number to the end of a stylesheet's address, and Cloudflare's default is to treat an address with a different query string as a different file. A plugin or theme update usually changes the version, so visitors get the new file. A file edited in place keeps its address, and the CDN goes on serving the old copy.
Purge that file in the CDN's dashboard. In Cloudflare, the caching configuration page has a Purge Cache section where Custom Purge clears one address and Purge Everything clears them all. After a full purge every request goes to your server until the cache fills again, so prefer the single file on a busy site. While you work on a design, Cloudflare's Development Mode suspends its cache for three hours.
Icons or fonts are missing
With a static-file CDN, fonts come from a different hostname than the page. Browsers block such a font unless that host sends an Access-Control-Allow-Origin header that permits your site. Look for a CORS setting in your CDN's dashboard, or ask its support.
A customer sees someone else's cart
Something is caching pages that must stay personal. Cloudflare does not do this by default, but a cache rule that makes pages eligible for caching can. If you add one, leave out the dashboard, the login page, and the Cart, Checkout and My Account pages, which WooCommerce says must stay out of every cache. Cloudflare's Automatic Platform Optimization for WordPress, a paid add-on on the free plan, caches whole pages and bypasses its cache for logged-in users and when WooCommerce cookies are present. See how to fix a WooCommerce checkout that is not working.
How to go back
For Cloudflare, set the site's DNS records to DNS only. Cloudflare then answers with your server's own address and passes no web traffic through its network, and the DNS itself stays where it is.
For a static-file CDN, deactivate the plugin or empty its CDN hostname field, then clear the page cache.
A CDN is one part of making a slow site faster. Our speed optimization service is a one-time job in which you name the pages, and we measure them before the work and again after it.
Common questions
Do I need a CDN if most of my visitors are in one country?
Less than a site with visitors everywhere. If your server is in the same country as your visitors, the files do not have far to travel. A CDN still takes requests for static files off your server. Measure a few pages before and after, and keep it if they improve.
I edited a page and visitors still see the old one. Is that the CDN?
Usually not. With Cloudflare's defaults, and with a static-file CDN, the page's HTML is not cached by the CDN at all. Look at your caching plugin or your host's page cache first. If you have set Cloudflare to cache pages, purge the page there. Cloudflare's plugin clears its cache for you when the site's appearance changes.
Will a CDN change my site's address?
No. The addresses of your pages stay the same with both kinds. A static-file CDN changes only the addresses of images, stylesheets and scripts inside the page's source.