Using MaxCDN with WP Engine

MaxCDNI love WP Engine’s service — Seriously. And while I’ve always had great performance and support at WP Engine, I knew that I could improve the performance of my website a bit by using a CDN.

The thing is that I didn’t want to pay the extra $19.95 for WP Engine’s CDN because I already had access to a MaxCDN account.

While setting up MaxCDN with other hosts is fairly straightforward, thanks to the W3TC plugin, this is not the case with WP Engine since W3TC is on the disallowed plugins list.

But, looking into different options, I realized that I could manually set up CDN integration between my WP Engine site and MaxCDN using a pull zone and a bit of RegEx.

What is a Pull Zone?

A pull zone is a method which MaxCDN uses to pull static assets from a site and store them on MaxCDN servers.

With a pull CDN, the site owner leaves the content on their server and and rewrites their URLs to point to the CDN. When asked for a specific file, the CDN will first go to the the original server, pull the file and serve it. The CDN will then cache that file until it expires[ref]Sourced from Who is Hosting This?[/ref].

For example, anytime someone goes to http://cdn.domain.com/some-image.jpg , this tells MaxCDN to pull the image from http://domain.com/some-image.jpg   , cache it, and then serve the cached version from now on.

This is much simpler than an origin push zone because the CDN is doing all of the hard work.

Set Up MaxCDN Pull Zone

Setting up a pull zone is a fairly simple process, and as such, I’ll simply forward you to MaxCDN’s documentation.

Also, here is a video that will walk you through how to create a pull zone and then create the CNAME to use in your source code.

https://www.youtube.com/watch?v=YJ3pus4Lpy0

Connect WP Engine to MaxCDN with RegEx

The only thing missing at this point is changing our URLs to point to the CDN. This part can be a bit confusing because it requires using RegEx, but don’t fret too much — I’ve done most of the work!

To do this, navigate to the WP Engine tab of your WordPress admin http://yoursite.com/wp-admin/admin.php?page=wpengine-common , then add this snippet below into the HTML Post-Processing box in the Advanced Configuration.

[code lang=”text”]
#http://yoursite.com/(S*.(?:jpe?g|png|gif|ttf|otf|svg|woff|js|css))# => http://cdn.yoursite.com/$1
[/code]

This snippet will set up your site to serve all images, fonts, JavaScript, and CSS from your CDN.

Before hitting save, be sure to change yoursite.com  to your actual site URL. Also, this snippet assumes that you’re using a subdomain of cdn . If you are not, you will need to update this on the right hand side of the snippet.

Questions or Comments

If I didn’t explain something well enough, if I missed something, or if you just want to say “Thanks”,  please leave a comment below.

3 responses to “Using MaxCDN with WP Engine”

  1. Thanks for sharing this… just what I was looking for as I’m moving a few sites to WPEngine.

    I implemented your code above, but I don’t notice anything different in the view source HTML. Do you know if there’s a way to test that it’s working? Should the CDN url you specify above actually be visible when you view the source?

    Thanks again,
    -joe

    1. Hey Joe,

      Yes, you should be able to see the new CDN URL in the source of your website. If you look at the source for my website, you’ll see the CDN URLs.

      Did you try clearing the WP Engine cache?

      If not, go to the WP Engine tab in your WordPress admin, then click ‘purge all caches’.

      1. gotcha… figured it out… thanks!
        -joe

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.