Why you need a cookie-less domain

Any website needs a cookie-less domain. This (sub)domain is typically called “static”. It is used to serve Javascript, CSS, images and other static content. The reason for static content to be on a cookie-less domain is that it makes the content load faster. This argument may be counter intuitive, since cookies are small and you would not expect them to have a significant impact. But let me try to explain.

Why cookies slow you down

Cookies are uploaded with every request on a domain, although they are only read on dynamic web pages (for instance by PHP). And most visitors have asymmetric connections (like DSL) with at least a 1:10 up:down ratio. Also, uploads are often not compressed while downloads are. This is why, in terms of latency, reducing 500 bytes on upload is equivalent to reducing tens of kilobytes of download size. As Google states:

The best way to cut down on client request time is to reduce the number of bytes uploaded as request header data. So, minimize request size and serve static content from a cookieless domain. – developers.google.com

Well, if Google says so..

Limit the cookie reach

The following code will set a cookie that is named ‘cookie‘. This cookie is only valid on ‘www.somewebsite.com‘. The last argument states the domain for which the cookie is valid. You can omit ‘www’, it will then be valid for all subdomains.

setcookie('cookie', $data, 0, '/', 'www.somewebsite.com');

Create the cookie-less domain

You can easily create a cookie-less domain. First, you need to have access to the DNS editor of your domain. There you create a new “CNAME” record with the name “static” that points to your “www” domain. After doing this you can access your static files from your new domain.

Adjust the HTML to use the cookie-less domain

You do not have to move the files anywhere. All you have to do is change:

<script src="/js/jquery.min.js"></script> <!-- replace with: -->
<script src="//static.somewebsite.com/js/jquery.min.js"></script>

And no, “http” is not missing. For CSS files all you have to do is to change the “href” property of the “link” tag:

<link rel="stylesheet" href="/css/bootstrap.min.css"> <!-- replace with: -->
<link rel="stylesheet" href="//static.somewebsite.com/css/bootstrap.min.css">

Image files follow the same scheme, just change the “src” property of the “img” tag:

<img src="/img/logo.png"> <!-- replace with: -->
<img src="//static.somewebsite.com/img/logo.png">

Download links can also be adjusted:

<a href="/files/package.zip">download</a> <!-- replace with: -->
<a href="//static.somewebsite.com/files/package.zip">download</a>

Speed it up even further… with CDN

Once you have a cookieless domain, the next step is to get a CDN account. You can sign up on Leaseweb CDN and adjust the CNAME not to point to your own ‘www’ domain, but to the domain provided by the Leaseweb CDN. In the control panel you enter the origin URL ‘http://www.somewebsite.com‘. Now your content is cached and accelerated by the Leaseweb CDN.

Why Leaseweb CDN makes it even faster

We have 100Gbit uplinks in Amsterdam, Frankfurt, Washington DC, Silicon Valley and Singapore. On these locations, we have racks full of powerful servers packed with lots of RAM and high capacity high speed Solid State Drives (SSD). The CNAME you point to our CDN domain will automatically be routed to the nearest CDN cluster and the content is flowing over the route-optimized network.