>> Introduction
>> Part 1: Caching
>> Part 2: CDNs
>> Part 3: Asynchronous Loading
>> Part 4: Image Optimization
>> Part 5: Security
>> Round-up and acknowledgements
Did you know that the default maximum number of concurrent HTTP connections per proxy your computer can make is between 2 and 10, depending on your browser? “What the what?” you might say? In “English”, what this means is this: Let’s say you have a website, such as “www.fiveeurofood.com”. When you visit my website, all the files needed for you to see the final page on your screen are transferred between my host and your computer. To transfer these files you are making something called “HTTP connections” (the protocol for transferring websites and their contents). My website address (www.fiveeurofood.com) is the “proxy” in this case.
As I’ve mentioned in previous posts, there’s a load of files which need to be transferred in order for you to view the page. The last time I checked, one needed to make ~133 different requests to display my homepage alone. Of course, not all of the content is being served from my site – some is from external sources, like Facebook and so forth, but let’s assume most of the content comes from me. Now, if your browser only supports, say, 6 concurrent HTTP connections then this is a problem. We’re gonna start loading the page, but we’ll hit the limit of 6 connections, and then the browser can’t get any more content from that website until a connection is free again.
Imagine on top of this the fact that you might need to virtually “hop” around all over the world to reach the server which the website is stored on. You have to transfer all those files from the remote server to yourself – back and forth across continents and oceans.
Map data (c) 2013 Google, INEGI, MapLink
Not to worry though – there are ways to get around this, or at the very least, mitigate the effects.
The wonders of Content Delivery Networks
Content Delivery Networks aren’t just for big, popular sites. Even if you only have 100 visitors per day, if you’re committed to providing your visitors with the best possible browsing experience, and ultimately improving your page speed and search engine rank, you should be looking at serving your content to visitors via a globally distributed network. This might sound very grandiose and complex but it’s not! Setting it up for your site takes minutes, and the caching plugins I mentioned in my previous post have full support for many common CDNs.
Map data (c) 2013 Google, INEGI, MapLink
How do CDNs work?
In a nutshell, a Content Delivery Network is a vast network of servers spread across the world. These servers (often called “edge” servers) all contain a copy of your static content – images, scripts, videos, stylesheets… you get the idea. When a request is made to your site, the CDN will serve the visitor the static content from a server which is geographically closest to them. They’ll still need to hit the original website host for dynamic content, but everything else will be served from a location much closer to them. This means faster loading content, which in turn means happier visitors.
You can serve your content from different “proxies”, and mitigate the “maximum HTTP connections per proxy” limit I spoke about in the opening paragraph. To do this you simply have to add something called a “CNAME” (Canonical Name) record for each separate proxy you wish to set up (see below in the CloudFront guide for more details). A CNAME record simply specifies that an address is an alias of another, e.g: cdn1.fiveeurofood.com, cdn2.fiveeurofood.com, cdn3.fiveeurofood.com would all be aliases of your CDN distribution. All your static content will be accessible through each of the different CNAMEs, but your site will spread requests for content across them. Because they are different your browser will treat each one as a different proxy and be able to make the maximum number of connections to each CNAME (proxy) simultaneously.
There are a great many CDN providers out there and the performance and cost of each can vary, but I’m going to talk about two in particular today. One of them is free (yes, really, though they offer paid plans as well), the other is very reasonably priced.
The free option
CloudFlare is incredibly simple to set up and it doesn’t just offer CDN capabilities. It offers a great range of services, such as HTML, CSS and JavaScript minification (something I’ll cover in a later post), and has a whole suite of security settings which will help reduce the risk of attacks against your website. They offer free and paid plans and have a worldwide network of edge servers. To use them is easy – enter your website address, let them perform a scan, and then choose what level of performance you want. Once you’ve done this, they’ll give you two name-servers. Update the name-servers with your registrar (such as GoDaddy, NameCheap etc.) for your domain to point to CloudFlare and you’re done.
Points to note:
- CloudFlare doesn’t (at least not on their free plans) allow the use of different CNAMEs. From the point of view of your browser, it will seem like all content is being served from your site, which means your visitors will still be tied by the “maximum concurrent connections per proxy” limit – though of course, your content will be served much more quickly.
- Depending on how your site/theme is coded, you may experience issues with some of CloudFlare’s features. They have a service called RocketLoader which attempts to “asynchronously load all scripts” (I’ll cover what this is later). Some themes are dependent on certain scripts being loaded at precise times, and as a result it may cause problems with your site’s functionality (menus not working for example). This is no problem though – all CloudFlare features can be customised and enabled or disabled independently of each other.
The paid option
Amazon offer a whole range of great services through Amazon Web Services. Their CDN is called CloudFront and in my opinion represents some of the best value for money. While some CDNs charge you a fixed price per month, with Amazon you pay only for what you use. This makes it an ideal solution for smaller, lower traffic sites who still want the benefits of globally served content.
As a price example (correct at the time of posting) serving a total of 10 Gigabytes of data to visitors based in (or near to) the US and Europe, spread over a total of 40,000 HTTP requests would cost US$1.23, with costs being slightly higher for data served to visitors in South America, Asia, and Oceania
Setting it up is easy, and I’ve provided a brief guide below. I’ve used the plugin W3 Total Cache in my tutorial, as I mentioned in my previous post, though setting it up with another caching plugin, such as WP Super Cache is also easy.
* CloudFlare and Amazon Web Services Logos reproduced with permission
[tabs slidertype=”left tabs”]
[tabcontainer]
[tabtext]
Creating your distribution
[/tabtext]
[tabtext]
Configuring your distribution
[/tabtext]
[tabtext]
Configuring your domain
[/tabtext]
[tabtext]
Configuring your site to use the CDN
[/tabtext]
[/tabcontainer]
[tabcontent]
[tab]
Sign up to Amazon Web Services and then access your “AWS Management Console“. Click on “CloudFront” under “Storage and Content Delivery”. Once the CloudFront application loads, click on “Create Distribution” to get started.
[/tab]
[tab]
[/tab]
[tab]
[/tab]
[tab]
[/tab]
[/tabcontent]
[/tabs]
Featured image courtesy of David Castillo Dominici / FreeDigitalPhotos.net
>> Introduction
>> Part 1: Caching
>> Part 2: CDNs
>> Part 3: Asynchronous Loading
>> Part 4: Image Optimization
>> Part 5: Security
>> Round-up and acknowledgements
A_Boleyn says
… ummm
(confused. walks away mumbling to self)
😀
Charles says
LOL 😀
Sissi says
It sounds very complicated at first, but you are a very good teacher, Charles. Of course, thanks to you I know Cloudflare very well 😉 Thank you so much for another fascinating post!
Charles says
Hi Sissi, I hope it wasn’t *too* complicated. I really tried to explain things as simply as I could. I guess I could have completely skipped the part about the max HTTP connections per proxy, but I think it is an important thing to know and understand when configuring content delivery!
Karen (Back Road Journal) says
I know that many readers will know exactly what you are talking about and will appreciate it immensely. I wish I was one of those readers but unfortunately I don’t understand anything but the “and’s and the’s”. Thank goodness for WP.com. Wish I was a computer wiz like you. 🙂
Charles says
Hi Karen – it’s kind of you to stop by, even if this post isn’t so interesting to you! I figure that if someone is trying to do something like this, hopefully my post can be helpful to them. If not, then no harm done, right?!
Karen (Back Road Journal) says
Charles, it is very interesting. I just wish I was tech savvy enough to understand it. If that was the case, I would enjoy having a self hosted blog like yours. I think what you are doing with these posts is terrific and will help many bloggers. 🙂
Charles says
Hi Karen, it’s important to remember that having a self-hosted sited isn’t complicated at all! My posts are purely aimed at people who really want to dig deep and “optimize” everything. It’s certainly not a requirement! 🙂
shuhan says
Argh maybe it’s too late at night. I’m completely boggled. You are a good teacher though; I’m just shit at all this web stuff. Does this only apply to a website that you write/code yourself?
Charles says
Hi Shuhan, I’m aiming this mainly at people using self-hosted WordPress sites. People using Blogger or WordPress.com may not find my advice so relevant but hopefully there’ll be some good tips every now and again! 🙂
Hotly Spiced says
Thanks for taking the time to break this headache into words I can understand however I’m just hoping my web hoster has all this sorted. I think I pay her enough for her to deal with it. xx
Charles says
Thanks Charlie 🙂
Maureen | Orgasmic Chef says
I’m really glad I have an able assistant to do all this for me. Thanks for a great insight into CDN.
Charles says
Thanks Maureen 🙂 – I hope it wasn’t too complicated!
Marta @ What Should I eat for breakfast today says
You make me think if I should swith on word press, so complicated. And I thought that blogging is only fun, hahaha.
Charles says
Hi Marta, it’s very important to bear in mind that this isn’t “necessary” at all. Self-hosted WordPress installations can be pretty much as easy as using Blogger, Tumblr etc. My guides are mainly aimed at people wanting to really optimize their installations, so you don’t need to freak out too much 🙂
Marta says
Too late, I am a curious beast and want to know as much as possible. Plus you know how to explain things so you make it easier.
Charles says
Well, I try! I hope it’s clear enough 🙂
Kristy says
Whew. I’m still so impressed that you took the time to write all this down in a way that is understandable. This could not have been an easy undertaking!
Charles says
Thanks Kristy – I hope it was a little interesting at least 🙂
Eva Taylor says
One of these days, when my blog grows up and becomes self hosted I will definitely call on you for help. These posts are incredible but I do wish I was able to understand them! I also wish I had enough confidence and savvy to do it myself, sadly not the case; I just have way too much content to risk.
Charles says
Hi Eva – I hope it’s not too complicated. I have tried very hard to explain it as clearly as I can. I don’t believe in oversimplification as I believe that the many “guides” you can find online can often omit to mention many things. I also think it’s important to know the “why” and not just the “how”. If you ever needed, I’d be happy to help you try and understand it!
Coffee and Crumpets says
Lots of useful information Charles! Thanks for taking the time to write it up and explain it to us. I know I have something installed but am going to have to go back in and check!
Nazneen
Charles says
Thanks Nazneen – I hope you find it useful for something at least 🙂
Raymund says
Another nice lesson my friend!
Charles says
Thanks Raymund!
mjskit says
Very interesting Charles! I wasn’t aware of this at all, so it’s definitely something to start thinking about. Thanks for taking the time to write this up and sharing it with us!
Charles says
Thank you MJ – I hope you find it useful… do let me know if you need any clarification on any points, I’d be happy to help!
Nami | Just One Cookbook says
I remember you mentioned CloudFlare. I need to discuss a lot of things with my husband. It takes a lot of time to write this kind of posts, and I have to pin these posts to my blogging pinboard. 🙂