WP Engine is one of my favorite web hosts for WordPress and I host a number of sites with them.
This week I wanted to set up a CDN for one of my sites that was gaining considerable traction on a worldwide basis.
What is a CDN?
A CDN is very helpful if your traffic comes from several continents as the users will get served images and scripts that are close to them. Hence a user from Australia will get served your site’s assets from a server in Australia rather than having them travel all the way from the United States, assuming your site is hosted in the US with WP Engine.
You might think that the web is very fast and these things are irrelevant, but they really are relevant. Just run a speed test using tools like GTMetrix or Pingdom and choose a few different locations to test from. You will see that the load speed will differ considerably for the locations that are farther away from your server. Hence the need for a CDN.
Setting Up the CDN
Anyway, back to the task at hand. I struggled a bit to get the CDN working, but in the end, I managed and it really is quite straightforward.
I used MaxCDN, which is my favorite CDN for WordPress sites. Once you sign up and have an account at MaxCDN, you will need to create a Pull Zone.
A Pull Zone is what is needed to utilize the HTTP Caching type of CDN. The name Pull Zone came from the technique used, as we “Pull” the static assets from your website to cache it and serve it from our CDN Network.
Pull Zones are simple to set up and use. It takes 1 minute or less to create a Pull Zone, and depending on your website, the steps necessary to implement the CDN on your website, will vary.
Pull Zones are ideal to serve small-size static assets for websites. That includes stylesheets (.css), images, JavaScript files, text files, and small PDFs.
Once you create your Pull Zone, you will see a CDN URL, which you will need to take note of as you’ll need it on the next step when configuring your site.
The Configuration
The next step takes place on the WP Engine side; you need to add HTML Post-Processing.
HTML Post-Processing is part of WP Engine’s mu-plugin, which means it is enabled by default on all installs on the platform. You can access it by heading to the WP Engine section of your WP-Admin panel on your install. Once on that page, you want to scroll to the bottom and find the HTML Post-Processing section, as shown below:
The tool is able to find and replace values based on either literal strings or PHP Regular Expressions (RegEx) or a combination of both. You can enter one find-replace rule per line, using the following general format:
#match# => replaceThe rules needed to set up the CDN are the following:
#https?://(www\.)?(INSTALL.wpengine.com|DOMAIN.COM|ZONEID.wpengine.netdna-(cdn|ssl).com)/wp-(content|includes)# => Taking SSL Into Consideration
If, like me, you are using SSL on your site, note that you can install a certificate on MaxCDN or use their shared SSL. I went for the latter. All you need to do is enable SSL within the Pull Zone settings on MaxCDN and you’re good to go.
If you want to use a custom CDN URL you cannot use that while also using MaxCDN’s shared SSL, you will need to purchase a separate SSL certificate and install it, so in my opinion it’s not worth doing. Keep in mind that Let’s Encrypt, which is the most popular free SSL service, requires you to renew your certificates every 90 days, which makes it impractical to use for a CDN URL.
I can also confirm that the above works with the Autoptimize plugin, which has quickly become one of my favorite plugins for optimizing sites. All you need to do is insert the CDN URL within the settings of the Autoptimize plugin and you’re good to go.
Sign up for a CDN at MaxCDN | Sign up for an account at WP Engine
Hope these notes help you set up a CDN on your site. Let me know if you achieved great results as I did!
