Want to Know Which Digital Cameras Were Sold the Most this Hour?X

CDN Setup Tutorial: How to Create Your Own CDN in 30 Minutes

CDN plays a key role in improving your site performance and hence improving SEO.

CDN CloudYour website’s performance or speed is one of the factors that decides your ranking in search engines, and a CDN plays a vital role here. Website that loads quickly also improves user experience and helps build loyal readership.

Improved site speed is also a good SEO practice. Google as well as Yahoo! suggest in their Performance Best Practices that serving static content from a cookieless domain or using a Content Delivery Network (CDN) helps. This reduces total size of the requests made for a page. In this article, I will explain you how to you implement this in 30 minutes flat.

Using a CDN for a small website or blog would be expensive. So is there a way we can set up our own CDN or a cookieless domain from which we can serve the static content? The answer is Yes! And I will describe the steps to achieve this.

What is Static Content?

Static content is the content such as images, Javascript and CSS files that are served along with your webpage. Server sets cookies for all the HTTP requests. So small cookies get attached to these static content as well. However, since there is no direct user interaction with these resource, they need not have cookies attached. We can reduce the request size by serving these resources from a CDN or a cookieless domain.

What is CDN – The Definition

A content delivery network (CDN) is a collection of web servers geographically distributed across the globe. The server with the fewest network hops or the server with the quickest response time is chosen to deliver the content, thus improving response time. CDN is generally used to serve static content and does not set any cookies. Thus the request size is also reduced.

How to Create Your Own CDN or a Cookieless Domain?

Easiest way is to setup a CNAME record aliasing your static domain to your main domain. You will need register a separate domain name to do this or you can use a subdomain of your domain.

If you do not have a separate domain, create a subdomain using your site’s control panel. Make sure that the subdomain points to your main domain’s root folder.

cdn-sub-domain

Now that you have a domain or subdomain to serve static content, go to the DNS Zone Editor of your website’s control panel and create a CNAME record as shown.

cdn-cname

Add the domain/subdomain you created earlier to the Name/Label/Alias of CNAME record. It should point to your main domain i.e. www.riyaz.net in this case.

If you are using a subdomain, you need to do one more step to make sure that no cookies get set on this subdomain. Two common cookie setters are WordPress and Google Analytics. Rob Flaherty has explained in easy steps how to prevent these sites from setting cookies on your CDN or static subdomain. The section ‘Separate domain or subdomain?’ explains how to get read of the cookies.

How to Serve Static Content from Your CDN?

Now that you have setup a CDN or cookieless domain/subdomain, how do you actually serve your static content from this new location? Do you have to move the static files to this location? Not at all. You only need to modify the references to your static files (images/media/Javascript/CSS/text files etc.) to point to the new location.

e.g. http://www.riyaz.net/images/myimage.jpg will now become http://cdn.riyaz.net/images/myimage.jpg or http://www.mycdn.com/images/myimage.jpg

But this could be a cumbersome task. How do I do this quickly? Simply use the W3 Total Cache plugin from W3-EDGE and enable CDN. Use Mirror as CDN Type.

cdn-w3-total-cache

Now go to CDN Settings of the plugin and set the Configuration parameters as shown below:

cdn-configuration-w3-total-cache

You may leave the other parameters to their defaults.

Thus you have setup your cookieless static content provider.

More reading:

