Serve Static Content from a Cookieless Sub-Domain (WordPress Tutorial)

Moved all static conten on cookies-free subdomain

When the browser requests a static element and sends cookies with the request, the server ignores the cookies. These cookies are unnecessary network traffic. It increases page load time. Therefore, it is better to avoid cookies for static resources like CSS, JS, Images, etc. files. This is why speed test tool such as GTMetrix and Pingdom recommends web developer to use a cookieless domain for serving the static contents.

It can be easily set up in a WordPress blog in simple few steps.

Things before you need to know:-
If you are website URL start with www, then you can create a subdomain as the cookies-free path for serving the static contents. But, in case if you are having the non-www version like twitter.com, mashable.com then you have to buy a new domain specially for completing this step. Or, you can move your website from non-www to www.

To setup cookies free subdomain in WordPress

Create a CNAME record

  • First, Login to your Domain Registrar website
  • Go to DNS Management
manage-dns
Go to Manage DNS
  • Create a CNAME record with hostname static and point value to example.com

    create cname record
    Create a CNAME record

    CNAME record created
    www.gulshankumar.net is a ready as cookies free subdomain

A unique method only for Cloudflare User: If you are a CloudFlare user, generally you can’t set up a cookies-free domain or subdomain. Since CloudFlare adds special cookies with each request for some security purpose.


But, here is a trick for that you need to use Cloudflare just as a DNS manager only. In Cloudflare Dashboard, simply keep the status ‘Paused’ and configure DNS record as shown in the below screenshot.

Create cname record in Cloudflare
Setup a CNAME record in Cloudflare
  • Wait for DNS propagation. You can check DNS record status at www.whatsmydns.net

    DNS Propagation status
    DNS Propagation status

Point all static resources to Cookies Free Path

  • Now in the WordPress, point all static resources to your cookies free subdomain path. For this purpose, you can take advantage of CDN Enabler plugin.
  • First, install and Activate CDN Enabler Plugin

    CDN Enabler Plugin
    CDN Enabler plugin will do the job to move all static assets to cookies free path at the frontend source code.
  • Go to its settings, and in the CDN field and type your subdomain ‘static.example.com’ and click on Save Changes button.

    point cookiesless subdomain
    Point cookieless subdomain to your WordPress Blog
Moved all static content on cookies-free subdomain
Moved all static content on cookies-free subdomain via CDN EnablerPlugin

Finally, you may check your website at Pingdom again. Now, you will get score 100/100 for recommendation “Serve static content from a cookieless domain.”

serve-static-content-from-a-cookieless-domain
Final result: You will see score 100 at Pingdom

Few things concerning SEO, you should not ignore at any cost. So, below I mentioning for your kind information.

Recommended settings: As in the above steps you have pointed all images to cookies free subdomain, so you should notify Search Engine Bot about the new path. But, how? Follow the below two steps.

  • Switch the XML Sitemap image URLs to subdomain path.
  • Image in Sitemap
    Updated image path in the XML Sitemap

    Using Yoast SEO plugin? simply add this function code to your WordPress blog via Code Snippets Plugin.

    
    function wpseo_cdn_filter( $uri ) {
    	return str_replace( 'http://www.example.com', 'http://static.example.com', $uri );
    }
    add_filter( 'wpseo_xml_sitemap_img_src', 'wpseo_cdn_filter' );
    

    It would be helpful in indexing images from the new path.

Also, it is important to setup 301 redirection.

RewriteEngine On
RewriteCond %{HTTP_HOST} ^gulshankumar\.com$ [OR]
RewriteCond %{HTTP_HOST} ^www\.gulshankumar\.net$
RewriteRule ^wp\-content\/uploads\/?(.*)$ "http\:\/\/static\.example\.com\/wp-content/uploads/$1" [R=301,L]

301 Redirection Code Credit: http://www.webnots.com/move-wordpress-images-folder-to-subdomain/

So, this was the rule for setup of 301 redirections. Isn’t simple? I am looking forward to hearing your thoughts in the comment section
Thanks!

Subscribe our blog via Email
Get instant updates of our new blog post directly at your Mailbox.

3 Comments

  1. Pramod Kumar February 5, 2017 Reply
  2. Pramod Kumar February 5, 2017 Reply
    • Gulshan Kumar Gulshan KumarAuthor February 5, 2017 Reply

Add a Comment

Your email address will not be published. Required fields are marked *

By commenting on this article, you agree to our .