How to Implement Self-Hosted CDN for Site Speed

Speed up your website with CDN

CDN is an acronym for content delivery network. While a self-hosted CDN defeats the purpose of the acronym because it is no longer a network, there are advantages it can bring to further optimize your site speed.

This entry is the third installment to our series Ultimate Guide to Site Speed Optimization – the series is a complete run-through of what I did to optimize SEO-hacker.com’s site speed. Lowering it down to a minimum.

What Exactly is a CDN?

In simple terms, a CDN is meant to distribute your static content to your users from the nearest possible data center to their geographic location. This makes loading the heavy stuff quicker because it is retrieved from the nearest place. It keeps the data’s travel time to a minimum.

Other effects of CDN is that it lowers down your server’s bandwidth usage because you’re feeding a lot of your static content straight from the CDN’s servers. You are also lowering down the processing memory being used by your server/s because the static content is processed and fed through your CDN.

Now that you know that a CDN is served from several different servers (depending on which one is the closest to the user), what then is the purpose of a self-hosted CDN?

Advantages of a Self-Hosted CDN

To put things in an extremely simple way, the main advantage of a self-hosted CDN is that it will enable your users to draw your static media files from another, potentially cookieless server. This additional pipeline will ease the burden of processing from your main server and allows them to download all your files simultaneously.

Here’s an illustration:
advantages-self-hosted-cdn

 

How do you Set-up your Self-Hosted CDN in 11 Steps

For this tutorial, I’ll be using the local server’s subdomain as the origin of the CDN files. First, off you’ll need the W3 Total Cache plugin. Download it here.

1) Turn the CDN feature on in the General Settings section and select Generic Mirror in the CDN Type

CDN Option

2) Next, go to your W3 Total Cache’s CDN settings. Here’s a screenshot of what options I turned on and which ones I left turned off in my CDN options

CDN Options

As much as possible, I want the static files such as image attachments, theme files, CSS and JS  files to be hosted in the CDN so I ticked them on.

3) Change your CDN Hostname to your self-hosted CDN’s address. In this case, I used SEO-Hacker’s subdomain.

CDN Hostname

4) Login to your website’s cPanel and go to the subdomains section

Cpanel Subdomains5) Fill up the Create Subdomain form with whatever you want to name your CDN’s subdomain. I named mine as cdn.seo-hacker.com

CDN subdomain6) Make sure that you assign the CDN subdomain to your public_html folder so that it will function as a Generic Mirror

CDN subdomain27) Go to your cPanel’s Advanced DNS Zone Editor

Cpanel Advanced DNS Zone Editor8) Edit the CNAME of the two new subdomains that you created. Click the edit button

cname edit9) Change the Type to CNAME and then put your domain name in the CNAME, thus completing the Generic Mirror settings

cname change10) Next, go to your W3 Total Cache’s CDN settings and click on Modify Attachment URLS at the topmost part

Modify Attachment URLs

11) Modify the Attachment URL to your subdomain and click on the Start button

Modify Attachment URLs box Wait for it to load. Close the window and voila! You have your new self-hosted CDN!

From now on, your website should be loading your static files from your subdomain. This will help unclog your pipeline from users siphoning all those static files from your main DNS.

Resources:

http://wordpress.org/support/topic/self-hosted-cdn-benefit-of-using-another-server-as-opposed-to-a-sub-domain

http://wordpress.org/support/topic/w3-total-cache-self-hosted-cdn-how-to-setup-the-subdomain

From Zero to a Thriving SEO Company, We're sharing everything on our Journey to success!

You'll want to get in. Promise.

We guarantee 100% privacy. Your information will not be shared.

Comments

  1. Aabid says

    That is impressive sean so if I have a hosting provider I can create a sub domain and simulate it as a actual CDN that’s a pretty nasty trick i guess. Always though apart from using my server as a hosting provider what else I could do, looks like I just found the answer that I never found. Much appreciated.

  2. Neel says

    Yeah !! Website development and SEO is my favorite subject. This really helps me how to do deal with actual CDN for my website. Thank you very much for sharing.

  3. Tim Bonner says

    Hi Sean

    I like the idea of a self-hosted CDN but I’m still on a shared server at the moment.

    I also use WP SuperCache instead of W3 Total Cache as I had issues with CommentLuv when using the former plugin on my site.

    I’m guessing it wouldn’t be a good idea to put this in place on a shared server so I’ll have to pass on a self-hosted CDN for now!

    • Sean says

      Hi Tim,

      A self-hosted CDN has limited help now that I’ve looked further into it. Jay Jersey from the SEO Hacker Facebook group taught me some technical stuff on how to implement a real cloud-hosted CDN. I’ll publish it when I get the hang of doing it so that you guys would be able to replicate it for your site. I think a self-hosted CDN can be done in a shared server though. You should at least try it ;)

        • h3sean says

          Hi Martin,
          It does have some value if you have a fast server (dedicated or cloud). But if you’re under shared hosting, it might eat up processing speed or memory and cause an error. So the advantages and disadvantages are contextual.

  4. Imran says

    I love to do SEO and as i am just learner, i love your blog and this CDN article is more than awesome, Going to implement this on my site, hope to get more result.
    Thanks so much

  5. Tony Nguyen says

    Hi, Thanks for great post! I’ve applied your method and now I got an error: After configuring a seft-hosted CDN as your guide, I found that my site lost its design and became pure text only. Have you ever met this situation ?

    Thanks,
    Tony

    • Sean says

      Tony,

      You probably missed out on the modify attachment urls. Try to replicate what I did in the screenshots correctly and I’m positive it should work for you. :)

  6. h3sean says

    Hi Maria,
    I think that it could if you have the same plugin. However if you don’t, I’d advise you to use a CDN service such as MaxCDN – or if you’re the more advanced user, you can try using bitnami which runs on Amazon.

    • h3sean says

      Vance,
      That is especially intriguing. Have you modified the URLs already? I can almost swear I outlined the steps thoroughly.

      • Vance Hallman says

        So all I see on my site when I was testing is the text, the social icons and the embedded video’s, no images. The image frames are there and there is a small shaded icon in the upper left hand corner of each. I know I have seen this behavior before years ago but I do not remember what the solution is. What is TRULY mind-blowing is that when I hover over the frame I see the cdn address for the image in the lower left hand corner of the post (which is where I should see that) and the URL is CORRECT. it points at the CDN and I double checked the paths by FTPing into my server to double check the paths.

        Btw, I consider myself to be a master of W3 Total Cache, especially on shared hosting with CDN’s, although this is a new trick for me.

        If it helps I got the EXACT SAME result by setting up an FTP CDN, so maybe we are missing a clue there somewhere. And yes I tried it on IE 11 (windows 81), Safari, Firefox and Chrome (all latest editions).

          • h3sean says

            Vance,
            If you would allow me to take a good look at your stuff, that would be awesome and I would be able to check it out hands-on. Email me if you’re up for this. It’s a win-win if we get to know what missing step I left out here and I get to fix your site too.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title="" target=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>