WordPress Cookieless Domains
First off, cookieless domains are your friends for content distribution. Why? Because every time a web browser talks to a server it sends a copy of all its cookies for that domain. As you can imagine this is quite ridiculous if your client is requesting an image, CSS, JS or other static resource which can never use that cookie information. These wasted upload bits are totally unnecessary so lets get rid of them with the help of a cookieless domain.
Sub or New Domain?
You might think there is a magical ‘no cookies’ option on your server but there isn’t. A cookieless domain is simply one that has never set a cookie. This means two options; create a sub domain (like s.forstmist.org) or create a new domain name.
At first glance a sub domain seems nice and simple but there is a caveat. If you redirect your visitors from a sub domain (www.forestmist.org) to your root domain (forestmist.org) you’ll end up with cookies on your root domain. These root cookies are automatically sent along with any requests to all sub domains. That’s right, having cookies on your root domain taints all your sub domains from becoming cookieless domains. This is not a concern if you channel all your visitors to a www sub domain since any cookies there will not be available to the root domain and therefore won’t taint other sub domains.
For short domain name lovers, registering a new domain for serving static content is a no brainer. I definitely fall into this category so I registered forestmisty.org which I shall use as an example in the rest of this guide.
.htaccess Redirect
With the new misty domain setup and pointing to my web server everything was working great. Requests to static images weren’t passing cookie information but what if someone went to the root of forestmisty.org? What if a broken link sent them to a 404? WordPress would handle the request and that means potential cookies from it or Google Analytics. Yikes!
What would be nice is if we can allow any requests for forestmisty.org/wp-content/ but redirect anything else back to forestmist.org. We can do exactly that with the following .htaccess commands.
RewriteEngine on
RewriteCond %{HTTP_HOST} ^forestmisty.org$ [NC]
RewriteCond %{REQUEST_URI} !^/wp-content/?(.*)$ [NC]
RewriteRule ^(.*)?$ http://forestmist.org/$1 [R=301,L]
The first line enables the Apache rewrite engine.
The second line says anytime a request comes in for ‘forestmisty.org’ continue to the next line.
The third line says if the request is NOT for ‘/wp-content/…’ continue to the next line.
The forth line says if we made it this far redirect the original request to forestmist.org including any extra query information like /favicon.ico, /creative-resume, etc…
By the way…
^ means the start of a string.
$ means the end of a string.
? means the preceding character or collection in parenthesis is optional.
. means any one character.
* means the preceding character can occur 0 or more times.
$1 means insert whatever was inside the first set of parenthesis to the left.
[NC] means not case sensitive.
[R=301] means do a 301 redirect.
[L] means the last rule so don’t bother processing the rest of the .htaccess file.
Now we can rest assured that requests to our new cookieless domain will stay cookie free by only servering up what are almost always static file requests from the /wp-content folder.
Configure WordPress
Our new domain is setup and protected pretty well thanks to our .htaccess file so now it’s time for WordPress to join the fray. Specially, WordPress needs to have any /wp-content links rewritten to point to the same location on our cookie free domain.
- Download, install and activate the excellent CDN Linker by W-Mark Kubacki.
- Login to WordPress
- Settings » CDN Linker
- Enter your new cookieless domain for CDN URL.
- Change your ‘Include Dirs’ line to read ‘wp-content’ if you setup your .htaccess file like mine.
- Save Changes
Load your home page and view source. You should see your new cookieless domain being referenced quite often. Yay!
Success
With a little bit of effort our server is less stressed, our clients are loading faster and hopefully you’ve got a silly grin on your face.
Comments are moderated for spam. If you are a human, don't worry and check back later.
February 4, 2012 at 5:31 am
Hi Daniel,
This is a really great post. I sent a Twitt to you, but I think it is easier to leave a comment here, if you are OK to guide me in this difficult way… Oh, it seems simple when you explain it, but I have 2 questions about it: Do I have to copy a site ghost on the “mist” domain? And do I have to upload all the .jpg, pdf, and others on this new domain name ?
So, you website seems to be very light and welldone. Did you build it with html5 and css3 ? (red your post on the css3 bahamas logo: amazing!)
Hope you will have time to answer me, and guide me on my project about this cookieless domains… but I do not buy a new domain before I know all about what I have to do. Have a good day, Philippe, from France.
February 4, 2012 at 8:42 am
Thanks!
You’ll be happy to know that no duplication of content is required. Just make sure to point both your domains to the same server (probably the same IP too).
Once that is done you’ll want to make sure to setup your .htaccess file (see above) so WordPress doesn’t accidentally serve any pages on your new cookieless domain. You want the new domain to only serve resources like PNG, JPG, CSS, JS and other static files.
The current design on ForestMist.org is indeed HTML5 and CSS3. At the time I launched the new design I was still learning a lot so I’m looking forward to making an even better template in the near future. There are soo many neat things possible with HTML5 and CSS3 so I’m really excited!
The CSS3 Bahamas Logo was a lot of fun to make. I hope to make a few more things like that in the future. Maybe try to recreate movie logos or other famous designs. More for fun than anything but also a great way to hone CSS familiarity and skills.
Hopefully you’re new cookieless domain setup will be pretty painless but if not, help is just a comment away.
Cheers!
February 4, 2012 at 9:19 am
Thanks to you!
I’ll try to experiment this cookieless domain method as fast as possible, may be tonight!
I think your recreating logos in css3 is not only fun, it could be important to build lighter websites. Did you try to draw some with canvas in HTML5?
I will return if all is OK for me… if you need something I can give to you, it will be a pleasure!
Regards,
Phil
February 4, 2012 at 9:47 am
The problem is that I use Cloudflare to secure my website. Probably it is not possible to point both my domains to the same server.
I had an eye on you entire blog: appreciate!
Thank you…
February 4, 2012 at 5:44 pm
That is true, certain CSS designs could be much lighter than an image. The tradeoff is that it may take 30 minutes to do a design that only takes 5 minutes to do in Photoshop. Plus the browser has to figure out things, render them, etc… so there is a CPU cost to using a CSS design vs. a graphic. Still worth considering for certain situations of course.
I have done a few things in Canvas and was very impressed by the control and precision. You can really do almost anything in Canvas. I think of it like text-based Photoshop really. Hehe. I usually like to try to do a design in straight HTML5+CSS3 since it is more of a challenge.
Thanks Phil, much appreciated!
February 4, 2012 at 5:47 pm
I am not familiar with Cloudflare but maybe you can ask their support team if having two domains pointing to the same server/IP is possible? It seems like a common feature so I would hope they say yes.
If they don’t support that then you would have to do some nasty file synching / replication and I dunno… probably not worth the complexity cost. Better to run http://gtmetrix.com on your site and see if there are any other easy performance improvements. Minifying CSS, JS and losslessly compressing images is especially quick and easy to do. Pays off in better performance right away too.
February 4, 2012 at 6:55 pm
Daniel,
Thanks for all you told to me… it is great and will make me cleverer !!! So I tried a lot of things tonight, and when all was in right place, my Website appeared with only text and links and white boxes for images, without the template, you know.
So, for the moment, I wait for new informations that will do all OK.
My Yslow is 92, not bad, but the cookies-free domains make me mad.
I wait for you next website version, as you promise to us !! I love such performance…
February 4, 2012 at 11:19 pm
Aww, well maybe a fresh mind on another day will reveal the secret of setting that up on your host. *crosses fingers*
92 is not bad at all for Yslow. You should be very happy with that score.
Deal, it’s a promise!
February 5, 2012 at 3:54 am
Well, after a good night, and how you helped me, here are the results of GTmetrix:
- Page Speed Grade: 87%
- Yslow Grade: 94%
I think that I must thank you very much, never somebody spent such a lot of his time like that.
So, thank you once more time!!
Have a nice day. (and will often come back to read your post and see what you do with the HTML5 and CSS3 for your Website).:)
Cheers,
Philippe
February 5, 2012 at 5:36 am
^_^ Very welcome.
April 10, 2012 at 6:31 pm
Hi – read your article about cookieless domains. I did every instruction as outlined for my site but when I view the site after the changes the page style go all out of key and looks really bad. I have set up a sub-domain and pointed it at my main domain. In the CDN Linker settings I have updated the url to the sub-domain. The
I am assuming the.htaccess file sits in the sub-domain?
RewriteEngine on
RewriteCond %{HTTP_HOST} ^mqcentre.com$ [NC]
RewriteCond %{REQUEST_URI} !^/wp-content/?(.*)$ [NC]
RewriteRule ^(.*)?$ http://cdn.mqcentre.com/$1 [R=301,L]
Any ideas what I have done wrong?
thanks
Andy
April 10, 2012 at 8:16 pm
I can resolve http://mqcentre.com/ but not http://cdn.mqcentre.com/ so that may explain why any resources that the CDN linker pointed to were not working.
More importantly though, if you want to use the same domain to serve both cookie and cookieless resources you’ll have to switch things around a bit.This is because any cookie set on mqcentre.com would be available on sub.mqcentre.com, sandwich.sub.mqcentre.com and so forth. So, to solve this you would redirect all your normal traffic to http://www.mqcentre.com and set cookies there as needed. Those cookies can’t go back up to mqcentre.com and are trapped in the www sub domain. Yay!
Next, you would setup your cookieless domain on either a sub domain like cdn.mqcentre.com or even mqcentre.com.
The htaccess file should live in the root of your main site which is really also your sub domain site. Its only purpose is to redirect any traffic that comes into your cookieless domain (cdn.mqcentre.com for example) that is not going to the /wp-content/ folder back to your regular website. This is done so no cookies can be accidentally set on your cookieless domain by it serving up a regular wordpress web page.
So, your htaccess could look like this…
RewriteEngine on
RewriteCond %{HTTP_HOST} ^cdn.mqcentre.com$ [NC]
RewriteCond %{REQUEST_URI} !^/wp-content/?(.*)$ [NC]
RewriteRule ^(.*)?$ http://www.mqcentre.com/$1 [R=301,L]
…which means…
1st Line – Enables the Apache rewrite engine
2nd Line – If a request comes in for ‘cdn.mqcentre.com’ continue to the next line
3rd Line – If the request is NOT for ‘/wp-content/…’ continue to the next line
4th Line – Redirect the original request to ‘www.mqcentre.com’ including any extra query information like /training, /remote-learning, etc…
Hopefully that makes a bit more sense but if not let me know and we’ll figure it out.
Cookieless domains can take a bit of work to setup but they are soo worth it.
April 11, 2012 at 9:52 am
Hi Daniel,
Thank you for the update – I tried implementing the changes by adding the .htaccess details:
RewriteEngine on
RewriteCond %{HTTP_HOST} ^cdn.mqcentre.com$ [NC]
RewriteCond %{REQUEST_URI} !^/wp-content/?(.*)$ [NC]
RewriteRule ^(.*)?$ http://www.mqcentre.com/$1 [R=301,L]
to the main domain by adding it tot he bottom of the current file.
I then ensured the settings for the url stated : http://cdn.mqcentre.com
The site displayed badly again and then when entering http://www.mqcentre.com the browser tried to load cdn.mqcentre.com.
I am obviously doing something incorrectly.
Luckily I could still access the admin areas to reverse my setting and delete the detail to root directory htaccess to get my site displaying again.
What should I do next Daniel?
April 11, 2012 at 10:27 pm
Quick epilogue for anyone interested. Andy’s site was using the CloudFlare network so even when we did get a cookieless domain setup the CloudFlare network would serve their own cookies. According to http://www.quora.com/CloudFlare/How-can-I-serve-cookieless-domains-with-Cloudflare this isn’t something that can be changed currently. If they do change in the future Andy’s server is already setup to be optimal though. Yay!