Did you know you can dramatically decrease the size and increase the speed of your website using only .htaccess? Automatic compression of resources, ETags and Expires Headers are frequently overlooked items that can greatly improve your website's performance. This article will attempt to explain in non-geek speak what they are, what they do and how to employ them on your own sites. To illustrate the benefits, I have performed several test using two popular Joomla template club templates and the core Joomla template, Atomic, and measured the results with a very cool tool from GTMetrix. Each of the three installations were loaded wtih the provider's sample data. Several tests were performed to quantify the advantages of using htaccess to increase site performance as well as security. The template club demos load significantly more sample data and images than the core Joomla sample and comparing Atomic to commercial templates isn't "apples to apples", however, the results are still quiet interesting.
- The "BEFORE" test is our control group to measure performance "out of the box" and was performed making only two minor adjustments to each of the demos: Renamed the core Joomla htaccess.txt file to .htaccess and set Use URL rewriting in Global Configurations is set to yes. The results across the board were quite poor.
- The "AFTER" results show a tremendous improvement page size, load time, and site speed. This test was performed after replacing the core Joomla .htaccess file with a heftier file, literally and figuratively. The original file is 4KB and the Master .htaccess File is 24KB with comments. No extensions, plugins, gzip, cache or compression was turned on. The results show a 46% increase in Page Speed Grade for Atomic, 34% for Voxel and 25% for Steam.
- The test "W/GZIP" was run after turning on Joomla's built in gzip compression and caching in the global administrator and turning on the System Cache in the plugin manager. There almost no measurable change and I was quite surprised by this result.
- The final test "JCH" was the result of installing the extension plugin JCH Optimize which slightly improved the template club pages, but got us an "A" on our YSlow grade for Atomic. Impressive!
All tests were run on the same Virtual Private Server within one minute of each other.
How is it done? This is where the remainder of this article gets a bit complicated. You must read ALL of the comments and make decisions for your specific needs. Proceed with caution, beyond this place there be dragons!
There are many existing articles discussing site security using htaccess and a great extension from Akeeba Backup called Admin Tools, therefore I will keep this mostly about performance. In the following code there are many comments explaining what each item can do for your site. The primary features of this file that will speed up your site are Etags (Entity Tag), Expires Headers, and automatic compression of resources.
- ETag tells the browser caches that an image is one it has seen before and it does not need to reload it by providing a time stamp and size of the file.
- Expires headers is similar to ETag but can have different expiration dates per file type. We are telling the browser that this file should be refreshed every so many days/weeks/months.
- AddOutputFilterByType DEFLATE "minifies" the source code of your compiled HTML file by removing unnecessary line breaks and spaces. The YooTheme Steam template was reduced from 383 lines of code to only 5
Tips and Tricks
Not all servers are created equal. The default server settings vary from host to host and this means that some of the settings in this htaccess file might throw 500 Internal Server Errors. The best way to narrow down exactly the cause of the error is to remove a chunk of the code, upload, then test the site. If the error persists, replace the first chunk and remove another, then repeat the steps. It's handy to write down the line numbers you've tested until the culprit is found.
RewriteRule ^templates\/your_template_folder/ - [L] ## I found this necessary for @fontface fonts RewriteRule ^templates\/your_template_folder\/fonts/ - [L] ##Yoo Themes Widgetkit and Zoo will not display css styles or images correctly if the cache folder access is blocked RewriteRule ^cache\/widgetkit/ - [L] RewriteRule ^cache\/com_zoo/ - [L] RewriteRule ^cache\/com_templates/ - [L] RewriteRule ^cache\/template/ - [L] RewriteRule ^cache\/plg_jch_optimize/ - [L]
A fantastic article by Jeff Star from Perishable Press called Stupid htaccess Tricks provides extensive documentation of the code and the functions.
This is by no means a comprehensive tutorial, and not intended to be dropped into your Joomla site as a replacement for the standard file without first customizing the code to suit your site and server. A good understanding of the code in this htaccess file is required or you will most certainly break (temporarily) your site. Try this out on a demo install first and remember kids, always, always make a backup.
- Perishable Press
- Akeeba Backup
- Joomla Documents
- JCH Optimize
- CDN for Joomla
- Stupid htaccess Tricks
- Brian Teeman @brianteeman
- Ken Crowder (ChiefGoFor)
- Radek Suski @radeksu
- Fotis Evangelou @fevangelou
- Jon Neubauer @219jondn
- Nicholas K. Dionysopoulos @akeebabackup
- Jon Brown @jsbrwn
- Jeff Star @perishable
- Cindy Montano @montanodesigns
- and more...