Serve Static Content From Cookieless Subdomain for CloudFlare (Updated 2018)

Serve Static Content From Cookieless Subdomain for CloudFlare (Updated 2018)

​If you are thinking of speeding up your website, Google might be telling you the answer is to create a cookieless subdomain or domain. Well, that's easy for you to say. How to serve static content from a cookieless domain? More importantly, what is a cookieless subdomain?

​You can consider a cookieless subdomain is a term to describe data transferring from one point to another (in this case, data movement from subdomain to domain) has no cookies attached. Indirectly, this boost the loading speed of your domain.

This is what Google explain in its own words:

​Why is serving static content over cookieless domain important?

​Static content, such as images, JS and CSS files, don't need to be accompanied by cookies, as there is no user interaction with these resources. You can decrease request latency by serving static content from a domain that doesn't serve cookies. This technique is especially useful for pages referencing large volumes of rarely cached static content, such as frequently changing image thumbnails, or infrequently accessed image archives. We recommend this technique for any page that serves more than 5 static resources. (For pages that serve fewer resources than this, it's not worth the cost of setting up an extra domain.)

​​What does this means to you?

All static contents or data that are transferred with the accompanied by cookies. Though cookies are not needed for any transaction and do not serve any advantage, they will automatically be available for all data transfer. The only way to avoid such is when static contents are obtained from a cookieless site.

​Static content + ​cookieless domain?

​Serving static content or resources from a cookieless domain reduces the total size of requests made for a page. It is also important to note that there is no point setting up static subdomain for this matter if you are using a powerful web host or having very less page.

If you are using Pingdom, this sight is just too common for many:

serve static content from a cookieless domain

​Upon creating a cookieless domain, enabling it and start serve static content from a cookieless domain, here's what you will get on Pingdom.

fix serve static content from a cookieless domain warning

​On the side, I want to stress that due to the latest changes with the web and new protocols such as HTTP/2, it is safe to ignore this warning for now. However, I'm still a strong believer that we should find a solution to fix the "serve static content from a cookieless domain" warning if we can.

Why?

Serving static content from a cookieless domain helps your website to load faster and as a result, it will take a fraction of the time for your website visitors to load your website.

​Now that we had gone through the relationship between cookieless subdomain and serving static content, let's explore the right way to serve the following static resources from a domain that doesn't set cookies.


​This method is free but at the cost of some work and knowledge.For starters, you need to understand that the way your website is being configured will play a crucial role in the success of this method.


​How to create a cookieless subdomain using CNAME?

​When it comes to creating a cookieless subdomain, using a CNAME could be the easiest way of all​ (at least for me). This step is extremely easy to follow and ​after configurations, you can start serving static resources from a domain that doesn't set cookies.

  • ​Go to your cPanel (most shared web hosting offers this)
  • ​Create a subdomain (any name would do, e.g. static.domain.com)

​​This subdomain will serve as a CDN subdomain which is the key criteria to enable the process of serving static content from cookieless domain.​

​Step 1: Selecting the right installation path for the subdomain

​In order to create a proper cookieless subdomain, you have to ensure that when you are creating your subdomain, make sure it is pointing to your root directory instead of creating a secondary one.

For example, my root directory is /public_html and thus, it should be pointed or directed to /public_html and not the default, /public_html/static.

create cookieless subdomain

​Step 2: Editing the DNS Zone

​Once you have done pointing the subdomain, head over to your DNS Zone Editor. At times, these might be labeled as Simple or Advanced DNS Zone Editor for several types of cPanel but they are all alike.

editing the DNS zone

You would need to either create or modify the Name to your subdomain name and CNAME as your main domain. Of course, for the Type, you would need to select CNAME. You may start this by hitting the create button and if there is already a record, you just need to modify the settings to the above.

Still not sure? Let me explain to you, in other words. When you create the CNAME record you want to enter your static domain/subdomain as the label, name or an alias and your A record domain as the content or value. (The CNAME term, which stands for Canonical Name, actually refers to the domain you are mapping to, not the alias.  The common practice of referring to the alias as the CNAME is in fact backwards.) 

​Step 3: How to make sure you have static resources served from a domain that doesn't set cookies?

I could not emphasize how important this is but you must not skip this step no matter what. In WordPress, there are two common cookie-setters which are WordPress and Google Analytics. All you need is to do little changes in the configurations and you would be well on your way to a cookieless subdomain.

For WordPress, head over to your wp-config by login into your cPanel. Open it up and add this line to the file. If you are wondering where exactly you may place this file, you can place it at the bottom most of the script.

define('COOKIE_DOMAIN', 'www.yourdomain.com');

This is definitely a no-brainer but just to make sure, do remember to change your domain to your own domain name. After that, save the file and you are good to go!

For Google Analytics, all you need to do is to search for the specific code you had earlier placed in on your site and replace the code with the below one. For a quick tip, most Google Analytics code is kept close to the <body>.

_gaq.push(
['_setAccount', 'UA-xxxxxxx-1'],
['_setDomainName', 'www.yourdomain.com'],
['_trackPageview']
 );

Again, change your domain as seen above to your own domain URL and save the file.

​Important Note

note: If you are using cloudflare or any type of Content Network Delivery (CDN), please get your hosting and CDN provider to verify on the CNAME. For example, using Cloudflare will give you an error when you are following the above guide in changing the CNAME. Basically, the hosting or CDN provider will give you a new A figure to place in.


​How to serve static content from a cookieless subdomain for WordPress?

​Yes! I'm glad you asked.

If you use a top-level domain such as domain.com, then you would need to actually use a separate domain altogether. If you are using www.domain.com then you could simply set up a subdomain such as static.domain.com.

As most websites are configured on www.domain.com, the method below is strictly for websites with www:

  • ​Create a subdomain
  • ​You can use any name and I'm using static.domain.com. This is where you will be delivering your files from (and ultimately solving the server static content from cookieless domain warning.
  • ​Point your subdomain to your wp-content directory with a CNAME.
  • Edit your wp-config.php file to reflect the following:

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

define("COOKIE_DOMAIN", "domain.com");

​Where to find wp-config.php file?

The configuration file of your WordPress script is located in the WordPress installation directory and its name is: wp-config.php

You can edit it through cPanel --> File Manager. Find the file, click on it and from the top menu choose "Edit".


​If you are using content delivery network from CloudFlare, setting up a cookieless subdomain may be a challenge.

According to CloudFlare, CloudFlare states that "it will add a security cookie to any domain or subdomain that is being proxied by our service. In addition, since Cloudflare is already caching your static content by default, there really is no need to have a cookieless domain.”

Lucky for you, ​here's what you need to know.


 

​While Cloudflare may add a security cookie to every domain/subdomain, this issue is causing the following:


(1) Website performance issues (FTTB and overall image download speeds).


(2) Cookies for each image are being downloaded. When we check our browser(s) for downloaded info, we see that the culprit are these images. (Note: All of our images have been reduced in size and optimized using reSmush.it)

With HTTP/2 enabled on CloudFlare, they all load in parallel, and very quickly. You’ll see from my sample, 12 images (there are quite a few more on that list) all load in a span of less than a tenth of a second.

Serve Static Content Cookieless Subdoman CloudFlare

​Regardless, CloudFlare cookies are never going away. They don’t add significant overheard and are required for CloudFlare functionality.


​Summary: Are youready to serve static resources from a domain that doesn't set cookies?

​I hope you will find this guide useful in setting up static resources from a cookieless subdomain.

What do you think? Leave a comment below.

33 thoughts on “Serve Static Content From Cookieless Subdomain for CloudFlare (Updated 2018)”

  1. But, wait. What if I only want to serve an image to someone who is logged in? In this case, I would need to check if they have a cookie. If they have one, I’ll show them the image, if they don’t then no image.

    Or is there another way to do this?

    • Hi John,

      I remember reading this somewhere. Let me scout and check on this. As showing images with cookies etc is way different from serving static content from subdomain.

      Keep you informed!

      Reginald

  2. Okay, This is really Good. But what should I do to make all static files load from subdomain, I have a wordpress site and should I upload my javascript and css files to subdomain that I created? I am confused, I am not using any CDN..But Help me to get my website speed up.

    • Hi there,

      Firstly, when you create a cookieless subdomain and configured all the files correctly using W3TC, it will auto transfer a copy of those files to your subdomain. This means that you do not need to move those files to your subdomain. What happens is that the subdomain you created works as a CDN. However, unlike normal CDN, you don’t need to upload those files.

      Setting W3TC properly would be good enough.

      Hope this helps.

  3. Hi,

    nice article. I have just one question. Where exactly do I need to put this bit of code “define(‘˜COOKIE_DOMAIN’, ‘˜www.yourdomain.com’);” to make it work for Joomla 2.5? Perhaps you know it… Thanks in advance

  4. Very nice write up / guide! Thanks you!! 🙂

    One question…

    What WordPress files, folders, etc. do we move to the cookieless CDN subdomain?

    Are you saying that I DO NOT have to move any files to the CDN?

  5. Hi .. thanks for the article! Are you sure this line:
    define(‘˜COOKIE_DOMAIN’, ‘˜www.yourdomain.com’);
    shouldn’t be
    define(‘˜COOKIE_DOMAIN’, ‘˜static.yourdomain.com’); ????

    And on the CloudFlare website, it says:
    “CloudFlare will add a security cookie to any domain or subdomain that is being proxied by our service. In addition, since CloudFlare is already caching your static content by default, there really is no need to have a cookieless domain.”
    (https://support.cloudflare.com/hc/en-us/articles/200169816-Can-I-serve-a-cookieless-domain-or-subdomain-through-CloudFlare-)

    So if you’re using CloudFlare, is there even a need to set up a cookieless domain? Thanks again for taking the time to write this article!

    • Hi Jason,

      Actually for most sites, you do not need to have a cookieless subdomain. However, let’s say you want more than what CloudFlare can offer.

      To answer your question, I noticed an increase of speed with it than without (with CloudFlare enabled).

      As for the codes, yes I use it on my sub sites and they are working like normal.

      Hope this helps and thanks for your resource link too!

  6. Thanks for taking the time to explain this. I am confused from I’ve read at GTMetrix and I quote:”

    If your domain is http://www.example.org, you can host your static components on static.example.org. However, if you’ve already set cookies on the top-level domain example.org as opposed to http://www.example.org, then all the requests to static.example.org will include those cookies.

    In this case, you can buy a whole new domain, host your static components there, and keep this domain cookie-free.
    So I have my website set at domain.com and not the http://www.domain.com. Does this mean i have to host static files on a separate domain not a sub-domain?

  7. I have failed to set cookie less sub domain. I has set up cookie domain at wp-config.php and google analytics. When I cheacked for http header . Shows cookie header. sub domain pointed to wp installation directory. why do now working don’t know.

  8. Can I just add this: define(‘COOKIE_DOMAIN’, ‘www.yourdomain.com’);

    to wp-config for my “www.” domain? Will this work instead of having to do all the steps before it

    thanks

  9. Hi Reginald
    A very interesting article; I have a quick question, though. My domain does not use www, so will this mean I am unable to use this method?

    cheers

    Shane

    Sorry Reginald

    I read lower down and someone has the same issues. It appears I cannot do it this way unless I have a www domain.

    cheers

  10. Hello,
    (this is an automatic English / French translation of google)
    I managed to make all this work and I found interesting results with GTMetrix.
    However, I could only run in test by placing the complete directory wp-content in my subdomain with the following line in the wp-config.php:
    define (“WP_CONTENT_URL”, “https://static.mydomain.com/wp-content”);
    The reason is that I can not manage the cPanel of my hosting, to direct my subdomain to my directory wp-content with a CNAME because the CNAME syntax “mydomain / wp-content” is not accepted in the DNS configuration . (I am hosted at PlanetHoster).
    Would you have a solution? In the .htaccess maybe?
    Thank you

Leave a Comment