I recently tested this site using this online website performance tool: Web Page Test and I thought I’d share some of the results and what I did to improve them. You can also try YSlow however this will generally give you a result that is across a LAN rather than a DSL type connection and I’ve noticed it won’t load JavaScript images – the front page of this site has an image rotator which I know is very heavy but it was completely missed by YSlow.
The test measures a wide range of aspects of the site and then provides the information in a fairly easy to read report (I’d like to see sorting on the tables, hint), it also provides an overview which gives a big picture view of how your site is doing. The overview results before and after optimization are shown below.
| Test | Original Score | Optimized Score |
|---|---|---|
| First Byte Time | C | B |
| Keep-Alive Enabled | A | A |
| Compress Text | A | A |
| Compress Images | B | B |
| Cache Static Content | F | A |
| CDN Detected | X | X |
As you can see the first byte time isn’t great and the static content caching is terrible which surprised me as I’d assumed that would be happening automatically. It turns out though that Joomla relies on Apache (or I suppose IIS if you are into that) to set the cache control headers. Since the Joomla developers can’t know for sure which platform you’ll be deploying on they can’t configure it to set the cache headers.
<grumble>While this is completely true I can’t believe there isn’t a warning somewhere (ok it would be tricky to implement) that tells you that you’re running a site without content caching. Caching is fundamental to good site performance and minimizing bandwitdth usage.</grumble>
The first thing I did was turn on the CSS and JavaScript combiner functionality in the JSN Epic Template. This reduced the number of requests needed to get these types of resource by about 40%. The ideal result is to get it down to just two requests, one for JavaScipt and one for CSS, but that’s highly unlikely if you have external content and modules installed. There are also extensions that can reduce the number of requests required.
The next job was to add static content caching. Since that needs to be done in Apache not Joomla you’ll need to make some changes to your Apache configuration file(s). There are numerous ways you could make these changes and even a couple of different places where the changes could be made. Since there is no way I could cover all the variables I’m got to describe what the changes are and how I made them.
The first thing to do is enable the expires module. I use Webmin to manage Apache so this is as simple as going onto the global configuration section and placing a tick next to the expires module. If you are working at a command prompt you’ll probably want to be in the apache2.conf file where you’ll find mod_expires commented out – comment it “in”. Finally if you are using a hosted Joomla then you can be pretty sure expires is already switched on for you. Phew, now you see what I can’t cover all options.
Next you need to add some directives to tell Apache to add expiry headers to certain types of content. I’m running multiple virtual servers and have access to the virtual server configuration file so the simplest option for me is to place the directives in this file. If you have a hosted Joomla you’ll probably want to place these directives in the .htaccess file in the root of your Joomla install. Add the following lines
ExpiresActive On ExpiresByType image/png "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType image/gif "access plus 1 month" ExpiresByType image/x-icon "access plus 1 month" ExpiresByType text/css "access plus 1 month" ExpiresByType application/javascript "access plus 1 month" ExpiresByType application/x-shockwave-flash "access plus 1 month" ExpiresByType text/xml "access plus 1 month"
These directive set all images, icons, css, javascript, flash and xml to expire one month after they are first accessed. For most sites this is a reasonable time but if you are making a lot of changes to your site (e.g. improving the look and feel through css changes) set the expiry time of that type lower for a while.
These few changes have greatly improved the responsiveness of the website and I’ve already seen an uplift in the number of visitors to the site. Looking at responsiveness is even more important now as Google is taking it into account when ranking sites.