Comments

  1. This blog, “CDN Setup: How to Create CDN to Speed up Your Blog” was in
    fact superb. I am creating out a copy to present my colleagues.
    I appreciate it-Ashleigh

  2. Brendan says:

    Wow – I’ve been putting this on for so long and this is the most simple approach I’ve seen! Thanks for taking all of the tech jargon and giving a straight-forward explanation. I think I’m ready to take the leap. Cheers!

  3. Afsal Rahim says:

    Great post…!

    Thank you for the article..! I’m gonna setup the cdn for my site right away. Thanks again.

  4. matt says:

    I’ve now finally been able to understand AND implement this! Thank you!

  1. Shaahin says:

    Thanks mate, You are awesome..

  2. Yassin Hives says:

    Thanks for the great article it worked for me for finally
    a small question which files should i move to the static domain and what URL they should get ?

  3. Hi there! Do you know if they make any plugins to protect against hackers?
    I’m kinda paranoid about losing everything I’ve worked hard on.

    Any suggestions?

  4. GnanaBoomi says:

    Thanks for the tutorial Riyaz. If I want to host all the images in to the CDN domain, WordPress+W3 Total Cache does not allow me to do so. I can see that the images are getting in to the CDN sub domain, but the posts aren’t reflecting the images properly. I tried even disabling the W3 Total Cache but it won’t work. Any ideas?

  5. Tech Tips says:

    Does this work even if I use CloudFlare and W3cache on my wordpress blog?

  6. Thanks for the tutorial :) !

  7. Rabin says:

    Thanks for the tutorial..I followed all your steps..And my blog’s speed has actually increased now..

  8. Rohit says:

    Thanks for giving me info about cdn setup.

  9. max says:

    About how long does it take for an SE to set up / config a new CDN… not including uploading vids?.

  10. another epic article u r my inspiration keep us blessed with your knowledge:)

  11. Chris says:

    Could you please tell me how i dont have to “move files to the CDN” instead i just point the files “links?” to the new URL?
    If im pointing to the new cdn url, wouldnt i have had to move those files there?

    does W3 Total Cache Detect the users location, and then decide to server from the cdn?

    Thanks for your article

    • Riyaz says:

      thats where mirror comes into play, which automatically picks the image from old location and serves it from the new location…otherwise you may have to setup a redirect.

      • Daniel Johansen says:

        How do I setup the re-direct then? What do I redirect to, and what do I edit ..?

        • Riyaz says:

          Using W3 Total Cache plugin, simply change the hostname in CDN settings as in the screenshot above. The plugin will take care of all redirects.

  12. Dewey says:

    These are some brilliant tips. I’ve been wondering about different ways to speed up my blog and in the process, found out about CDN. Love the simply and well-written instruction – I use WP Super Cache instead of W3TC so had to make small adjustments here and there, but in the end, my site feels so much faster. Thank you!

  13. Thanks for this great tutorial. But I also couldn’t figure out how to set up a cookieless domain. Although there is an option in the plugin itself to set up cookies from the main domain only.

  14. Mark Harris says:

    I used your tutorial to successfully add a cdn url to my website before when i was using cpanel but since I have moved to a dedicated server, it was really painful to figure out all these (I am using virtualmin) but anyways the basic theory was the same and I figured it out. Thanks

  15. Bijay says:

    Riyaz,
    just a simple question. I have 3 domains hosted on a same hosting account and the folder structure is like
    /public_html <—— for main domain
    /public_html/domain1 <————–for domain 1
    /public_html/domain2 <————–for domain 2
    I want the cdn to be setup for domain 1 as cdn.domain1.com . So the question here is would redirecting the "cdn.domain1.com" to the /public_html work or not or do I have to redirect that to /public_html/domain1

    Thanks in advance for the reply

  16. Saki says:

    I have this woking as you said – thank you!

    I have some Questions though:
    1) If the actual content is not in the CDN subdomain, how is it actually served up? It must still be pulling form the main domain folder, no? Magic?

    2) Should there be at .htaccess file in the /cdn directory and what should it say?

    3) Can you explain how to get cdn.domain.com to redirect to domain.com – is that necessary to keep from having 404 crawl errors?

    • Riyaz says:

      Yes..the actual content remains where it is, but is served from the CDN url. For redirection, you may want to use .htaccess file, however if you are on WordPress, you can use W3 Total Cache plugin as explained in this article. Plugin will take care of all the redirection.

  17. i still confuse when can i say f i have a cookieless domain. further enlightenment please.

  18. hmmmm,,,

    look ahmed ,, cdn.riyaz.net = http://www.riyaz.net cuse it will automatically redirect to the main site

    mean when type cdn.riyaz.net n ur browser it will take u to the main site http://www.riyaz.net

    what u need to do is to change the names of directory to EX:img files

    like this

    before cdn

    /images/logo.png

    after cdn it will be like this

    cdn.riyaz.net/images/logo.png

    but my quistion now

    can we put the change of root directory to static files through .htaccess file

    somthing like 301 redirect????

    thx alot for all nd for this usefull article

  19. Ahmad Wali says:

    Another thing I was thinking if I set the directory to home like cdn.riyaz.net to http://www.riyaz.net , isn’t it going to put duplicate content penalty?

  20. Ahmad Wali says:

    I am using customized cpanel provided by my web host. Do every web host provide free cdn? How can I setup CDN for w3 total cache? I am still confused should I redirect sub-domain to main domain?

  21. The Daily DG says:

    Hi Riyaz, this is a very informative guide. I’ve used it to create a “static.” subdomain and so far it appears to work fine. Thanks a lot!

  22. The Daily DG says:

    Hi Riyaz, this is a very informative guide. I’ve used it to create a “static.” subdomain and so far it appears to work fine.

  23. chord says:

    very great and informative post. thanks a lot for sharing it.

  24. This was a very interesting and useful article. I plan on implementing these steps with my own website right away in order to decrease load time.

  25. neil says:

    Hi Riyaz

    Thanks for the post and links to further info – very helpful

    I’ve used your set up for a single domain with a separate domain (not sub domain) as the CNAME (have re-tweeted article)

    I have several other sites which I’d like to apply same technique – can I reuse the same CNAME domain? (all sites share the same IP address, on shared hosting, but have unique domain names)

    Or should I use different domain names (or sub domains of the CNAME domain or of each respective domain), for each site?

    Am I making sense?

    Thanks for any ideas, and Happy New Year!

  26. Hey Riyaz, thanks for the write up, and the links to yahoo and google best practices. I’m a newbie, just going to start a community website at the given URL. Would recommend this type of set up for small websites, specifically forum and community websites?

  27. It’s depend on what country you wan’t your site speed improvement. If you wan’t your site fast load at US so you must use server from US. If you wan’t from India so you must use server from India.

  28. ramp says:

    on hostgator, no cname system available for me… any other solution?

  29. i setup with help of this post, thx…

  30. Saket says:

    Good tutorial Riyaz but would this mean any significant increase in loading of files coming from CDN addresses? Coz CDN actually means to provide files to a user from a server that is nearest to him.

    This isn’t in the case of creating our own CDN on our server.

    • Riyaz says:

      There would be significant improvement in page loading time since the static files would be served from an alternate (subdomain) address. You may not be able to get benefit of serving files from geographically nearest server unless you use cloud based hosting. However, you would still see improvement as files would be served in parallel instead of one after the other.

  31. Azuan says:

    Very interesting..
    nice tips.. i’m still looking any tips to make my blog fast loading..
    maybe i should try this tips..

  32. Niko says:

    Hmm
    I made some progress :-)
    But still not right :-(

    Made a totally new subdomain, and updated W3TC with it and it worked first time in that I didn’t need to physically transfer any files across, so progress yeah!

    But still firebug reports cookies being set on this new domain. Nearly there – but not quite!
    Cookie is listed as
    utma=87976967.1178402482.1279961553.1280232849.1280234375.8; __utmz=87976967.1279961553.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none)

    Does that look like a cookie should look like? Certainly welcome any suggestions – you’ve been great so far!

    • Riyaz says:

      Great!
      This looks like Google Analytics cookies. Check Rob’s article on how to tweak Google Analytics code to not set cookies on the entire domain.

      • Niko says:

        Well I think I need to give up on this one, taking too many of my hours up lol.

        Can’t get it to work but I think it’s W3TC and it’s configuration rather than the tutorial that’s causing it.
        Thanks for all your input though :)

        • Riyaz says:

          In W3TC, on the General Settings page: just select the check box to enable CDN and choose Mirror as CDN Type and save changes. Then on the CDN Settings page under ‘Replace site’s hostname with’ specify your subdomain url. Save changes and you are done.

          • Niko says:

            Yeah I did all that but back to square one again, just getting white boxes where my images should be.
            Error log says something about too many redirects, maximise the number of redirects allowed but I couldn’t find anything on google about it.

            I’ve already taken up so much of this thread – and it’s only a comments page!

  33. Niko says:

    I can now but not initially after finishing the tutorial. At first I was getting white boxes where all my pictures should be so I physically copied all my images to the new subdomain.

    Is that something I did wrong?

    • Riyaz says:

      You dont need to physically copy the files anywhere. Actually when you set up your subdomain, you create only a CNAME and not the A record. Check if any A record is created. If so, change it to a CNAME entry.

      The new subdomain should point to the original domain’s root folder. Now the images or any objects should be accessible via the new URL.

      Then simply put the subdomain name in W3 Total Cache CDN settings and it should work.

      • Niko says:

        Ahhh….
        So I did it wrong then, that’s why it hasn’t worked the way you’ve suggested.

        Thanks so much for your points, I’m going to go back and try again. Will update again here when finished in case anyone else gets the same issues I had!

  34. Niko says:

    Just what I’ve been looking for – an easy to understand tutorial for cookiless domains.

    I’m not sure if it’s worked for my site though as I ‘think’ my new subdomain is still serving the cookies. Followed the extra part you advised on Rob Flaherty’s site regarding wordpress & google cookies.

    Help a newbie – how can I be sure the subdomain doesn’t serve cookies?

    • Riyaz says:

      Try installing Firebug and Pagespeed addons on your Firefox browser and check what cookies are being set. If those are from WordPress or Google Analytics, then Rob’s method should help.

      • Niko says:

        Thanks Riyaz,
        According to Firebug it’s one of my images so I’ve got the feeling I must have done something wrong when going through your tutorial, but what that might be I simply don’t know?

        The only part I got slightly confused over was setting up the subdomain/CNAME as my host has different names for boxes that are shown in your example. Saying that, I think I managed to set them up successfully.

        • Riyaz says:

          Are you able to access the images using the new subdomain url? If you are able to do so, then you have set up the subdomain correctly. Then you can use W3 Total cache to easily replace the old urls with new ones.

          Then you can proceed to get rid of the cookies as Rob explained.

  35. Riyaz says:

    Google Analytics and WordPress are most common cookie setters. Rob has explained in detail how to get read of these cookies in his article – http://www.ravelrumba.com/blog/static-cookieless-domain/. See the section on Separate domain or subdomain?.

  36. arithok says:

    Still confusing, how to make sure there is no cookies in my subdomain?