Get a Faster Site with a Self-hosted CDN for WordPress & W3 Total Cache

written by William Patton on June 26, 2013 in Page Speed Optimization with 15 comments

A self-hosted CDN for WordPress with W3 Total Cache will help make your site faster. Lowering the time it takes pages to load gets users into your content and engaged much quicker.

You probably didn’t realize but it’s actually possible with most hosting services to make your own CDN. Normally when you think of a content delivery network you imagine an entire network of servers . That’s exactly how the premium ones work.

A self-hosted CDN could be housed on many different servers too – but it’s commonly only in a single location. A more descriptive term for this kind of use would be as a statics domain.

As soon as you have a self-hosted CDN to serve your static files from you’re pagespeed scores will go up instantly because you’ll benefit from parallel connections in the browser & cookieless serving of the files.

What is a CDN & what are the Benefits?

A CDN is a Content Delivery Network. A set of quick servers dotted around the globe that your static resources get served from.

Static resources are things like image files, video, CSS & JS files and font files. That means all your uploads as well as a bunch of your theme files and the WP core is static. Those can all be served from a CDN. Once your files are on the CDN then you just need to rewrite the file location to point to the new domain.

There’s 2 main ways you can propagate files to a CDN. Origin push or origin pull.

Origin push requires that you send the files before you rewrite the file location to point to the new domain. If you don’t push all files to the CDN then the user will get a 404 when requesting the files from it.

Origin pull does not require you to add the files to the new location before rewrite. That’s because when it receives a request for a file that it doesn’t have it requests it from the origin server and pulls it over it’s self. It then saves a copy to use next time the file is requested.

Origin push techniques are usually less technical than origin pull so we’ll be adding our content via a push.

Serving static resources from a CDN accomplishes 3 things. When all done together they could potentially improve your page loading speeds dramatically.

  1. You content is loaded from the nearest server to the request, lowering ping time and getting it to the user faster.
  2. Your static content is loaded from a separate domain to your dynamic content. This increases speed by allowing you to have more connections at once. There’s a limit to how many requests you make per connection so if it’s all coming from a single domain then there is a slight delay to the time you can make the request.
  3. A CDN serves everything from a cookieless domain so there’s no overheads involved in the download, you just get the resource and nothing else.

The big benefit of using a premium service over self-hosting is that they have multiple servers all around the world that are configured to purely serve static content. They employ geographical targeting techniques on the DSN lookup, load balancing for stability and use Edge-Server technology (caching on the edge means that they’re caching it at your ISP where possible – everything has to go through your ISP to reach you, if it’s already cached on those server it means it doesn’t have to arrive from the wider internet. It’s basically right on the ‘edge’ of your connection). All of that combined means they are sure that your content gets where it needs to be… and fast.

What A Self-Hosted CDN Is

self-hosted CDN is one that you create for the purpose of serving up your static content using parallel connections. Often it’s on the same server as the main domain and not duplicated across many servers and locations like a premium CDN is.

You could set it up to be in multiple locations but that would involve multiple servers and a way to make sure that the content on each server is the same (only practical when your using origin pull techniques).

Even a self-hosted system on your existing hosting account can still benefit your site a ton. Although you loose some of the features of a premium hosting service you still get 2 huge benefits.

  1. Your static content is still served from a cookieless domain
  2. It’s served from a different hostname (domain) to your main domain and users benefit from parallel connections.

Speed Results Without Optimizations

WebPagetest Test Result - Dulles - www.pat...responsive-design- - 06-25-13 23-05-28When I done a test on my site with the results I got were an F grade for almost everything. I expected bad results due to me turning off all the optimizations.

Doing multiple speed tests I received consistent scores like ones in the screenshot below. Pages are fully loaded in between 4 and 5 seconds which isn’t actually all that bad.

Today's results are quite a bit worse than yesterday.

Page loading times in around 4-5 seconds range.

There’s 2 things that worry me about the results I get when I test my speed.

  1. “Your website is faster than 35% of all tested websites” that means more than half of the sites tested are faster than mine.
  2. “Load time 4.41s” – over 4 seconds is bad.

In testing I’ve actually found that as early as 2 seconds people can start to drop off.

If you want to see just how fast your site could be made, without you needing to make much effort, then you could take the WP Engine speed test and see if they could make your site faster. You can use the results of the test to see the areas that need improved the most and work on those.

Check My Site Now

If you can’t get your page load times to improve no matter how hard you try then the only way to go would be to opt for better hosting.

Create Self-Hosted CDN for W3 Total Cache

The performance and caching plugin W3 Total Cache makes it easy to configure WordPress to use a CDN – using a self-hosted or premium content delivery network.

Most of the work to make a CDN takes place at your hosting account and, because we’re using an origin push technique the plugin only needs an ftp user capable of accessing the files on your hosting service.

The first thing to do is create a sub-domain to hold the files. I used to have Plesk panel installed on my server and when a sub-domain is created Plesk automatically adds an A record to the DNS for the new subdomain, I’m pretty sure cPanel has a similar behavior and Webmin (currently on my server) does the same.

