Create a self-hosted CDN for W3 Total Cache
I’ve been on a mission to make the internet better for a while now. It’s a big mission and one which could have many angles. One of the ways I’m trying to make the internet better is by helping speed up the web.
There’s a ton of things that you can do to improve the speed of your website but the absolute best place to make those optimizations is in the underlying code. However sometimes that’s not really an option (code can be complex and there may be millions of lines of it for you to search and find improvements in, and if you change something there is a chance you could break it).
Luckily there are other ways to get a speed boost and not all of them are as difficult as optimizing the code directly. One of the ways is to host your static content on a CDN. If you have any questions about other ways to speed up WordPress then ask me on the WordPress Q&A page.
What Is A CDN?
A CDN is a Content Delivery Network. A set of quick servers dotted all around the world that your static resources get served from. Because they are all over the world the distance from the person requesting the files can be reduced and instantly give you a speed boost, and that’s before you lay the rest of the benefits on top of that.
Static resources are things like image files, video, CSS & JS files and font files. Anything that isn’t ‘dynamic’ is ‘static’. That means a bunch of your theme files and the WP core is static and can be served from a CDN too.
Serving static resources from a premium CDN accomplishes 3 things which give together give a big win in terms of page speed.
- You content is loaded from the nearest server to the request, lowering ping time and getting it to the user faster.
- 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.
- 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.
A premium CDN offers you a pretty big speed boost but if you can’t afford a premium service hosting your own CDN is still of massive benefit for 2 reasons.
- Your static content is still served from a cookieless domain
- It’s served from a different domain to your main domain.
What A Self-Hosted CDN Is
A self-hosted CDN is one that you create for the purpose of serving up your static content without cookies. Normally it’s on the same server as the main domain and not duplicated across many servers like a premium CDN is.
Speed Results Without Optimizations
When I done a test with WebPageTest.org the results I got were an F grade for almost everything, which I expected due to me turning off all the optimizations I’ve made.
Doing multiple speed tests I received consistent scores like the ones below. Loading in between 4-5 seconds.
If you wanna see just how fast your site can 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. They have a famous 4x faster statement and most of the time it’s true.
Check My Site Now
WP Engine is just for WordPress hosting and it’s tailored for that to give you maximum speed. If I only needed WordPress hosting I would be using them but as I run things other than WordPress I need a server I have complete control over.
There’s 2 things that worry me about the results I get when I test my speed.
- “Your website is faster than 35% of all tested websites” that means more than half of the sites tested are faster than mine.
- “Load time 4.41s” over 4 seconds is bad. I’ve read studies over the years that suggest users drop off after a certain load time. It used to be after 6 seconds people started to drop off. I think that the currently accepted time is under 4 seconds and people drop off.
In my own tests I’ve actually found that as early as 2 seconds people start to drop. The main aim in to be under 4 seconds, the holy grail is under pageload in under 2.
Now I’m going to make a self-hosted CDN and run it on cdn.pattonwebz.com.
Create Self-Hosted CDN for W3 Total Cache
The first thing that I need to do is create a sub-domain and the DNS records for the CDN. I have Plesk panel installed on my server and when a sub-domain is created Plesk automatically adds an A record to the DNS zone for the new subdomain, I’m pretty sure cPanel has a similar behavior.
I initially planned to create 3 additional CNAME records and point them to the sub-domain domain. Instead I opted to create another 3 sub-domains (which get A records) and point them to the exact same directory on the server as the primary sub-domain. There are other ways to do with CNAME records, and there is probably a reason why CNAME records are suggested over A records, but this is by far the simplest way I’ve found to set this up. 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. A better course of action would be to combine and minify them all into as few files as possible but doing that with WordPress is a bit of a challenge due to the plugin/theme/core architecture it follows. W3 Total Cache does have a way of handling CSS & JS minification, which I will cover in another post, but for now I will opt for individual sub-domains to access my CDN and serve the large amount of files.
Once I’ve done that I want to create a specific FTP user just for this sub-domain because I don’t want this user to have access to anything but the CDN sub-directory on the hosting account. I pointed all 4 of the sub-domains to the same directory so the single user can access the files for them all.
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
Most of the default settings are fine, I made a few minor adjustments to mine which you can see by clicking the thumbnail on the left but default is normally fine.
The main thing I want to highlight here is the section for your hostname. Ordinarily people put in the sub-domain here and that’s fine but because I’ve created multiple sub-domains for it (as noted on the page it asks for CNAMEs but I used A records instead) I will enter all 4.
Notice that 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.
Before you turn on the CDN there is one thing left to do. You need to upload your files to your self-hosted CDN.
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.
Turn On Your Self-Hosted CDN
Once you’ve set everything up 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.
One point better on the Performance Grade due to using the CDN and shaved almost a second off the load time. That puts the page below the suggested 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 pagespeed scores, like the one above, 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 told you that I had turned off all optimizations on this site to demo the benefits of a self-hosted CDN but how about I show you what the speed is like when I enable all of the standard server-side optimizations I perform.
See the difference? Still a similar amount of page requests, still the same page size but I save almost 4 seconds of time! That’s massive and it pushes me 15% below my holy grail target of 2 seconds. 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.
Notice the performance grade isn’t much better, that’s because there’s still even more improvements I can make, like combining all the CSS files and JS files into as few files as I can and deferring the JS processing till the footer of the document.
Although I’ve yet to implement proper minification and combining of those files when I done a basic test the requests dropped to 90 and the size 1.1MB so it saves over 500k per load. Load time was 1.4 seconds.
If you can afford to use WP Engine, and don’t need to run anything other than WordPress, then I highly recommend you try them. Use their speed test and see if they could speed up your site by 4x.
If you can’t afford a premium managed hosting service then you can always make improvements on your own, like creating a self-hosted CDN with W3 Total Cache, installing opcode caching on your server or serving certain portions from a RAMFS or TMPFS.
There’s always ways to improve your pages and load speed is one of the areas that can yield the biggest wins.
Like What You Read?
Say thanks by subscribing to the FREE PattonWebz Newsletter.