CDN for Joomla and WordPress - HotThemes

Search Form and Social Buttons

HotThemes Logo and Top Menu

What's CDN?

CDN is an abbreviation for Content Delivery Network. This is a service with main purpose to speed your site up throughout the world. The following article describes what's CDN and how to set this up on your Joomla and WordPress site.

First, let's explain in short how CDN service decreases time needed for your site to load. Every hosting provider has servers that can be located anywhere in the world. For better accessibility and faster loading time of your site, it's recommended for your site to be physically hosted near the location from where most of people are accessing it. It's clear why is that so. If a website is hosted in London, UK, its HTML pages or JavaScript files or CSS stylesheets or images will be loaded faster for visitors who are from England (or France, or some other near location), then for those who are from Australia or California. If a website offers some services or goods related to California only, the webmaster should select a web hosting provider that has servers located in California (or Texas, or some other near location). In this case, the webmaster will not worry too much if the website responds slowly for the visitors from Europe (or Russia, or some other far location).

However, there are many websites that operate worldwide. In this case, all the visitors of such websites are evenly valuable for the website owners. They should take care about loading time and optimize it for all parts of the world. This is where the CDN service become interesting and very usable.

How CDN works?

The CDN providers have servers located in all continents, in all important nodes throughout the world interesting for the Internet traffic. When website owners decide to use a CDN service, the CDN provider "takes" all heavy content of the site (images, video, audio, JS files, CSS files, etc.) and copies them onto all the servers located in the various parts of the world. You can guess what's happening next. Even if a website is hosted in Texas, USA, when a visitor located in Melbourne, Australia accesses the web site, all heavy content will be transferred from the nearest location in Australia. The heavy content of every website usually takes over 90% of all website content, therefore, in this case, the CDN service will speed up the site for the visitor from Melbourne. Actually, the visitor will have a feeling the site was hosted somewhere in Australia, not in Texas, thanks to the CDN service!

Advantages of the CDN

Faster loading time of website could improve search rankings because search engines don't like sites that's loading slowly. But, most importantly, it increases usability of the website throughout the world. When any website is slow, visitors usually leave it earlier because they don't want to spend time waiting for all content to load. User experience of the visitors who are accessing the website from a location that's far away from the server location will be increased by using a CDN service.

How to create a zone using MaxCDN control panel

Thanks to the guys from MaxCDN, we have had a chance to test their CDN service on our Joomla sites and also on our WordPress sites. After signing up for the MaxCDN service, you can login to your dashboard and click Zones icon to create your first zone.

maxcdn dashboard

Now, click the "Create Pull Zone" button.

create pull zone

The following screen will be shown:

pull zone parameters

You will see 3 fields. For Pull Zone Name, you can enter one word that describes your zone, in example, your site name without spaces. For Origin Server URL, you should enter your website URL. For Label, you can enter any text that describes your site, so you can recognize it if you have more than one site. Once your zone has been created, you would see it in Content Zones box. This box also contain your zone's URL. This is a link that looks like "zonelabel.yourusername.netdna-cdn.com"

Now, we have a zone which will host our site's heavy files. It's time to setup our Joomla or WordPress site to use this zone.

Setup CDN for Joomla site

In order to setup CDN for Joomla site to use the MaxCDN zone your created previously, you should download a plugin cdnforjoomla developed by NoNumber. This plugin works with both Joomla 2.5 and 3.x. You can install this plugin as usually through the Joomla Administrator's panel. Go to Extensions > Extensions Manager > Upload Package File and click "Choose File" button. Then select the plugin you downloaded and click "Upload & Install" button. The plugin will be installed and automatically published.

Finally, we should configure the plugin to use our zone on MaxCDN. Go to Extensions > Plugin Manager. Find a system plugin named as "System - NoNumber CDN for Joomla!" and click on its name. You should keep the Site Root parameter as "/". For CDN Domain parameter, copy zone URL from the MaxCDN control panel. You can select which file types you'd like to serve via CDN, but it's recommended to keep all files selected. After saving the plugin options, you are done!

cdn joomla plugin parameters

Check your site now! If you see there are missing images and other files, you probably entered the wrong CDN Domain parameter. Please consult MaxCDN support and un-publish the plugin to restore your site.

Setup CDN for WordPress site

In order to setup CDN for WordPress site to use the MaxCDN zone you created previously, you should install an additional plugin for WordPress. Login to your WordPress Dashboard and go to Plugins > Add New. Search for "W3 Total Cache". The plugin will be listed at the top of the search results, so you can click the "Install" link. After installation, click the "Activate Plugin" link. You will see a new menu item in Dashboard: Performance. Go to Performance > CDN. In General section, you can select which files to serve through the CDN.

cdn wordpress plugin file selection

Proceed to the Configuration section. Make sure you are logged in your MaxCDN account (in a different tab). Click "Authorize" button next to "Specify account credentials" field. You will be redirected to MaxCDN site from where you can copy the key. You should see the message "Key is valid" when you paste the key.

cdn wordpress plugin configuration

Now, you should enter your MaxCDN zone URL next to "Replace site's hostname with" field. Click "Test MaxCDN" button to make sure you entered it correctly. Now you can click "Save all settings" button.

Finally, make sure that CDN support is enabled in the "W3 Total Cache" plugin. Go to Performance > General Settings. Scroll down to the section CDN and make sure the CDN checkbox is checked. If it's not, check it and click "Save All Settings" button.

enable cdn for wordpress

Check your WordPress site now. If your settings are valid, it should use images and other files from the CDN, not from your local hosting anymore.

Links, Partners and Social Media