7 minutes reading time (1438 words)

.htaccess File That FREAKIN Works!

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.

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.

  1. 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.
  2. 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.
  3. 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.
  4. 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!

 

 

site-performance-test

 

 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.

  1. 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.
  2. 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.
  3. 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
########## Begin - ETag Optimization
## This rule will create an ETag for files based only on the modification
## timestamp and their size. This works wonders if you are using rsync'ed
## servers, where the inode number of identical files differs.
## Note: It may cause problems on your server and you may need to remove it
FileETag MTime Size
########## End - ETag Optimization
########## Begin - Automatic compression of resources
# Compress text, html, javascript, css, xml, kudos to Komra.de
# May kill access to your site for old versions of Internet Explorer
# The server needs to be compiled with mod_deflate otherwise it will send HTTP 500 Error.
# mod_deflate is not available on Apache 1.x series. Can only be used with Apache 2.x server.
# AddOutputFilterByType is now deprecated by Apache. Use mod_filter in the future.
AddOutputFilterByType DEFLATE text/plain text/html text/xml text/css application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript
########## Begin - Optimal default expiration time
## Note: this might cause problems and you might have to comment it out by
## placing a hash in front of this section's lines

	# Enable expiration control
	ExpiresActive On
 
	# Default expiration: 1 hour after request
	ExpiresDefault "now plus 1 hour"
 
	# CSS and JS expiration: 1 week after request
	ExpiresByType text/css "now plus 1 week"
	ExpiresByType application/javascript "now plus 1 week"
	ExpiresByType application/x-javascript "now plus 1 week"
 
	# Image files expiration: 1 month after request
	ExpiresByType image/bmp "now plus 1 month"
	ExpiresByType image/gif "now plus 1 month"
	ExpiresByType image/jpeg "now plus 1 month"
	ExpiresByType image/jp2 "now plus 1 month"
	ExpiresByType image/pipeg "now plus 1 month"
	ExpiresByType image/png "now plus 1 month"
	ExpiresByType image/svg+xml "now plus 1 month"
	ExpiresByType image/tiff "now plus 1 month"
	ExpiresByType image/vnd.microsoft.icon "now plus 1 month"
	ExpiresByType image/x-icon "now plus 1 month"
	ExpiresByType image/ico "now plus 1 month"
	ExpiresByType image/icon "now plus 1 month"
	ExpiresByType text/ico "now plus 1 month"
	ExpiresByType application/ico "now plus 1 month"
	ExpiresByType image/vnd.wap.wbmp "now plus 1 month"
	ExpiresByType application/vnd.wap.wbxml "now plus 1 month"
	ExpiresByType application/smil "now plus 1 month"
 
	# Audio files expiration: 1 month after request
	ExpiresByType audio/basic "now plus 1 month"
	ExpiresByType audio/mid "now plus 1 month"
	ExpiresByType audio/midi "now plus 1 month"
	ExpiresByType audio/mpeg "now plus 1 month"
	ExpiresByType audio/x-aiff "now plus 1 month"
	ExpiresByType audio/x-mpegurl "now plus 1 month"
	ExpiresByType audio/x-pn-realaudio "now plus 1 month"
	ExpiresByType audio/x-wav "now plus 1 month"
 
	# Movie files expiration: 1 month after request
	ExpiresByType application/x-shockwave-flash "now plus 1 month"
	ExpiresByType x-world/x-vrml "now plus 1 month"
	ExpiresByType video/x-msvideo "now plus 1 month"
	ExpiresByType video/mpeg "now plus 1 month"
	ExpiresByType video/mp4 "now plus 1 month"
	ExpiresByType video/quicktime "now plus 1 month"
	ExpiresByType video/x-la-asf "now plus 1 month"
	ExpiresByType video/x-ms-asf "now plus 1 month"

########## End - Optimal expiration time

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.

If you find css or javascript files are not performing properly, use a tool like Firebug or Chromes element inspector to see what errors are being reports. 403 Forbidden errors will typically mean that you have blocked access to a folder or file type. Look for the path of the file in the error and create a RewriteRule to allow access to that folder as seen in the examples below. It has been my experience that RocketTheme templates need access to the "fonts" folder. YooTheme templates and/or Widgetkit/Zoo need access to their respective cache folders.

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.

Disclaimer

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.

Resources

Credits

  • 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...
0
Leadership Highlights - June 2012
The Ultimate Marketing Guide For Joomla Extension ...
 

Comments

Already Registered? Login Here
No comments made yet. Be the first to submit a comment

By accepting you will be accessing a service provided by a third-party external to https://magazine.joomla.org/