How To Install A CDN On Your WordPress Website

Has your website seemed sluggish lately? Do images or fonts take a long time to load? You may need to optimize your website using a CDN. More and more websites are becoming faster than ever before with the use of such simple but valuable tool. Some websites will automatically have an option for a CDN through their web host. For example, most dedicated hosting or enterprise-level hosting solutions come standard with one. That said, not every company provides one.

WordPress users are perfect candidates for CDNs as there is usually a blog type of environment in place. Usually, where there is a blog there are images, fonts, CSS Stylesheets and Javascripts being embedded in order to maintain its function and form. A CDN allows for the serving of this content at remarkable speeds.

While some websites automatically offer a CDN through their web host – such as most dedicated or enterprise-level hosting solutions – not every company provides this option. Therefore, we’ll will walk you through how to install a CDN on your WordPress Website. We’ll also introduce new tips to keep in mind as well as the multiple options you can take to improve the very heart of your website.

What is a CDN?

A CDN is an incredibly simple way to supercharge your WordPress website. CDN stands for Content Delivery Network. A content delivery network is a dedicated server setup which allows for faster, more efficient delivery of your media. It goes without saying why a CDN is a great solution to optimize your website at a global level.

When you use a CDN, your content is cached and stored on servers across the world rather than a single location like typical web host. The content I’m referring to is mainly images, stylesheets, scripts, flash, etc.. files that get linked or embedded into your website.

Where a user resides has an impact on the load time of your website. By using a CDN and deploying these cached files across servers worldwide, you have taken the best approach in delivering your content to your users in the most efficient way that’s currently available.

Why You Need a CDN For Your WordPress Website?

I’ve already described what a CDN can do and why it’s useful but I would like to also list things that you gain when using one.

• Speed – Once your CDN is in place you’ll notice increased speed site wide.
• Less Crashes – If you site happens to be a large on with a lot of visitors there is less of a chance of your server being overloaded and crashing. The caching a CDN provides saves a lot of headaches.
• Happy Audience – a faster site usually indicates an easier website to navigate through for your users. If you find they are staying on pages for longer periods you can thank your CDN for the added help.
• Improved SEO – Websites with faster response times tend to end up higher on Google search results.

What Are My Options?

There are a lot of CDN providers out there and many them will work great with WordPress. I suggest finding a CDN provider that supports Push & Pull Zones.

A Pull Zone is when your CDN mirrors your server, copying all of the static content and serving it’s copy. It pulls from your server.

A Push Zone is when you upload your files directly to your CDN provider. So you essentially push them from the CDN which now serves the files.

The cheapest option is a Pull Zone. It’s a simple setup that takes minutes to create depending on your site. Implementing it within your site may take a bit longer.

Getting Started

To setup our own CDN I will be using Amazon Web Services, a popular service oddly enough provided by Amazon! There are many providers you can choose from. Some bigger names are MaxCDN or Cloudflare. Feel free to use whatever service you like. Amazon offers a free plan for a year for it’s users up to a certain limit. You can adjust your plan accordingly.

For the purposes of this tutorial we will use a free plan and set it up like any other pro rated plan. The obvious difference between pro rated plans are pricing, services, and features.

We start our journey at the Amazon AWS homepage – aws.amazon.com

You should be greeted with the vibrant design below:

Home of AWS services. http://aws.amazon.com

If you’re new to AWS then you’ll need to register for a new account. Amazon requires a credit card for future purchases you may make while using their services. Don’t worry your card won’t be charged for at least a year their free tiered plan.

Amazon Billing

AWS also offers support plans. Below I’ve chosen the free package. Use whichever option applies to your specific use case.

Free support plan

Configuration

With your account set up and confirmed you can now visit the AWS Management Console by clicking the “My Account/Console” drop down in the header area on aws.amazon.com OR there should be a button that says “Launch Management Console” clearly visible like on my screen. Whichever method, Look for AWS Management Console and click it.

AWS Dashboard. Here you can access all of the services available from Amazon.

At this stage you will be taken to a services dashboard which should look similar to below:

AWS services dashboard

By the look of this page you can easily tell that Amazon offers a wide range of services and features to web platforms that may require them. I won’t explain what each of these are but it’s worth mentioning that these services can really take your websites or apps to the next level.

For our focus, we will be selecting from the Storage and Delivery block of services. Click on CloudFront to be taken to the configuration panel.

The page will display like below if you have no distributions currently set up:

Cloudfront Distributions Panel

Click on Create Distribution.

Next, you should see the page below. Our focus is for the web so naturally this is the option you will want to select. Click Continue.

Create a Web Distribution for your WordPress Website

Within the next page you will actually create the new distribution. Here I define settings for me personal site which I currently don’t use a CDN on. My site’s blog is built with WordPress but the rest is static content. A CDN can help no matter the case.

Use your own URL and id for this step. There’s a rather long list of options you can choose from. To make things easy I’ll use the default options provided by Amazon.

Distribution Settings. We will use the supplied defaults

Once you click Create Distribution AWS will send you back to the distributions panel and show some information about the distribution we just created.

Our new distribution.

The first thing you’ll likely notice is the Status column of In Progress. At this stage AWS is essentially indexing the URL we provided and finding the static assets within your website. Once it finds them it mirrors (copies) them.

A great way to check to see if things are working from this view is to copy the new link under the Domain Name column and paste it into your browser address field. Visit that link and you should see your site live after the Status is marked “Deployed”. My site can be targeted by my regular URL http://justalever.com and now a link similar to http://1x1x1x1x.yourcdn.com/. This process can take some time so be patient and let it finish before proceeding.

