There are many ways to improve your Joomla or WordPress site, but most of these rely on using third-party extensions or messing around with complex configuration that the average user won’t be able to make much use of. There are a few basic optimization tips that everyone can benefit from, such as CSS and JavaScript compression, HTML minification and CSS sprites, but did you know that there are also some server settings that you can use to get a little speed boost too?
What is .htaccess?
.htaccess is a special configuration file which you should be able to dig up in the root of your server directory. A full explanation of its purpose could run for a while, so let’s strip the fat away and tell you that basically, this file lets you control your directory (and subdirectories too, if you stick an .htaccess file in them!). With .htaccess files you can create redirects, rewrite URLs on your website, create password protected directories and other technical things, but you can also use them to improve your site’s page loading speed by taking advantage of some Apache server features.
How do I enable .htaccess in Joomla?
After installing Joomla an .htaccess file is already created, but it’s called htaccess.txt and looks like a regular text file. The reason for this? Compatibility. There’s no guarantee that every server that Joomla is installed on will support .htaccess’ features. Don’t worry though; most modern servers that are built to support Joomla will also support .htaccess; to get started you just need to make sure that the mod_rewrite option is enabled. Interestingly enough, this option is actually controlled by the .htaccess file itself; to get yourself properly configured you just need to rename the htaccess.txt file to .htaccess (remember about the dot that comes before “htaccess”!). You’ll also need to go to your global Joomla! configuration and enable the Use URL rewriting option; this allows your Joomla! installation to use SEF URLs, which are better for search engines and better for your users as they provide a clear hierachy to your site.
No matter whether you use the .htaccess file just to create SEO friendly URLs, or if you want to go deeper and add redirects or site configuration, it’s now enabled and ready to use. If you open the file it shouldn’t actually be empty as Joomla! includes some default rewrite rules with comments.
Gzip compression
Every response your server sends may be gzipped, or compressed, before it is sent to your visitors. Gzip compression helps to reduce the amount of data your server needs to send to your users, which in turn speeds up the load time of your site; the difference may be more noticeable than you realize, as a Gzip-enabled website may transfer between 50–70% less than a website without it enabled.
For example, if we look at the joomla.org website using this tool for Checking GZIP compression you may see how big the difference is:
By compressing this page with GZIP, 76.1% bandwidth was saved. Now you’re probably wondering how to reap the glorious benefits zipping provides; well, it’s surprisingly easy! Just paste these lines into the end of your .htaccess file:
<ifModule mod_gzip.c> mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file .(html?|txt|css|js|php|pl)$ mod_gzip_item_include handler ^cgi-script$ mod_gzip_item_include mime ^text/.* mod_gzip_item_include mime ^application/x-javascript.* mod_gzip_item_exclude mime ^image/.* mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.* </ifModule>
and save your file. If you want to check whether your site is Gzipped after these changes are applied you can use the aforementioned tool.
Use .htaccess to set Expires and Cache-Control headers
If you test you site using Google PageSpeed Analysis tools or some other optimization tools you probably receive some advice to using browser cache to get a speed boost. When a new visitor enters your website all the files like scripts, CSS styles and images are downloaded – there is no way to avoid it and it naturally produces several requests to your server. But what if this visitor comes back to your website later? We can tell the user’s browser to store these files in its cache; then, when the user returns to your site it will reload the files from the cache rather than downloading them all again.
In order to add browser caching to your website, you will need to set the date for when the cache expires. This date is of course flexible, and the optimal and responsible cache time for your site can differ depending on the type of website you are running. However, for most cases the base code provided by Samuel Santos will be more than enough; just copy his code to the end of your .htaccess file as before.
# BEGIN Expire headers <ifModule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 5 seconds" ExpiresByType image/x-icon "access plus 2592000 seconds" ExpiresByType image/jpeg "access plus 2592000 seconds" ExpiresByType image/png "access plus 2592000 seconds" ExpiresByType image/gif "access plus 2592000 seconds" ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds" ExpiresByType text/css "access plus 604800 seconds" ExpiresByType text/javascript "access plus 216000 seconds" ExpiresByType application/javascript "access plus 216000 seconds" ExpiresByType application/x-javascript "access plus 216000 seconds" ExpiresByType text/html "access plus 600 seconds" ExpiresByType application/xhtml+xml "access plus 600 seconds" </ifModule> # END Expire headers
As you might have noticed, in the code it specifies the expire headers time for several different types of files like scripts, images, stylesheets etc…these are probably the most common types that you’ll have on your site.
Browser cache-control
Browser cache control is directly related with the header expires date and according to the Apache documentation provides directives to control and modify HTTP request and response headers. Headers can be merged, replaced or removed. You can use this feature by including this code in your htaccess:
# BEGIN Cache-Control Headers
<ifModule mod_headers.c>
<filesMatch "\.(ico|jpe?g|png|gif|swf)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(css)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(js)$">
Header set Cache-Control "private"
</filesMatch>
<filesMatch "\.(x?html?|php)$">
Header set Cache-Control "private, must-revalidate"
</filesMatch>
</ifModule>
# END Cache-Control Headers
After applying this modification you can check the results out using Chrome Dev tools; you can detect how the files are loaded in the Network tab. Do make sure that Disable cache is not ticked when running this check, as by default the option is enabled. You should notice a massive difference in load time, as most of the files will be loaded from the browser cache, which is much faster than downloading from a remote server. If you take a look at the Size column on the below image you may notice that only a few resources are re-downloaded; with the others there is some text, (from cache), which indicates that the browser pulled them from its local storage.
What else I can do with .htaccess?
.htaccess is very powerful file, so before you go deeper you must promise to only use its power for good! With it, you can manipulate your page URLs, create custom redirects and more. A very useful feature allows you to create a password for a given directory; you could, for example, create another password for /administrator folder in your Joomla installation. In these times of nefarious hacking attempts, additional layers of security and validation are always a boon.
Apart from these options, you can also block particular IP addresses or even prevent your images from being hot linked, displaying a different image if someone steals it and publishes it on their own site. More information on the great features available with .htaccess may be found on this website: Htaccess file overview.
If you don’t know how to implement the above tips, we strongly recommend TidyCustoms.net services, which offers the Page Speed Audit and the Full Optimization Service at a very affordable price.