The Joomla! Community Magazine™

Simple Performance Guide

Written by | Monday, 01 October 2012 07:00 | Published in 2012 October
Performance and optimization for websites are important especially when 20% and above of your visitors come from mobile. Mobile visitors often use slower connections than what is required from your website to load fast. Once a new website is finished, deployed and everything is working correctly, it can slow down as more and more as visitor traffic increases. What can you do in these cases? How can you improve website performance and optimize Apache? Read on for the answers...

This simple guide is translated from the Hebrew optimization guide for Joomla, and aims to improve and optimize standard Joomla website performance. The level of the guide is for beginners and a little above.

The heavy tools

There are some tools that make our job much more simple and systematic. I have used these tools to optimize many websites (including the Israeli community website). You can see the output of those tools to your websites and get immediate alerts.

Google page speed

The Google tool to analyze website performance is the most user-friendly. There is an extension in Firefox and Chrome to use this tool.

Yahoo YSlow

The Yahoo tool for the same purpose, is more appropriate for advanced users. It also available as an extension in Firefox and Chrome. Its results more impressive and contain more details and explanations for each result in reports.

The simple rules

The tools above analyze your website and check a number of simple rules. Here are the basic rules and how you can make the improvements and optimizations. For the more advanced rules you can find more descriptions in the tools. As always, it is very important to make a backup before making any changes, especially if working on a production website.

Gzip

GZip is a method to compress the pages sent to the client by the server. The compression makes the server side work harder, but the compression is effective, and makes the pages much smaller. Enable this option by entering the global configuration in the server tab. In this tab, enable the option for Gzip Page Compression. If the option is not enabled, your Apache server should support it. Consult your hosting service.

Cache

Cache is another simple approach but is really effective for improving performance. Store cached data which is not expired in a well-defined time range. Cache can be run on the server or client side, and you can control both sides.

Server side

In case we are using cache on the server side, it takes time for the server to create the internet page which is sent to the client, meaning the HTML that the browser knows how to display.

Joomla usually performs a lot of operations that are correct for the current request time and correct for a few hours thereafter. In such a case we can make Joomla store the data in cache, instead of processing the entire creation of the page again when the client asks the page next time.

To enable the cache on the server side, you can do it easily in Joomla. Go into extensions->plugins. Search for system - cache, and make sure this plugin enabled. Then go into global configuration->system tab, and mark the cache as ON and Conservative. Conservative is enough for most websites. You should use an aggressive cache only if you have really bad performance. The cache time depends on the frequency of your website content updates. For example, if your website content is updated less than once a day, you can put this value to a few hours, otherwise leave it at the default value. The cache handlers available to you will depend on your hosting service.

Here is my priority for cache handlers usage: memcached*, memcache, APC, file (the first is high, the second is low). I will not explain each, because that is out of the scope of this guide. Google each one for more info, if you’re curious.

Client side

In the client side optimization we are mainly focused on images, css and javascript files, which download each time you visit a web page. Because most of those files are only changed occasionally, we can instruct the client to cache those files. To enable the client side cache, we will update the htaccess file (found in the root directory of Joomla). This will declare how the client should store the files in its cache, instead of downloading them on each visit.

Let’s add the magic content to the htaccess file:

# 1 YEAR
<FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav)$">
Header set Cache-Control "max-age=29030400, public"
</FilesMatch>
# 1 WEEK
<FilesMatch "\.(jpg|jpeg|png|gif|swf)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
# 3 HOUR
<FilesMatch "\.(txt|xml|js|css)$">
Header set Cache-Control "max-age=10800"
</FilesMatch>
# NEVER CACHE
<FilesMatch "\.(html|htm|php|cgi|pl)$">
Header set Cache-Control "max-age=0, private, no-store, no-cache, must-revalidate"
</FilesMatch>

Each directive tells the client to store file types in a different time frame.

The above declaration uses an Apache extension called mod_header. Alternatively, you can use another extension, called mod_expires and it contains other directives:

ExpiresActive On
ExpiresDefault A0
# 1 YEAR
<FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav)$">
ExpiresDefault A29030400
</FilesMatch>
# 1 WEEK
<FilesMatch "\.(jpg|jpeg|png|gif|swf)$">
ExpiresDefault A604800
</FilesMatch>
# 3 HOUR
<FilesMatch "\.(txt|xml|js|css)$">
ExpiresDefault A10800"
</FilesMatch>

If you don’t know which extension is installed on your host, ask your hosting service provider.

More about Apache client caching directives can be found here.

Compressing

In addition to the Gzip compressing we did earlier, we can add more compressing of text files, such as javascript and css. This action will compress the text files which are sent to the browser. Just add the next directives to the same htaccess file:

# compressing of files
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

Note that the Gzip compresses HTML, and this one will compress the includes of the HTML (such as js, css and others). In addition, this method uses the mod_deflate extension of Apache. Make sure that you have this extension installed.

Minify & Merge

The last method we will use is the reduction of CSS and Javascript files. You will probably ask, what is Minify & Merge reduction?

CSS and JS files are commonly shown line by line, which makes the programmer's life easier and makes building websites more effective, and allows for comments to debug. However, the browser, which is stupid, can use the same file with one line only while concatenating all lines to one line and without comments (which are useful only for human beings). This minify reduction saves file size and makes downloading much faster. You can probably calculate how few KB's can save a lot, but, if you start to have 10000 concurrent users it saves hundreds of megabytes of downloading to your server (check Google source code for example).

Compared to minify, merge reduction unifies all js files into a single js file, and does the same for css as well. Again, the sounds like a stupid action, because the download size is the same, but for each file request the server uses resources and downloading 10 files is not same as one file, because of the resources the server must invest in each request. The merge action saves resources and optimizes the client process of receiving data from the server.

For both of these actions, there is a category in the JED. Take into account that this action is for advanced users and you should use it especially when you have concurrent high-load users.

* Disclosure: I’m the developer who contributed the memcached handler for Joomla, which is available since Joomla 3.

Read 22637 times
Tagged under Administrators, English