How Website Speed Test Helps To create a 100% Cookieless Domain

How Website Speed Test Helps To create a 100% Cookieless Domain


How many times do you perform website speed test in a day or a week?SEMrush

Whether you do check that so often or not,  it’s always recommended to test your website performance so that you will never encourage search engine to dislike your page and rank it down. Just because you are targeting to appear on the top of Google, you have to follow their rules. And one of those rules is representing a fast website.

Here is the test metrics: EVERY second DOES COUNTS!

website-speed-test-metrics
Credit: www.hobo-web.co.uk

Anyway, we do know a lot of free website speed test which can help you get the performance score for your site. Some of them also offer  performance monitoring of your site for a longer duration.

  1. GTmetrix
  2. Pingdom
  3. Google page Insight
  4. Web Grader
  5. WebPageTest


And there are more tools available on the internet, but these are the tools I always prefer to use. Using the pieces of information provided by these five tools I was able to grow up my site page speed and now it’s performence always remains in between 97 – 100.

You can read this tutorial how I configured w3 total cache + Cloudflare settings to reach the < 1 sec load time for this domain.

well, as I have mentioned in the title, in this tutorial I’m going to write about how your website speed test result can help you to fix the cookieless domain or cookie free domain issue that appears on Gtmetrix or Pingdom.

No idea what it is and how it appears?

Let’s read this article, where I had mentioned how it appears and the ways to fix the problem.

And there I mentioned that the most effective way to fix cookieless domain issue is to create a separate domain (or simply a subdomain) and then serve the static contents from that new cookie free domain.

From the last few days, I’m getting more than 10 emails asking “what is the exact procedure to set up a cookie-free domain?”, so in this article, I will cover how anyone can do that with a subdomain.

I am preferring a subdomain because there is no need to buy an extra domain just for serving your website’s static contents. Also, I must include if your website has a large number of contents then or heavy cookies, then optimizing your website to deliver static assets from a cookie-free domain will be well worth the effort.

Here’s are the step how to do it.

 

Create a subdomain using (static) prefix

In this step, you are going to login into your hosting control panel (I am using cPanel). And go to the subdomain link under the domain tab.

This will redirect you to the subdomain creation page.

create-a-subdomain

Now the “Create a Subdomain” page will appear and there you have to name the subdomain as “STATIC”. You can use any name according to your choice but static looks cool and if you will create more subdomain later in the future, the static prefix can help you easily identify the purpose of this subdomain.

After giving a prefix to the subdomain, select your primary domain inside the domain box. The document Root should look like “static.yourdomain.com“. Let’s see an example.

tutorial-to-create-a-subdomain

Hit the create button and it will create your subdomain. Test the URL to make sure that your subdomain address is loading – e.g. http://static.yourdomain.com (or using https://)

DO NOT PROGRESS FROM THIS STEP UNTIL THE STATIC DOMAIN LOADS When it starts working correctly you will see a blank page. Check the URL using your local browser or use any website speed test tool like Pingdom or Gtmetrix. The process can take up to 24 hours to show a valid subdomain blank page.

Once your static domain is configured then move to the further step.

*Now this is something you may do or totally leave. You can either use A records to the static domain which is the default setting. And you may use CNAME instead. In case, you want to use CNAME read the following.

Create a CNAME record to your new subdomain

Go back to your cPanel dashboard and go to the domains tab again. Find and click on DNS Zone Editor. Your domain name will appear there with options like CNAME record, MX record, A record, Manage etc. Click on manage there.

dns-zone-editor

Now from the list find the subdomain you have recently created and Configure your CNAME record. See the picture below. (Sometimes the appearance of configuration table may different but the rule is same. First comes the subdomain name, then the TTL value, Type and then your primary domain name). For more information see the image below.

dns-zone-editor-record

Then save it.

**When you create the CNAME record you should enter your static domain as the “label”, “name” or “alias” and your A record domain as the “content” or “value”.  The CNAME term actually refers to the primary domain which you are mapping to but not the alias.**

So till now, we have configured the subdomain which is ready to serve the files. Then we proceed to the next step.

 

Perform a website speed test using any of the listed tools above

Now you have to choose any of those five performance test tools that I have listed at the beginning. Basically, you are going to use all of them one by one, but for the first setup just choose only one of them. In this example, I am going to use Pingdom website speed test tool.

As mentioned earlier, this test is going to help you fix the cookieless domain issue. But how?

Read the following part carefully. Because this test is going to reveal the contents which need to be served from the subdomain and when done, it will fix the problem entirely.

