Setting Up CDN On Custom Made WebSites (i.e Without any CMSs)

Nishant Arora 11/Dec/2011
Facebook
Twitter
LinkedIn
Reddit

Recently I bought a MaxCDN account, they are offering for something around $39.95/TB/Year, not that much, but the service and benefits they offer... awesome!... So what exactly is a CDN, I won't explain you that part because this video does a much better job:

Okay so once you are through, you will find various plugins to get this setup on CMS like wordpress, joomle, magento, etc, but when it comes to setting it up on a custom website, it can be pretty much a pain in your arse!... :(

Pity!... so lets not worry, and see how to get this done, I will be using MaxCDN settings and feel other providers will be having more or less the same features. You will have your website running on CDN in next 15 minutes

  1. Set the pull zone for the website, yes setting up the pull-zone will initiate the CDN to copy all the slow loading elements (like css, images, js and other components), so how to do this, there is decent tutorial given here. still I would like you to have the following settings:Pull Zone Name : Any Name
    Origin Server : http:///
    Custom CDN : cdn.yoursite.com
    Label : any thing
    Compression : Enabled
  2. You are done, with initiating the server, you will be issued a temporary URL by the CDN host. now you will need to implement the cdn.yoursite.com to work, for which, just go to your hosting control panel>DNS Zone Editor>Add new DNS record for yoursite.com, with following settingsName: cdn.yoursite.com
    TTL: xxxxx (check with your host)
    Type : CNAME
    CNAME:  Temp URL issued by the CDN host.
    once done, check manually that contents at the temp URL and cdn.yoursite.com is same.
  3. Now just open your website source code in your favorite editor notepad++ or emacs will do fine, and you basically change all the static content to load dynamically from the CDN. So the static content on your website like
    <img src="/<dir1>/<dir2>/img.ext">
    
    changes to
    
    <img src="http://cdn.yoursite.com/<dir1>/<dir2>/img.ext">

    so we are now loading from the CDN easily and dynamically, your CDN dashboard will start showing you statistics almost immediately, make sure you change the sources of all images, JS, CSS (at least) so that they will help performance by leaps and bounds. Will try to post soon about high level integration.

Please used a page load testing tool to analyze the difference, preferably http://gtmetrix.com/ it works great! and use a coupon from here to get 25% off if you are ordering maxCDN

Cheers!