Set up a Joomla CDN with MaxCDN

logo pdb
Ryte.com (formerly On-page.org) is one of the best on-page SEO tool, highly recommended by Joomlaseo.com (see review). Free for 1 account (forever)!!!

Earlier I already published a short video explaining how easy it is to set up a CDN for your Joomla website. A CDN can work great for your site performance. The idea is that your static files, like CSS, Javascript and especially images are not just loaded from wherever your webserver is hosted, but from several datacenters around the world. This ensures that if your wesite is hosted in New York, a user in Singapore can still load the website pretty fast.

The earlier released video is still available here on Youtube. It only describes the basic set-up though. In the mean time I completely rewrote this blogpost (and had it reviewed and approved by MaxCDN!). It now describes in great detail how to set up  MaxCDN with Joomla, using the NoNumber plugin CDN for Joomla. Next to the basics, it also describes how to set up a custom domain, and optimize the SEO settings.

Before you start, it is alwys nice to record your current sitespeed using a tool like Pingdom Tools or Google Pagespeed, so you can compare the before and after situation.

1: Sign up for MaxCDN

Note that I have switched to KeyCDN currently, but MaxCDN is still a great CDN-provider.

CDN tip: KeyCDN

If you need an easy to set up CDN, try KeyCDN (free trial). It's really fast and offers free Let's Encrypt SSL integration. Also you can try it out for free with no strings attached!

First, sign up for a MaxCDN account (you can sign up with a discount here). Then, from the console, click on Zones in the menu. You can set-up multiple types of zones, but for the plugin we will be using we need Pull Zones, which is the first option available anyhow. Then click on Create a Pull Zone. This will open a screen where we can start filling in the data for your website.

max-cdn-joomla-installation

There are just a few parameters to fill in:

  • Pull Zone Name: Just a short name, related to your site 
  • Origin server URL: The full URL of your website, inluding the http://
  • Compression: This switches on G-zip compression for the content on the CDN, switch it on.

There are optional parameters to set a "Custom CDN Domain", but first, we don not fill it in. So, just click the Create button. This will now create the pull zone, while also "pulling" all available static content / files from your website to the CDN servers around the world.

Once you have finished, a CDN URL will be created in your overview, like xxxxxxxxx.netdna-cdn.com". This is what you need for the Joomla plugin. 

If you want, you can also add more advanced parameters for caching, hotlinking, etc., but these settings are all optional.

Web Hosting

2: NoNumber plugin "CDN for Joomla"

Now the easiest way to configure your website to use the CDN is to download the NoNumber CDN for Joomla plugin. I used the Pro-version, but the free version works just as well for most sites. Set-up is really easy:

Install the plugin, go to the Plugin Manager and look up System - NoNumber CDN for Joomla!.

nonumber-cdn-for-joomla

The only thing you have to do is to fill in the earlier recorded CDN URL. You can finetune which files you actually want to be loaded from the CDN, but I usually leave these at their defaults, unless I encounter issues. Now save the parameters, and check if you see any speed improvements. My website already loaded pretty quick, but checking Pingdom Tools it seemed I gained another 25% through the CDN. MaxCDN also has a basic tutorial describing this procedure as well.

3: Advanced configuration: custom CDN domain

In many cases, you do not need to go any further, but there may be cases where more advanced configuration is necessary. The reason could be that you want a cleaner URL:

  • Current URL for images: http://cdn-url-xxxxx.netdna-cdn.com/images/xxxxxx
  • Custom CDN domain URL: cdn.website.com/images/xxxxx

For SEO purposes, this might be better, because the images are now served from a subdomain of your own website, instead of the remote CDN. Google certainly prefers this. So, let's set this up. First, we need to set this in the MaxCDN settings. Go to Settings and for Custom Domains specify a subdomain that you would like to use, including your website domain:

cdn custom domain 

This will create the configuration on the CDN side. However, you will also have to configure it on the host-side. Most of you will use a Cpanel, which makes this pretty easy, but you should be able to achieve this with any other tool provided by your hosting company.

From the Cpanel dashboarrd, go to the Simple DNS Zone Editor:

cPanel X

Now use the settings from MaxCDN to create a CNAME record. First, fill in the desired subdmain (icluding the domain name), and secondly, fill in the full URL as you found it in the MacCDN settings:

cPanel customdomain

4: Update the plugin settings

Once the CNAME is created, both the CDN and your host are set correctly. As the last step, you need to tell Joomla that the location of the CDN has changed. So, go to the Plugin Manager again and look up the CDN for Joomla plugin from NoNumber, and update the setting for the CDN Domain to use the custom domain (in my example cdn.joomlaseo.com).

Well, that's it, a custom domain for your CDN, with clean URLs for your images!

But: if you want it to be perfect, there is till some work to do......

5: SEO settings on the MaxCDN side

On the MaxCDN side, there are some SEO settings as well. The problem could be that Google now finds assets (mainly images) on 2 locations: your site, and the CDN, which is basically a copy of your site. The SEO settings ensure that Google knows there are duplicates, but also it is informed that it should only use 1.

By default, nothing is checked here, but make sure you check them both:

  • Canonical Header: This feature adds a HTTP header to your CDN assets to tell Google where the original file is hosted. This helps your site avoid duplicate content issues.
  • Robots.txt: This feature adds a robots.txt file to the root directory, specific for the CDN, to disallow page crawl by search engines like Google.
  • Custom Robots.txt: This needs to be exactly like the robots.txt file in the root of your site, they should be the same.

Control Panel Pull Zone

As a result of all this, the images will be indexed from the CDN side.  

6: Update your sitemap!

If you used an image sitemap already, make sure the image sitemap now uses the CDN domain as it's source, and not the images folder of your actual domain! If you use a Sitemap extension, it should populate it with the correct URL's. I use JSitemap, and it updated correctly indeed, but if you use another extension, or create it manually, check it out. URLs in the image sitemap should be someting like this now:

<url>
<loc>http://heel-spur.info/kinesio-tape</loc>
<image:image>
<image:loc>
http://cdn.heel-spur.info/images/new/kinesiotape-foot.jpg
</image:loc>
<image:title>kinesiotape-foot</image:title>
</image:image>
</url>

7: Verify the custom domain in your webmaster tools account

The last step: to inform Google that you truly own the subdomain, make sure you verify it in your Google Webmaster Tools account. This should be a 2 second step: If you have verified your current site using an HTML verification file, this file will also have been propagated to the CDN, so there is no need to re-upload it. So, simply ask Google to verify your new domain, and it will be verified.

And that should be it.....

Note that it took me quite a while to figure all this out, so if you have any better ideas, please let me know. I used these references to help me out:

CDN tip: KeyCDN

If you need an easy to set up CDN, try KeyCDN (free trial). It's really fast and offers free Let's Encrypt SSL integration. Also you can try it out for free with no strings attached!

About this site

Joomlaseo.com is fully built and written by Simon Kloostra, SEO Specialist and Webdesigner from the Netherlands. I have also published a book and blogs for companies like OStraining, TemplateMonster, SEMrush and others.