Performance and optimization of a websites is very important aspect. After a website is developed and deployed it must be optimized. So how it can be done? 

Tools to identify

1. Google page speed - This tool analyze the website performance ina very user friendly way. It is available as an extesion for firefox and chrome.

2. Yahoo Yslow - It is available as an extension for both Firefox and chrome to identify the causes and suggestions to optimize the given 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 cache - 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. 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.

Client side cache - 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.

# 1 YEAR
<FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav)$">
Header set Cache-Control "max-age=29030400, public"


# 1 WEEK
<FilesMatch "\.(jpg|jpeg|png|gif|swf)$">
Header set Cache-Control "max-age=604800, public"


# 3 HOUR
<FilesMatch "\.(txt|xml|js|css)$">
Header set Cache-Control "max-age=10800"

# NEVER CACHE
<FilesMatch "\.(html|htm|php|cgi|pl)$">
Header set Cache-Control "max-age=0, private, no-store, no-cache, must-revalidate"

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

# 1 WEEK
<FilesMatch "\.(jpg|jpeg|png|gif|swf)$">
ExpiresDefault A604800

# 3 HOUR
<FilesMatch "\.(txt|xml|js|css)$">
ExpiresDefault A10800"

Compressing

In addition to the Gzip compressing, 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

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.

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.

There are a wide variety of tools being available on JED which can be used to perform all or any of the above.