If you're moving a WordPress website from one web host to another and you're currently using a caching plugin with a content delivery network (CDN), be careful because the moving process may not go as smooth as you think it will.

This article is intended for WordPress users who are comfortable enough with WordPress to install and customize plugins, but may not be PHP coding experts. In this article, you'll learn about what the CDN is. But most importantly, you'll learn what can happen to your site if you change your web host and don't remember to update specific CDN settings.

You'll also learn how to fix the issue yourself.

How WordPress Caching Works

To understand why CDN caching will mess up your website move, first it's important to understand how WordPress caching works and how CDN comes into play.

The most popular caching plugins for WordPress---like W3 Total Cache, WP Rocket, and WP Super Cache---allow you to configure image caching using your favorite CDN service.

cdn caching can break websites

Without optimization, every time a visitor visits your website, they'd need to download the entire page and all of the scripts, images, headers, footers and navigation menus that go along with it. But with a proper caching plugin installed, you can have the visitor's browser cache a lot of the static files that show up on every page.

This way repeat visitors only have to download sections of your pages that actually change. Once your site is getting many thousands of visitors a day, this reduced bandwidth adds up to big savings.

One of the most important items to cache on your website are images, since most of the time they require the most bandwidth to upload. This is where the CDN service comes into play.

How a CDN Service Makes Your Site Efficient

There is a lot of advanced technology that goes into content delivery networks. In a nutshell, a CDN is a service that hosts some or all of your website's content geographically closer to your website visitors.

Without a CDN, if your web host's servers are located in Canada and someone from Australia tries to visit your website, it's going to take them a lot longer to download your web page.

However, if you set up a CDN to deliver at least all of the images---the parts of the web pages that usually take the longest to download---from servers located in Australia, your page is going to load a lot faster.

Setting up a CDN for your WordPress site is simple on the WordPress side. You just need to enable it and select the CDN service you're using. Then use the authorize button to connect it to your CDN service.

cdn caching can break websites

Fully setting up a CDN for your site is outside the scope of this article. But by default you'll usually find the CDN plugin already set up to handle having the CDN service host and serve all of the images on your website.

cdn caching can break websites

Usually, website owners will sign up for a CDN service, set up the plugin, and then completely forget about it.

It isn't until years later, when they decide to change to a new web host, that the CDN comes back to haunt them.

How Changing Web Host Breaks Your CDN Service

Before you can understand why a CDN breaks when you change web host, it's important to understand how the CDN service works.

Remember, the CDN needs to get a copy of the file and then cache it on servers that are local to where the site visitors are located.

In a "pull CDN" configuration---the most common WordPress setup---when a user first accesses a page on your site that has an image the CDN hasn't cached yet, it'll go to your web server for a copy of that file. Then, it'll cache the file and use that local file for all future visits to the page.

Let's take a look at that more closely.

When everything is working great, visitors get dynamic content straight from your web host. But static content (like images) comes from the CDN server local to their country. If you upload a new image to your website, the first time a user visits a page, the CDN will get a fresh copy from your web host.

cdn caching can break websites

When this works, it works very well. Users see your website and all images load lightning fast.

However, when you move to a new web host, you update the nameservers for your domain to point to your new host.

So now, when users type MyWebsite.com into their web browser, they are obtaining content from an entirely different web server. But your CDN service is still getting it's new image files from your old web server.

Here's what that looks like.

cdn caching can break websites

It's a total mess, right? The moment you change to a new host, to users it'll look like everything is working great. When you load your site to make sure everything is working, you'll think the site is fine too.

All new dynamic content comes from your new web server as expected. All of the images on the site will load correctly. But they're actually coming from the cached files stored on CDN servers near your location.

Everything looks fine, when in fact a lot is broken. If you were to clear your CDN cache at this point, no images on your website would load at all.

Symptoms of a Broken CDN

The first sign you'll see that something going awry is when you try to create a new WordPress post.

When you upload and insert new images into your post, it'll appear fine in both the media upload wizard and in the editor.

cdn caching can break websites

But when you preview this post, or publish it, this is how the featured image and the inline images in your post look.

cdn caching can break websites

You'll see either broken image links, or blank areas where your image is supposed to load. The behavior seems surreal.

What's happening is the CDN is looking for new images in the location you originally configured. This was the old web host IP.

To correctly transfer everything to your new host, you need to update your CDN setup. Let's go through that now.

CDN Updates After a Host Change

Any time you change to a new web host, you should go through the following settings to make sure they're set up for the new host.

Set the Correct Whitelisted IP

CDN services have security on their systems so that only websites hosted at a specific IP (web host server) can pass files to the CDN account.

Without this security, hackers could potentially use your CDN account to store and serve their own content.

This strict security means if you don't update the list of Whitelisted IPs in your account, your CDN service won't be able to access any files on your website.

In MaxCDN, this comes under the Account menu, under the API submenu. Search for "Whitelisted IPs" in your own CDN account to find the list, or check with customer service.

cdn caching can break websites

If you don't know the right IP address to use, most hosting providers will provide the web server IP address under your hosting account details.

If your host doesn't provide an account details page, you can usually find it in under "Shared IP Address" or "Server IP Address" in CPanel.

cdn caching can break websites

Use this IP address in the Whitelist IP section of your CDN account.

Whenever I migrate to a new host, I usually leave my old web host IP whitelisted temporarily. In some areas of the world the DNS changes you made for your domain may not have replicated yet. This can take a day or two.

Leaving both IPs in your CDN account, you'll ensure everyone will be able to see your site fine throughout the transition.

Make a note of this IP, since you'll need it for one more CDN setting.

Set Up Correct Origin IP

The next important setting is the origin IP. This is basically your way of telling the CDN service where to retrieve new images that it hasn't cached yet.

Usually you'll find this setting in the management area for the "zone" you've originally set up for your site. Find the Origin IP section, and update it with the IP address for your new web host.

cdn caching can break websites

Once you've updated this setting, you should be all set. Your CDN account is now aware of your new web host. It will reach out to the correct server to obtain any new images that you upload.

Now it's time to clear all caches and test your site again.

Clear Caches and Create New Post

The best way to test if your CDN is working properly is to clear its entire cache. This forces it to not only check your web server for new content, but for all content.

Your WordPress caching plugin should have a dashboard or a button in the CDN area to purge CDN completely. If you can't find one, you can accomplish this instead from your CDN account.

For MaxCDN, this can be found on the dashboard page. Look under the configured zone for your site, and clicking on the Manage button.

cdn caching can break websites

Once you've fully purged the CDN cache, there are two ways to test the health of your CDN.

  • First, open a new browser session (make sure you've cleared the browser cache), and load your site. You should see all images and icons load properly.
  • Next, create a new post in the WordPress editor. Then, upload a new featured image and an inline image into your post.
  • Preview the image, and you should see everything displayed properly this time.
cdn caching can break websites

It's a good feeling when things finally work right, isn't it?

Understanding the Purpose of a CDN

The reason this issue happens to a lot of people is because a CDN is often just an afterthought when setting up WordPress caching.

The one downside of a CDN is that it's an additional point of failure. When things break, it's not always easy to understand why. But if you remember to update it, a CDN does provide a tremendous boost to site performance.