I 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.
Leave a Reply