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.
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.
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
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”]
Creating your distribution
Configuring your distribution
Configuring your domain
Configuring your site to use the CDN
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.