Serve Static Content From a Cookieless Domain To Reduce The Total Size Of Page Request

Serve Static Content From a Cookieless Domain To Reduce The Total Size Of Page Request


When we check our website performance at Gtmetrix or Pingdom often we get a warning from these two sites to ‘serve static content from a cookieless domain.‘ And as per my knowledge, you are visiting this page after testing your website performance and looking for fixing your static content serving problem.

Like this image below.

Use-cookieless-domain

*This is a test result of a specific webpage from this domain.

The reason behind to serve static content from a cookieless domain is to reduce the total size of requests made for a page by your browser.

Also learn how you can reduce server response time of your website.



[bctt tweet=”Reduce the size of page request by serving static resources from a cookieless domain ” username=”rupam2234″]

Cookieless domain

Now we are discussing about how to setup a cookieless domain,  so it  would be better if we know what is cookies for a website.

What is cookies ?

An HTTP cookies is a small piece of data sent from a specific webpage or website and stored on the user’s computer by the user’s web browser, when the user is browsing.

And what is a cookieless domain ?

A cookieless domain is not a very complex concept. It’s actually a domain which does not set cookies. Static contents such as image, javascript and CSS files don’t need to accompanied by cookies, as there are no user interaction with these resources. So by serving static resources from a domain that doesn’t serve cookies you can decrease the request latency of your website.

This tactics is specially useful for pages that refers large volume of contents that rearly get cached. For example frequently changed thumbnails, image archives that are not often visited by the users.

Watch this video below.

 

How you can set up a cookieless domain

There are a couple ways to configure cookieless domain. Such as using a separate domain name,  setuping a CDN and reconfiguring WordPress site. So we will discuss about these methods one by one.

 

1/ Configure a separate domain for serving static resources

>> Register a separate domain. Either register a new one or just create a subdomin. A good way to create a subdomain is to use “static”, so for example my static domain could be https://static.rankwordpress.in.

In most cases people use the subdomain because a subdomain is a free domain and easy to access for everyone.

But remember that if you use your root domain without www version, like rankwordpress.in then using the subdomain as cookieless domain will not work.

In that case you need use a separate domain as a cookieless domain. Some examples will help you understand that.

Google uses https://gstatic.com as a cookieless domain. Amazon uses images-amazon.com as cookieless domain.

Note: If you are using Google Adsense then cookieless domain will always occurs for your root and subdomain because they set cookies to both root and subdomains.

 

>> Now configure your DNS database with a A record to your root domain. Your root domain is yourdomainname.com. For this website the root domain is https://www.rankwordpress.in.

The most recommended way that bloger mention, to do this is using a CNAME record which is less effective as the DNS resolution of a CNAME moves through an another route of indirection by finding the domain that is being pointed to and then resolving that.

So using the A record instead of CNAME is a better way.

 

>> Use your .htaccess file to configure your web server to serve static contents without cookies. Here you have to put that  .htacess  file into the root folder of your domain.

The code to paste inside that htacess file is given below.

# Use Mod_deflate to compress static files
  
  
SetOutputFilter DEFLATE  
  


# Speed up caching
FileETag MTime Size

# Expires
ExpiresActive On  
ExpiresDefault "access plus 366 days"

# Future Expires Headers
  
Header set Expires "Sat, 27 Dec 2018 23:59:59 GMT"

Once you’ve set up the cookieless domain now you need to upload all of your static content to that domain. This contents  includes CSS, ICOs, Javascript, text and image files.

This steps will create cookieless domain from where static content of your original website will be served.

Remember:
Don’t take this step until your website have more than 5 static files. Also, don’t serve Javascript files which are needed for the page startup from a cookieless domain.

Read this complete tutorial to setup a cookieless domain for both WordPress and non-wordpress website.

2/  Use a CDN provider to ignore cookies.

Using a CDN provider is another good way to solve this problem. Most of the CDN has the ability to ignore cookies and strip cookies which helps to completely prevent the client from receiving the Cookie response header.

Now at this step it’s hard to guess which CDN should you use. Every CDN has different features and functions so not every CDN is suitable for you to solve the cookieless domain.

If you are currently using cloudflare CDN then you should disable it if you have lots of warning regarding cookieless domain. The reason is that you can’t disable cookies on resources served through CloudFlare CDN.  They also includes their security cookie in your website header.

But if you use CloudFlare with a caching plugin, there is no way to get around this warning, so you need to find another CDN provider to solve it. KeyCDN is the nicest alternative I have ever used for my websites.

You can deploy keyCDN to your WordPress site by yourself. Just follow the steps below and you will be fine.

  • Go to their website KeyCDN and create and account there.  They charge about 0.04$/GB traffic data and you will also get one month for free trial. You don’t have to submit your credit details. So test their service and if you feel better then go for a premium account.
  • Install the CDN enabler plugin from WordPress repository. Create a Pull-Zone inside the keyCDN dashboard and use the CDN URL inside your WordPress plugin.
  • Once you setup it clear your website cache and wait a little time to take the effect.

On completetion of your setup you should see the improvement in your website test results on gtmetrix or pingdom.

Similar posts

How to Configure W3 Total Cache Cloudflare Settings For Best Result

How to build SEO backlinks to your website without guest posting



3/ Re-configure your WordPress site

This is the same step to the first one. But the procedure is different.  That’s the reason why I’m adding this here again as I missed it on the first publish.

In this method you will setup your subdomain’s DNS record as a CNAME pointing to your root domain.

So now point your subdomain to your /wp-content directory simply by editing your wp-config.php file.

Add the following codes into your wp-config file.

define("WP_CONTENT_URL", "http://static.domain.com"); 
define("COOKIE_DOMAIN", "domain.com");

* don’t forget to replace your domain URL and domain name inside the code.

Using these cool tricks you can get around of that annoying cookieless domain warning on gtmetrix or pingdom .

In the comment box please share is this article helpful for you or not. Also do share with your friends if these tricks work well with you.


Rupam Krishna Bharali

Rupam is founder of rankwordpress.in. He is a web developer, blogger, graphic designer and a well known game level designer from India. He also loves traveling, exploring new ideas and playing football.Let's connect on: twitter
Close Menu