With the CDN deployed you can now access your content in two ways.

The original way:
http://mywebsite.com/wp-content/uploads/post-image.png

The new way:
http://1x1x1x1x.yourcdn.com/wp-content/uploads/post-image.png

Here is my distribution at Deployed status:

Our Distribution has been successfully deployed.

As you can see the content was pulled from our server and mirrored like I described earlier when defining what a Pull Zone was. Cool stuff!

Things to keep in mind: If your blog is hosted as a subdomain of your website like mine is you’ll need to include a CNAME in your distribution settings. All this does is communicates to your CDN what to mirror. For example, If your blog is at http://mywebsite.com/blog you will need to declare this as a CNAME by adding blog.mywebsite.com to your options. Read your CDN’s support documents for more information.

Integrating the CDN With WordPress

We need WordPress to use it’s built in permalink structure to take advantage of our newly deployed CDN so we can serve our static content from our CDN rather than our web host. Doing this requires us to add/modify some filters and functions inside our functions.php file inside our active theme.

Step 1: wp-uploads folder

When posting in WordPress your static content(images, videos, audio) gets uploaded to a wp-uploads folder on your web server. WordPress uses this folder to display any feature image or inline images or media you include in your blog posts.

Let’s target that folder and change where WordPress uploads the media to within our functions.php file. Add the function below to your functions.php file, make sure you add it before the closing PHP tag.

function cdn_url() {
  return 'http://1x1x.yourcdn.com/wp-content/uploads';
}
add_filter( 'pre_option_upload_url_path', 'cdn_url' );

With that function in place and live on your web host find an image you’ve uploaded on your WordPress site and inspect it. I’m using chrome so I just right clicked on the image to inspect it. Look for the image being linked within the HTML code and notice the new URL being displayed similar to what you see below.

<img width="835" height="475" src="http://1x1x1x1x.yourcdn.com/blog/wp-content/uploads/2014/06/imagename.jpg" class="attachment-post-thumbnail wp-post-image" alt="image alt tag">

You should see that the image is now coming from our CDN distribution. You will probably also notice how much quicker the page loads as well. Nice!

Step 2: Scripts and Stylesheets

With our wp-uploads folder now utilizing our CDN we need to get the remaining static content linked up as well. More times than not your stylesheets and JavaScript files will be enqueued within your functions.php file so with that file still open look for functions utilizing the wp_enqueue_scripts' andwp_enqueue_styles` functions.

These functions vary on how they are added to your specific theme so you may need to do a search to find them quicker.

Both my stylesheet and JavaScript files are linked using the template directory URI available within WordPress which looks similar to the code below:

function my_blog_scripts() {
  wp_enqueue_style( 'blog-style', get_template_directory_uri() . '/css/style.css', true );</p>

  wp_enqueue_script( 'blog-scripts', get_template_directory_uri() . '/js/main.js', true );
}
add_action( 'wp_enqueue_scripts', 'my_blog_scripts' );

For now we will comment this code out in the event that we want to use our local version of the files again.

Let’s add a couple of new functions and actions to our functions.php which will rewrite our links to the assets on the website. Doing this will allow the links to the stylesheet and JavaScript files to be dynamically injected into each page of the WordPress website.

//This code loads the stylesheet from the CDN

function enqueue_my_styles() {
    wp_register_style('my-styles','http://1x1x1x1x.yourcdn.com/blog/wp-content/themes/yourtheme/style.css');
    wp_enqueue_style('my-styles');
}
add_action('wp_enqueue_scripts', 'enqueue_my_styles');

 //This code loads our JavaScript file from the CDN 

function enqueue_my_scripts() {
    wp_register_script('my-scripts', 'http://1x1x1x1x.yourcdn.com/blog/wp-content/themes/yourtheme/scripts.js');
    wp_enqueue_script('my-scripts');
}
add_action('wp_enqueue_scripts','enqueue_my_scripts');

In the event that you have more than one stylesheet or JavaScript file you can add them to your functions above in the same manner. I suggest trying to keep everything small and inside single files so you aren’t making to many requests from your site. A common trend these days is to minify your assets which saves space and promotes speed. The whole point of a CDN is to speed things up so we don’t want to shoot ourselves in the foot by adding tons of files. I can go on and on but i’ll speak more of this subject in another blog post.

Step 3: Success

The previous two steps combined have given us a fully functional WordPress site with assets delivered via CDN. Pat yourself on the back if you made it this far! It wasn’t so bad right? If you inspect all your images, your stylesheet, and your JavaScript file you should notice the new URL being generated and delivered from your CDN.

From here you should be able to make updates where you see fit to your theme or site. The CDN service should monitor any changes and re-deploy fairly often to keep your site up to date. There may be steps you can take to adjust the rate of deployment and you make have to make manual refreshes when updating some content. It’s all dependent on your CDN provider.

As always, there can be trouble along the way to setting up your CDN. If you choose to use a different CDN provider and the steps are quite the same as seen in this tutorial, I suggest doing some google searches or the CDN provider will likely have a support section on their website.

Can’t a Plugin Do All Of This For Me?

There are some great plugins available for CDN services. Some CDN providers even maintain their own plugins. Do a search on the WordPress Plugin Directory to find one that can work for you.

Some notable options include:

• WP Performance Pack
• W3 Total Cache
• Amazon S3 and Cloudfront

Conclusion

I hope this tutorial was useful and easy to follow. A CDN is a great way to speed up a sluggish Website. Using WordPress combined with a CDN is a very smart approach to delivering the best content fast to all of your users.

Article thumbnail image by Max Griboedov / shutterstock.com