Go ahead and use your hosting panel to make an empty sub-domain.

You can still do all of this without access to any hosting panel if you have ssh access and are capable of setting up a virtual host, adding users and modifying DNS records.

Additional Domains

This step is optional (note that more is not always better so start with a single hostname for the CDN).

I’m going to create an additional 3 sub-domains and point the virtual hosts to the exact same directory on the server as the primary sub-domain.

I initially planned to create 3 additional CNAME records at the DNS and point them to the sub-domain domain because CNAMEs are what W3 Total Cache suggests. Instead I opted to use another 3 A records.

There is probably a reason why CNAME records are suggested over A records – but a CNAME requires an additional lookup to access and I wanted to eliminate that. You’ll see shortly why I’ve added the extra 3 sub-domains.

You need just a single sub-domain – it’s how most people do it – however I know that I have A LOT of CSS & JS files on this site and I will want them to be served from different domains so they all benefit from paralleization.

A better course of action would be to combine and minify them all into as few files as possible (this is actually what I normally do) but doing that gives me some huge files to serve.

DNS Settings - Parallels Plesk Panel 10.4.4These are the sub-domains I ended up using. All 4 of them point to the same CDN directory on the server. This way it only takes a single user to push content to them yet it’s accessible from 4 different hostnames.

Once you have domains set up and a user that has access to them you’re ready to configure it in the W3 Total Cache plugin.

W3 Total Cache Self-Hosted CDN Settings

Content Delivery Network - W3 Total Cache ‹ PattonWebz — WordPress(3)On the General Settings tab of W3 Total Cache scroll down to the box that asks about your CDN type. Set it to self-hosted/ftp and then go to the CDN page and enter hostname and ftp details.

Most of the default settings are fine, I made a few minor adjustments to mine which you can see by clicking the thumbnail (sorry, the screencapture had problems grabbing the whole screen. You are able to see all the settings – bar the additional hostnames I entered).

Ordinarily people put in a single domain and that’s fine but because I’ve created multiple sub-domains for it I will enter all 4.

W3 Total Cache will use a different hostname for different files linked in different places. CSS will use 1 hostname and the JS files will use the other 3, depending on where they are linked in the file.

Content Delivery Network - W3 Total Cache ‹ PattonWebz — WordPress(2)

Before you turn on the CDN there is one thing left to do. You need to upload your files to your self-hosted CDN. This is the origin push I spoke of earlier.

At the top of the CDN config page there are buttons which open windows that allow you to upload all your files in each file-group. Click each of the buttons and initiate the file transfer for them.

Media Library export - W3 Total CacheThis is what the upload windows look like, just click the blue button to start transfer.

Media Library export - W3 Total Cache(2)You should see the files upload in batches and go green, if any of the rows are red it means transfer failed.

Turn On Your Self-Hosted CDN

Once you’ve set everything up in the plugin and uploaded your files you’re ready to turn on the CDN.

Navigate to the General Settings page from W3 and set the CDN to Self-hosted / File Transfer Protocol Upload tick the Enabled checkbox and then click save.

At that point you’re now running your own CDN to serve your static content. Let’s check the speed of the site after activating the CDN and compare it to the score above.

Pingdom Tools Website Speed Test for PattonWebz

Slightly improved scores over the ones from the test without CDN.

One point better on the Performance Grade due to using the CDN and almost a second off the load time. That puts the page below the 4 second mark but it’s still slower than 67% of the pages the tested so I’m not happy with that. I want it faster.

Even if you get respectable scores you should still strive to make it even faster. There’s still a lot I can do with the site to speed it up even more.

If you remember at the beginning of this post I said that I had turned off all optimizations on the site to demo the benefits of a self-hosted CDN. Below is a test from before I turned them off. All of the optimizations done are server-side.

The results I get with all the optimizations turned on.

The results I get with all the optimizations turned on.

See the difference? Still a similar amount of page requests, still the same page size but the load time is 2/3 faster than before and I save about 3 seconds per page load. That’s massive!

Plus it makes my site faster than 3/4 of the sites tested. That’s more like the kind of results I want to see.

Note that the performance grade isn’t much better. That’s because there’s still even more improvements that could be done.

Although I’ve yet to implement proper minification and combining of the CSS and JS files when I done a basic test the total requests made was 90 and the size of the page was 1.1MB. 60 requests and half a megabyte less data per page load. Load time was 1.4 seconds.

Even when you get good scores there’s always ways to improve the speed of your pages a little more. Make sure to run some tests on your site and check what your scores are like.

Some of the tools you can use for testing are:

  • Google Analytics & Piwik Analytics
    • Both these analytics platforms are great for getting end user page speed timings.
  • Google Pagespeed Insights
    • This tool tests your page against some of the top performance best practice rules. Additionally it also provides some helpful advice for optimizing for mobile users.
  • Pingdom
    • A great on-demand test for checking page loading time. It gives a nice waterfall of when each request is made and how long it takes to receive it.
  • New Relic
    • This is a full app/server monitoring suite. It takes all kinds of data from your server and site and loads it into some very nice reports. It can tell you not only which pages are slow but what part of the code is making it slow.