After our redesign, WPBv4, we spent some time doing performance optimization (still some work left to do). After doing some optimization, we saw a major performance improvement on the site. It was noticeable enough that our users emailed us asking about it. We’ve heard your requests, and a complete guide on what we did to speed up our site will be up very soon. Even though we had covered how to install MaxCDN in our tutorial about W3 Total Cache, we have made some additional changes since then. In this article, we will show you how to install and setup MaxCDN in WordPress.
Here is the email we got from one of our users:
“…the main reason I am contacting you is to ask about site speed. How on earth you manage to speed up your site so fast? The speed is insane and I just loved it.”
We did numerous tests using a site called Pingdom. The fastest load time of our homepage was just 483ms. We ran the test numerous times (different hours and datacenters). Our load time range on the homepage was 483ms – 1.7s. Below is one of the screenshots:
A lot went into the performance optimization (reducing HTTP queries such as loading scripts only when they are needed, combining scripts and stylesheets, optimizing images etc). But one of the main components that makes our website load fast and keeps us from crashing is a great WordPress CDN. We are using MaxCDN, and you can our MaxCDN review in our Blueprint section where we explain why we use MaxCDN. If you don’t know what is a CDN or why you need a CDN, then you should check out or infographic “What the Heck is a CDN“.
Now having that said, in order to follow this tutorial, you MUST have a MaxCDN account. It’s very affordable and well worth the money. If you don’t have an account, you can sign up now. You can get 25% off using our MaxCDN coupon “wpbeginner”
If you don’t like the video or need more instructions, then continue reading.
Once you have created your account with MaxCDN, you need to install this free WordPress plugin called W3 Total Cache.
First thing you need to do is login to your MaxCDN account and create a “Pull Zone”. To do this, click on the Manage Zones button and then click on “Create Pull Zone” icon.
On the next page, you will be asked to enter the details for your new Pull zone.
- Pull Zone Name: This can be anything without spaces, minimum 3 characters long. Think of this as your username.
- Origin Server URL: Enter the URL of your wordpress blog. Must have “http://” and the trailing slash(/).
- Custom CDN Domain: Use any subdomain for example: cdn.wpbeginner.com
- Label: This is like a description field. It is optional to add a description.
- Compression: We recommend that you enable this as it will save the usage of bandwidth on your account.
Once you click create, you will see a success screen. In that green box, you will have a URL for your CDN. It will look something like “wpb.wpbeginner.netdna-cdn.com”. Let’s copy this URL and save it in your notepad. We will need to use it in later steps. If you go to your dashboard, you will now see the zone that you have created. Click on the “manage” icon.
Next, you need to click on the “Settings” tab and look at the custom domains.
The goal here is to add multiple subdomains (CNAMEs), so we can improve pipelining performance in the browser. To do this click on the edit button on Custom Domains, and simply add multiple custom domains.
Once you have added the custom subdomains, then simply click update. In the Compression settings, make sure you enable GZip compression.
Now that you have configured your pull zone, take the long CDN url that you got in previous steps which looked like this “wpb.wpbeginner.netdna-cdn.com”. We are going to need this to set CNAME records. We will show you how to create the CNAME record using cPanel. Most WordPress hosting providers are using cPanel. Login to your cPanel, then scroll down to the Domains Section and click on Simple DNS Zone Editor.
On this page, you will need to fill out the fields to Add an CNAME Record. The two values you will be required to fill are: Name and CNAME.
- Name: This is the name of your Custom CDN Domain. For example, our custom CDN domain is cdn.wpbeginner.com, so we will put “cdn” in our name field.
- CNAME: This will be URL provided to you by MaxCDN when you created the pull zone. For example: “wpb.wpbeginner.netdna-cdn.com”.
Repeat this process for all the custom domains you will add. The CNAME value will be the same. All you are changing is the name to like “cdn”, “cdn2” etc. Adding the CNAME method may be different if you have a non cPanel host.
Now that you have configured MaxCDN, lets go ahead and integrate it with WordPress. We will need to use the W3 Total Cache plugin. Install and activate the plugin. On the General screen, if you scroll down, you will see the CDN box. Enable CDN and select NetDNA/MaxCDN option.
Save the settings. Now, you will need to go to CDN menu in W3 Total Cache to configure MaxCDN with WordPress. This page will ask you to enter your API ID, API Key, and your custom domain names.
You can get your API ID and Key from your MaxCDN Dashboard. If you go Manage Account » API. Click on add key, and create your key.
Once you configure the W3 Total Cache part, you are good to go. You can click on the Test NetDNA button, and you should be able to get Test passed.