Use Amazon CloudFront to instantly improve the performance of your Joomla web site

Whether you just launched a new Joomla web site or are maintaining an existing one, sooner or later you will look at ways to improve the performance of your site.

Simply put, you want your site to load as fast as possible for every visitor on your site. In addition, load speeds are now an important factor in determining search engine rankings.

There are many blogs, extensions and tools that address performance issues for Joomla but one of the easiest ways to speed up your site is to deliver the images, CSS files and other static elements using a content delivery network or CDN.

Push vs. Pull

Content Delivery Networks come in two flavors: push zones and pull zones. While a pull zone CDN is thought to be slightly less efficient than a push zone, the latter requires you to maintain and regularly update a master copy of your content on a separate server.

As a result, configuring a push zone CDN is very complicated and almost always requires more storage space than a pull zone CDN.

Today I will describe how to use Amazon CloudFront as a pull zone CDN for your Joomla site.

Measure your current performance

In order to assess the effectiveness of your CDN implementation, you should familiarize yourself with at least two tools to measure the speed and performance of your site. I recommend the following, but there are many free and paid tools to choose from.

1. The Full Page test from Pingdom measures the full page load time of your site. Simply enter the URL of your site taking care to enable the ‘Save Test’ option. This way you have an easy record of the load time as you proceed.

tools.pingdom.com/fpt/

Before proceeding, test your site a few times, waiting 5-10 minutes between tests.

2. The other tool I recommend for performance testing is YSlow. This is a very versatile tool from Yahoo that analyzes analyzes web pages based on Yahoo!'s rules for high performance web sites.

YSlow grades your site in various categories and calculates an overall score. You can watch this score change as you implement a CDN on your site. YSlow is available as a convenient add-on for both Firefox and Chrome.

addons.mozilla.org/en-US/firefox/addon/yslow/
chrome.google.com/webstore/detail/ninejjcohidippngpapiilnmkgllmakh

Once you’ve installed YSlow, load your web site a few times and note the overall score. Full details on using YSlow can be found elsewhere.

Choose a CDN

Once you’ve made some initial measurements using the Full Page test and YSlow, you are ready to select a CDN provider. I’ve chosen Amazon CloudFront but you can use any reliable service that supports pull zones.

When choosing a service, first look at your server statistics and try to estimate your monthly bandwidth. With this in mind, comparing costs should be relatively straightforward.

For example, I chose Amazon CloudFront as you only pay for the bandwidth you use. Other services tend to charge in bulk regardless of the amount of bandwidth.

You will need to sign up for and activate CloudFront at Amazon Web Services here:

aws.amazon.com/cloudfront/

Activation can take some time, so before proceeding, wait for an email from Amazon indicating that your account is active and ready to go.

Configure CloudFront

1. Access CloudFront from the Amazon Web Services Management Console here:

console.aws.amazon.com/cloudfront/home

2. Create a pull zone distribution for your site by clicking the Create Distribution button. This opens a popup distribution wizard.

Ensure that the Delivery Method is set to Download and then choose Custom Origin. Enter the URL of your web site in the Origin DNS Name field. When complete, the distribution should be similar to the screenshot below. Click Continue to proceed to the next step.

Distribution Wizard #1

3. On the Distribution Details screen, add index.php to the Default Root Object as indicted in the following screenshot. Ensure that the Distribution Status is Enabled and select Continue to review your distribution.

Distribution Wizard #2

4. When you are satisfied with the configuration, select Create Distribution. The CloudFront service will now generates a domain for you to use. In our example, the domain is as follows:

d30qc2fl13p8n6.cloudfront.net

5. Before proceeding, you must wait for your CDN to propagate worldwide to the CloudFront servers. This usually takes about 15 minutes and the status of your distribution will change from In Progress to Deployed in the CloudFront manager:

CloudFront Distribution Manager

Configure your Joomla web site

With the CDN created and deployed, it’s time to apply the CDN to the static elements in your web site.

1. Start by downloading CDN for Joomla!.

extensions.joomla.org/extensions/14438

Unlike other CDN solutions for Joomla, this plugin requires a pull zone CDN provider.

2. Install the plugin in the Joomla backend administrative area.

3. Add the CloudFront domain to the plugin parameters as shown in the screenshot below and save the change. The other parameters can remain at their default values.

CDN for Joomla plugin

4. Ensure that the plugin is published and now test your site using the Full Page test and YSlow. If all has gone well you will see improvements in both metrics. As you can see below, our test site went from 12 seconds in the Full Page test to about 5 seconds.

Full Page load test from Pingdom

You can also examine the source code of the page you are testing to ensure the images, CSS, javascript and other static elements are being served from your CloudFront domain.

White-glove your CDN

For many users, the performance increase with CDN is sufficient. However, we can go one step further.

Let’s consider a static element on your website such as an image called logo.png. The direct URL for your image before implementing a CDN is as follows:

your-web-site.com/logo.png

After implementing the CDN, the URL for this and other static elements will change to indicate the domain of your CDN provider. In our example above, the image URL would now be:

d30qc2fl13p8n6.cloudfront.net/logo.png

Anyone viewing the source code or monitoring the status bar in their browser would see this CloudFront domain.

In terms of branding, displaying the URL of your CDN provider is not a preferred option. It is more professional to map the CloudFront domain to a virtual subdomain on your site.

With this in mind, a preferred URL for the logo should be, for example:

cdn-media.your-web-site.com/logo.png

As you can see, the logo appears to be stored in the cdn-media subdomain. You can choose any name that is suitable for a URL as long as the name is different from any existing directories on your web site.

1. Once you’ve chosen the name of the virtual sub-domain, head back to the CloudFront interface at the Amazon Web Services Management Console. Edit the distribution created above and enter the following in the CNAME field:

cdn-media.your-web-site.com

Your distributions settings should now look like this:

CNAME Distribution

Save your changes and wait for the updated information to be propagated as described above.

2. To map the CloudFront domain to the domain name of your web site, you must create a CNAME record on your server. In a dedicated hosting environment, you will need to edit the DNS zone records.

For example, in the WebHost Manager common on Unix/Linux servers, the record is created by selecting Edit DNS Zone from the DNS Functions area. Once you’ve selected your domain, add a new CNAME record as shown in the screenshot below.

CNAME record

On most systems, you will need to include the trailing "." when entering the CloudFront domain.

Among the plethora of shared hosting providers there are a staggering variety of ways to achieve this. If you pay $5 per month or less to host your web site, you will likely need to contact your host and have them add the CNAME record for you.

Be sure to provide both the virtual subdomain ("cdn-media" in our example) and the Cloudfront domain.

3. Finally, edit the parameters in the CDN for Joomla plugin. Replace the CloudFront domain with the following:

cdn-media.your-web-site.com

Confirm that everything has proceeded successfully by refreshing your homepage in your browser and examining the source code for the new domain. Full Page tests and YSlow scores should not be significantly different compared to using the CloudFront domain.

Over to you

Although I’ve described these steps in great detail, the process is quite fast once you have completed it the first time. With the exception of the time required for the distribution to propagate, the entire process can be completed in about 5 minutes.

So give it a shot and see how easy it can be to significantly increase the performance of your Joomla web site by adding a CloudFront content distribution network.

Last modified on Sep122011
blog comments powered by Disqus
 
 

Get the latest updates on our extensions