Spread the load with Parallelization

How To Use Parallelization (website sharding) To Speed Up Your Webpages

By Lee Kane


infographic on how to shard your website

Website sharding or parallelization means to download resources from a different domain or a sub-domain, so as to increase the amount of resources to which can be download by a visitors browser.

When a visitors browser downloads your web page it sends HTTP requests for the files on the page i.e images, css, js and so on. The minimum request or connections for browsers to make at any one time is 2 requests, but most modern browsers can request up to 6 resources at a time.

If however some of those resources are hosted on another domain, parallelization of those resources can trick the browser into opening more connections and speeding up the download of the web page.

By using parallelization and image compression i was able to increase the speed of my web pages, the table below displays the page load times before and after parallelization and image compression -

(Pingdom test results)

URL Server 1st Test 2nd Test 3rd Test Actions
how-to-build-an-ikea-karlstad-sofabed Dallas 8.71s 4.86s 2.85s sharding + image compression
New York 9.72s 5.32s 3.7s
Amsterdam 1.9s 1.5s 1.42s
london-commercial-product-photographer-photography-london Dallas 2.03s 2s 1.54s sharding + image compression
New York 1.9s 1.8s 1.06s
Amsterdam 686ms 580ms 575ms
become-a-minicab-driver-in-london Dallas 2.2s 1.6s 1.6s sharding + image compression
New York 2.4s 1.8s 1.8s
Amsterdam 2.2s 2.12s 1.86s
0713-living-statues-covent-garden Dallas 3.02s 2.2s sharding + image compression
New York 3.76s 1.87s
Amsterdam 1.38s 1.18s

As you can see i was able to increase the speed of my troublesome Ikea sofa bed page by nearly 6 seconds from the server in Dallas.

Which method of parallelization should you use.

There are two ways of sharding your website (not to be confused with a CDN ) -

  • serve your resources from a different domain
  • serve your resources from a subdomain of your existing domain

Both methods will return the same results, but it is simpler to set up a separate domain. Also for parallelization to be effective the resources must be sent from a cookieless domain.

What is a cookieless domain?

Your main website will most probably use analytics and social sharing buttons which all set cookies for tracking purposes. www.optimizesmart.com have a good explanation on how cookies work for Google anlytics.

Every time someone visits your web page a cookie is set, after which every time a resource is requested the cookie is included, even though it is not needed, adding more weight to the request in the form of bytes.

Sharding from a cookieless domain removes this problem leaving just the resources to download.

Firstly you will have to acquire another domain -

www.yoursite.co.uk = main site
www.static-yoursite.co.uk = cookiless domain

You don't have to name it static, you could name it anything you like, for my website i use -

www.lakanephotography.co.uk = my main domain
la-image.com = my cookiesless domain
static.la-image.com = my second cookiless domain
(which is just a subdomian of the main cookieless domain)

Your new domain will be cookieless and there is no need to place an index page in the root folder. You can just upload your resources and link to them in your HTML. Just to make sure there are no cookies you can always check using Firebug (Firefox extension).

You then need to decide which resources you want to shard. (It's a good idea to use a spreadsheet to keep track of what has been sharded and from which domain.)

Then all you have to do is change all the paths of the resources you want to shard to their absolute paths, as in the examples below -

<img src="img/cactus-toes-in-spain.jpg" alt="" />

which should be changed to -

<img src="http://www.static-yoursite.co.uk/img/cactus-toes-in-spain.jpg" alt="" />

(dont forget to add your SEO!)

<link href="css/style.css" rel="stylesheet" type="text/css" />

will now be -

<link href="http://www.static-yoursite.co.uk/css/style.css" rel="stylesheet" type="text/css" />

and so on.

For www.lakanephotography.co.uk i shard from two domains which is the recommended amount and really more then enough for a small website like mine (actually some might say its a bit of an overkill, but hey…). I serve images from one domain and my css from another. Ctrl + u on this page and take a look.

As mentioned earlier you can serve your content from a subdomain(s), but it will involve setting your cookies so that they are only served from your main domain, and not from its subdomain(s), this involves altering the DNS records in your control panel (cpanel), adding a CNAME and possibly, depending on which analytics and social network buttons you use, altering a few lines of script. This method does have its benefits as you will not have to move your resources (ie images, css) to a different server (domain), however, you will still have to make the changes to your HTML.

There is some bad press regarding sharding and mobile websites, (Why Domain Sharding is Bad News for Mobile Performance and Users) but if your only sharding from a couple of domains then there really is nothing to worry about.

After everything has been done, the sharded resources are very easy to implement and keep track of. The speed benefits to your website as shown in the table above, plus the increased score on the website speed test sites makes it all worth while!

You Might Also Like

Let me know what you think!