One of the many techniques for optimizing a website for speed is to serve static content such as CSS, Javascript and image files from a cookieless domain. In this tutorial i’m going to cover what a cookieless domain is and how you can set one up so you can do it yourself and improve the performance or your own website(s).

What is a cookieless domain?

A cookieless domain is not a very complex concept. It’s simply a domain which does not set cookies. Since static files such as CSS, Javascript and images files have no user interaction they have no need for cookies to be set on them. This just increases the request size for the file and therefor slows down the loading of the webpage.

How to set up a cookieless domain

In order to set up a cookiesless domain a couple of steps need to be taken.

1. Register a new domain name. This can be a root domain or subdomain. I prefer to register the subdomain ‘static’ for the website in question. So for example: http://static.wesleysmits.com is my cookieless domain.
2. Configure your DNS database with a CNAME record to your root domain. On this website that would be: https://www.wesleysmits.com.
3. Configure your web server to serve static content without cookies. This can be done through an .htaccess file.

1. Register a new domain name

In order to set up a cookieless domain you need a different domain name. This can be either a subdomain (static.wesleysmits.com) or a root domain(wsmits.com). In most cases no problems will occur when using a subdomain. Since this is free most of the time this is a better alternative for most people.

If you use your root domain instead of the www-version (example.com instead of www.example.com) then using a sub-domain as a cookieless domain won’t work. In this case you would need to use another root domain as a cookieless domain. Google for example uses http://gstatic.com as a cookieless domain.

Note: If you are using Google Adsense on your website this issue will also occur because Google Adsense sets cookies on the root domain and all sub-domains. This behaviour can not be overridden.

2. Configure your DNS settings

You should set an A record from your cookieless domain to your website domain. This goes for both alternatives (Subdomain and Root domain). The recommendation on most tutorials i’ve found is to use a CNAME record. While this does the job it’s less effective because the DNS resolution of a CNAME takes another route of indirection by finding the domain that it’s being pointed to and then resolving that.

3. Configuring the web server to serve static content

Configuring your web server to serve static content without cookies is done with a fairly simple piece of code that should be placed in the .htaccess file in the root of your domain.

Code snippet credit should go to Kevin worthington?

# Use Mod_deflate to compress static files
<ifmodule mod_deflate.c=""> 
<filesmatch ".(js|css|ico|txt|htm|html|php)$"=""> 
SetOutputFilter DEFLATE 
</filesmatch> 
</ifmodule>
 
# Speed up caching
FileETag MTime Size
 
# Expires
ExpiresActive On 
ExpiresDefault "access plus 366 days"
 
# Future Expires Headers
<filesmatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$"=""> 
Header set Expires "Sat, 27 Dec 2014 23:59:59 GMT" 
</filesmatch> 

Once you’ve set up your cookieless domain just upload all of your static content there. This includes CSS, Javascript, Ico, text and image files. 
Once you’ve done that just configure your actual domain to point all the links to retrieve the files to the static domain.

For example: Usually i might retrieve my CSS file like this:

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

Now it would look like this.

<link rel="stylesheet" type="text/css" href="http://static.wesleysmits.com/css/main.css"> 

Recommendations

• It’s not worth the trouble to set up a cookieless domain if you barely have any static content on your site. Google’s recommendation is to set it up only if you have 5 static resources or more.
• Don’t serve Javascript files which are needed for the page startup from a cookieless domain. Most browsers block external Javascript files until the page is done loading. So if you have any Javascript files which are essential for the initial page startup serve them from the same hostname as the main document.

Resources

Some useful resources with more information on cookieless domains and how to set them up.

• Set up a cookiesless domain
• Using cookieless domains to improve website performance
• Google: Minimize request overhead
• Cookieless Domains