Once you’ve got the contents you’ll now modify all the references to your static files to point to the new domain, where you have set up the alias previously. Here’s how to do that.

>> If you’re not using WordPress then manually point them by editing the page source code.  Also, upload the specific files to your subdomain into the correct folder. Apply the change stated below.

<img src="http://www.yourdomain.com/img/website-logo.png" alt="" />
<!-- will become -->
<img src="http://static.yourdomain.com/img/website-logo.png" alt="" />
<!-- or it can be -->
<img src="http://www.static-yourdomain.com/img/website-logo.png" alt="" />



>> And if you are using WordPress, the wp-config.php file need to be edited.

  1. Go to your file directory using an FTP client or by directly opening the file manager and find the wp-config file there.
  2. Edit wp-config and add the following lines of code to the top of the file, below the <?php.
define("WP_CONTENT_URL", "http://static.yourdomain.com");
define("COOKIE_DOMAIN", "www.yourdomain.com");
define("WP_PLUGIN_URL", "http://static.yourdomain.com/plugins");
  1. Replace the “your domain” name with your original domain name.
  2. Once you’ve done it then save the file.

 

Update existing post contents

After you’ve configured the WordPress to serve static files through your cookie free subdomain, future files will be automatically served from the subdomain automatically. However, the existing post image’s paths need to be updated to use the static domain.

To do that follow these instructions.

  1. Login to the cPanel
  2. Under the database click on phpmyadmin
  3. Expand the WordPress database and click on the post table.
  4. Click on inline and edit the text box with the following command.
UPDATE wp_posts SET post_content = REPLACE(post_content,
 'http://www.yourdomain.com/wp-content/uploads/','http://static.yourdomain.com/uploads/')
  1. Change the www.yourdomain.com with your original domain name.
  2. Click on GO to apply the changes.
  3. Visit your old posts to make sure about the changes or use any website speed test tool.

Important >> As long as your files on the sub-domain that doesn’t set cookies, a cookie should never be set for that sub-domain which will make sure that all of your future requests for static contents be sent cookie-free.

Once you’ve done these step s then find more static contents on your website using the website speed test tools and point them to the cookie free domain. To make sure you are not skipping any static files try to check each and every page with testing tools and fix them.

Additional configuration for Google Analytics

If the website uses Google Analytics then you will need to modify the Google Analytics code which is already pasted inside the header or footer. Inside the code change the property from “auto” to “www.yourdomain.com”, that would be your primary address.

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-XXXXXXX-1', 'www.yourdomain.com');
  ga('send', 'pageview');
  ga('set', 'displayFeaturesTask', null);

</script>

Also, change the domain preference inside your analytics account

  1. Under ‘Property’ -> ‘Property Settings’ make sure both the ‘Property Name’ and ‘Default URL’ has the www version “www.yourdomain.com” for your website
  2. Also, make the same change under ‘View’ -> ‘View Settings’ for ‘Website’s URL’ by using the www version.

 

Another additional information

If your theme uses front awesome icons such as search, home, menu icons then you will need to add the following codes into your .htaccess file to the icons to continue to work.

## EXPIRES CACHING ##

# ------------------------------------------------------------------------------
# | CORS-enabled images |
# ------------------------------------------------------------------------------
    
        <FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$">
            SetEnvIf Origin ":" IS_CORS
            Header set Access-Control-Allow-Origin "http://www.yourdomain.com" env=IS_CORS
        </FilesMatch>
    
# ------------------------------------------------------------------------------
# | Web fonts access |
# ------------------------------------------------------------------------------

# Allow access from all domains for web fonts

    <FilesMatch "\.(eot|otf|ttc|ttf|woff)$">
        Header set Access-Control-Allow-Origin "http://www.yourdomain.com"
    </FilesMatch>

Website speed test is still showing cookieless domain issue

Now, this is something which is very complicated to do. You will need to find out each content separately and then fix them to serve from the static domain.

Use the Firefox debugging tool to load a resource (for e.g. an image or an HTML page) from the static domain and check through each of the cookies attached with the resource.

If you find any problem on there, fix them one by one.

So, these are the steps to set up a cookieless domain and start serving static contents from the cookieless domain.

Is this article helpful for you?

If there’s anything I need to include, inform me in the comment box below. I believe this guide is going to help you fix cookieless domain warnings or so called issues.


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

This Post Has 2 Comments

  1. Finally got the solution to setup cookieless domain for WordPress site.

    Thanks a lot for writing this article.

  2. Happy to help a WordPress community member.

Comments are closed.

Close Menu