Optimize your site with .htaccess

Whether you want to optimize your site for heavy traffic, to deny access to files or directories or grant special privileges, the .htaccess file, most commonly found in the root folder of your domain, can do all of that and more! It doesn’t matter if it’s a vanilla install of WordPress, phpBB, OsCommerce or your own handy dandy coding, the .htaccess file is often left barren of many of the features you might want or, better yet, need to deploy your website effectively.
Take, for example, the default .htaccess for WordPress:

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

While this may indeed be sufficient for some needs, it hardly adds enough juice to sites that are beginning to generate traffic. But, before we get started on this tutorial, I highly suggest you download Google’s Page Speed plugin for Firefox (it requires the Firebug plugin, so go ahead and install it first). Now, make sure all the plugins are enabled by going to the menu in Firefox and clicking Tools > Add-ons. After you’ve done that, point your browser to the URL of your site. In the Tools menu, click Firebug > Open Firebug (you can also push F12 to load the plugin via the keyboard shortcut).

Once the window has loaded, make sure Firebug is opened to the Page Speed tab. If it is, push Analyze Performance and wait for the status bar to come to completion. This usually take 10-25 seconds to finish. Now what shows up? If you have a run-of-the-mill install, there’s likely plenty of problems showing up in the Performance summary. No need to worry, most of the errors are easily fixable.

First, let’s go to the .htaccess file in the root of your blog or other page. Don’t know where it is? Fire up your favorite FTP client and point it at your sites FTP location (e.g. ftp.mywebsite.com). [Note: I personally use the FireFTP plugin for Firefox, you can find it easily by going to Tools > Add-ons. Click Get Add-ons and search for FireFTP].  Login with the username and password assigned to you by your hosting provider and you’re good to go. If you’re using FireFTP, you’ll need to open it up by clicking the icon in the Firefox menu bar or going to Tools > FireFTP.

The .htaccess file is hidden by default, as well it should be. Do NOT try to un-hide it. Simply allow your FTP client to view hidden files. If you’re using Nautilus for Gnome or a similar built-in FTP client for Linux, you can easily do this by pushing Ctrl + H, or in FireFTP click Tools, Options and make sure Show hidden files is checked. If you’re not using Nautilus or FireFTP, you’ll have to search around in your FTP client’s options or preferences dialogs. For example:

Now that we’ve taken care of that, browse to the install folder of your site, such as ftp://ftp.mysite.com/mysitefolder. Once there, you should be able to view the .htaccess file. Great! At this point I should mention that the Nautilus FTP client has one feature that can be very great and very bad. Instead of having to download the file, then modify it and upload it back to the site, you can simply right click the file and open it with your favorite viewer, such as gedit. Once you’re done, you simply push Save and it will automatically save the modified copy to your website. This is great for streamlining the upload process, but PLEASE, always back up ANY files you are modifying. Make a copy of the original file on your computer and, to be sure, make another copy on the website, but name it .htaccessback.

So now that we got all of that out of the way, let’s edit the darned thing already! As I said earlier, you will often find the .htaccess file will be pretty sparse. This is one of the reasons you may have generated so many errors with the Page Speed plugin. The primary error we’re looking for right now is Leverage browser caching. Utilizing browser caching will force the browser being used by anyone viewing your site to cache files locally on their computer for a given amount of time, thus reducing the load on your server. This is a fairly simply modification, and without getting too technical, simply paste the following code below any existing blocks of code in the file:

#Begin Cache
<IfModule mod_headers.c>

#CACHE YEARLY
<FilesMatch ".(ico|gif|jpg|jpeg|png|flv|pdf)$">
Header set Cache-Control "max-age=29030400"
</FilesMatch>

#CACHE MONTHLY
<FilesMatch ".(js)$">
Header set Cache-Control "max-age=2419200"
</FilesMatch>

#CACHE WEEKLY
<FilesMatch ".(js|css|swf)$">
Header set Cache-Control "max-age=604800"
</FilesMatch>

#CACHE EVERY 45 MIN
<FilesMatch ".(html|htm|txt|php)$">
Header set Cache-Control "max-age=2700"
</FilesMatch>

You probably noticed there are file extensions located inside parenthesis separated by bars under each section. These specify how each file type will be handled. While the code above is good for most applications, you might want to adjust which files are under each section to suit your site. The max-age setting determines how long the file types should be cached locally on the browser. The time is measured in seconds and should not be set above 29030400, which is approximately one year [Tip: you can go to Google and type something along the lines of 6 months to seconds, and it will do the conversion for you quickly; use only whole numbers].

At this point, go ahead and save the .htaccess file, upload it to your site and make sure everything works. If you get a page that says HTTP Error 500 Internal Server Error, you’ve done something wrong and should replace the .htaccess file with the copy you should have backed up earlier. This is why you should only make a single change, save, and then check the site. If, for example, you paste in 100 lines of code that do 10 different things, you will have to hunt around to figure out which block or line of code is giving you problems. The .htaccess file is very, very picky. Trust me on this one.

If everything worked as expected, open the file back up and place the following block of code below the block you just added:

<IfModule mod_gzip.c>
mod_gzip_on       Yes
mod_gzip_dechunk  Yes
mod_gzip_item_include file      .(html?|txt|css|js|php|pl|jpg|png|gif)$
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>

If your hosting provider supports it (it should if your hosting service supports PHP), the above code will enable all of the specified files to be compressed. Obviously, when files are compressed they are smaller and this leads to less strain on the host and thus faster pages loads. Now say it with me: Save, upload and check. If your page isn’t working, you need to go back and see what went wrong. Luckily you backed up, right?

Now that that’s all done, go ahead and close your browser then open it up and navigate back to your site. Run the Page Speed analyzer again and see how you do. Progress? Woohoo! Don’t worry if your site doesn’t come out with high scores in every category, caching and compression are just two of many ways in which you can speed up your site. Be sure to check back to learn how to compress and optimize your images and scripts. Once you’ve applied all the tricks, you’ll be pleasantly surprised at how well your site will start to perform.