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?
Simple Website Performance Guide
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 Website/Webpage analysis 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.
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.
All tests are done with real web browsers, so the results match the end-user experience exactly. It uses a bunch of instances of Google’s Chrome web browser to load websites, record performance data, and so on. Tests are done from dedicated Pingdom servers.
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 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 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.
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.
Let’s add the magic content to the htaccess file:
# 1 YEAR
Header set Cache-Control "max-age=29030400, public"
# 1 WEEK
Header set Cache-Control "max-age=604800, public"
# 3 HOUR
Header set Cache-Control "max-age=10800"
# NEVER CACHE
Header set Cache-Control "max-age=0, private, no-store, no-cache, must-revalidate"
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:
# 1 YEAR
# 1 WEEK
# 3 HOUR
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 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
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. 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.
Keep in mind is that there are some extensions available for CSS and JS merge. Test them before apply them to production.