Joomla SEO | Use a CDN (Content Delivery Network)

A Content Delivery Network is a network of servers around the world that can be used to offer resources to users without having to pull them from the source server which is limited to one location. This makes the use of a CDN especially usefull for websites that operate globally, like the Joomlaseo.com website, which attracts users from all continents:

Especially if you suspect your site is often accessed from developing countries, a CDN becomes even more efficient, as the infrastructure is often less advanced. Even if you think your website is very fast, it may not be the case in say, Gambia.

But even sites that only target a specific country will always have users that travel and want to access the site from abroad. Also, countries like the USA, Russia, China, etc. are too large to be served efficiently from just one location. So, enough reasons to implement a CDN, especially as it is does not have to be very difficult or expensive.

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!

What does a CDN do?

A CDN fetches the files of your website, and distributes them to datacenters all over the world. Based on how you set it up, the static files will be served from the CDN, which will usually be:

images
css files
javascript files
local webfonts
etc.

Anything non-static, like the ever-changing content of your articles, i.e. the HTML files, should not be fetched from the CDN. Often, 75% of the size of your website will now be pulled from the nearest server of your CDN provider.

When you implement a CDN on your website, you basically configure the static content to be pulled from the CDN.Let's look at an example for an image. Without a CDN the image would be fetched as follows:

<img src="/images/seo-joomla.jpg." />

After the CDN is activated this will be:

<img src="/https://cdn-url-xxxxx.netdna-cdn.com/images/seo-joomla.jpg" />

You clearly see the difference: instead of the relative URL that would pull the image from the website's domain, it is pre-pended with the domain of the Content Delivery Network. For URLs for your CSS and Javasscript files it does not matter too much that these URLs are a bit long and funny, but with a reputable CDN host you can often fix this. You are then requested to configure a CNAME record on your domain, say cdn.joomlaseo.com, and your files then seem hosted on a subdomain of your own site instead of directly on the CDN. If ths sounds complicated, just forget it, usually you should be fine without any issues. However, if you want to configure your CDN with a custom domain, I have a very in-depth blogpost about this.

Implementation of a CDN

If you want to use a CDN with Joomla, usually you will have to go through 2 major steps:

Sign up with a CDN service. There are many, some expensive, some cheap or even free, or services that only bill used bandwidth, which make them nice for smaller sites.
Configure the CDN in Joomla, usually using an extension.

As an alternative, you can choose a webhost that offers CDN functionality through their Cpanel. Siteground.com is an example, where you can switch on the CDN without any configuration in Joomla.

CDN Providers

When selecting a CDN, check their reputation in the forums, their price, and any possible conflicts they could have with Joomla. Also check any requirements they might have. An example is CloudFlare, which forces you to have a website accessible through www-. Much used services are:

KeyCDN: Easy to implement and quite cheap for smaller sites ($0.04 for the first 10TB). Recommended, and used on this site.
MaxCDN Content Delivery Network: Fast, and they also offer free shared SSL.
Cloudflare: Recommended, and very easy to set up, especially for Siteground customers (they can use it for free!)
Amazon Cloudfront
CacheFly
EdgeCast
CDN777

For most providers, some basic configuration is usually needed on the CDN side. You will usually have to enter your site first, plus some additional settings. Some of these settings will then have to be entered in the plugin settings of the plugin that you choose in Joomla.

An exception is the free Cloudflare integration for Siteground customers. In this case, you can activate the CDN from within the Siteground Cpanel settings. Click the Cloudflare button, enter you email for a free Cloudflare account, and your CDN is immediately ready, without any further configuration (see their tutorial).

CDN plugins

Currently a number of CDN Extensions are listed in the JED. Usually you need one of these to set up the integration:

CDN for Joomla by NoNumber: For any CDN that supports pull-zones
JomCDN by CorePHP: Only for Amazon S3 / Cloudfront and MaxCDN
JA Amazon S3: Specifically for integration with Amazon S3 / Cloudfront

An extension that might not pop-up immediately when you look for plugins to support CDN's is Jbetolo. Between all the other tools to enhance website speed, it also offers CDN functionality in one of the advanced tabs, though currently limited to Amazon Cloudfront and MaxCDN. Set-up for all these plugins is usually pretty easy to do, depending on which one you choose.

How to implement the different CDN's

Now that we covered the basics of CDN's, let me show you quickly how to actually implement the different providers in Joomla. The most used ones are MaxCDN, Cloudflare and Amazon Cloudfront. I will discuss the basics of these 3:

MaxCDN tutorial

Here on the Joomlaseo.com site I use the NoNumber solution with KeyCDN, see an extremely detailed tutorial on that in our blog about setting up a Joomla CDN with NoNumber. This tutorial also describes how you achieve a nice custom domain for your URLs.

Video on setting up MaxCDN with Nonumber

Also check a Youtube video on setting up the CDN:

Tip: Webfonts on your CDN

In some cases, you may have issues with your webfonts not being shown. Some browsers may refuse to embed the font when it's coming from a 3rd party URL because it's a security risk. In cases like this, use the code in this MaxCDN blogpost to allow them.

Cloudflare tutorial

Amazon Cloudfront tutorial

This is the only one that I did not create a separate blogpost for, so let me discuss it shortly here. First, go to console.aws.amazon.com/cloudfront and sign up. You will then see an empty dashboard with a big blue button called Create Distribution:

Make sure you choose Web-distribution, not RTMP. Then you will see a screen with a lot of settings, which looks a bit intimidating. However, the only setting that you need to fill in is the first field for your domain, the rest is either optional, or will be filled in for you if you click the Create Distribution button at the bottom of the page:

You will then see your domain in the list. The status field will show In Progress for 10-15 minutes before the files propagate to the AWS network. In the mean time, record the Domain Name, which usually looks like this: dygofnoea4ttg.cloudfront.net or something like that.

Now it is time to go to Joomla. Make sure you have the NoNumber plugin CDN for Joomla installed and check the parameters. The only thing you have to fill in is the CDN Domain:

Now your set-up should be complete and your static files will be served from the AWS Cloudfront network.

KeyCDN tutorial

Implementation of KeyCDN is also very easy: create an account with a subscription (they're pretty cheap) and sign to your account. Then click the Zones option. If you don't have zones already, you will immediately get a screen to add one. Just fill in a random name for the zone and the URL. Keep the default for pull-zone, this works the best for Joomla. For advanced settings like SSL settings and finetuning you can check the Show Advanced Features button:

Then you will see the zone activated, with a green statusbar while the files from your site are propagating over the network. This should only take a few minutes:

Note the Zone URL that has been created. Record or copy this. Then install CDN for Joomla from NoNumber and enter the recorded Zone URL in the CDN Domain field. That's basically all, as simple as that.

It is also quite easy to use a custom domain like cdn.example.com. Check the MaxCDN tutorial for some details about how to set this up on the host side.