Obviously everyone needs .htaccess files for different reasons, but over the years I have noted a few things that generally seem to sneak themselves in - so I decided to draw up a list of things you might want to consider before go live on a site that relate just to .htaccess files.

A good lot of these are covered by the HTML5 Boilerplate, so if you are looking for a quick win you could always download it.

The tl;dr version is this quick list:

  • Redirect to www
  • Comments
  • Forcing latest version of IE
  • Gzip compression
  • Setting some expires headers
  • Custom Error Pages
  • Block access to certain file types

Redirect to www

A very common requirement for .htaccess is to redirect non-www traffic to the www. domain (or vice versa) .

This keeps traffic on your website consistent (which can be invaluable when trying to debug issues or gather statistics).

Here is the code you would need.

RewriteEngine On
RewriteBase /
RewriteCond %{HTTP_HOST} !^www\.
RewriteRule ^ http://www.%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

Comments

This will sound like a weird one, but I know a lot of programmers who comment absolutely everything but will never comment .htaccess files.

A quick comment can outline what you are intending various lines to do, which will save you a lot of angst in the long run, especially if your htaccess file is doing something non-trivial or mission critical.

Comments are created by starting a line with the # character.  The rest of the line will then be ignored.

Here is a sample of a comment.

#The following redirects traffic to https, do not delete it.

Forcing the latest version of IE

We can do this in a couple of ways, but this is a nice quick way to easily apply the fix for IE. As well as forcing the latest version of IE it will also use the ChromeFrame if it is available.

This doesn't need to be set for certain files, so we can exclude them.

<IfModule mod_headers.c>
Header set X-UA-Compatible "IE=Edge,chrome=1"
<FilesMatch "\.(js|css|gif|png|jpe?g|pdf|xml|oga|ogg|m4a|ogv|mp4|m4v|webm|svg|svgz|eot|ttf|otf|woff|ico|webp|appcache|manifest|htc|crx|oex|xpi|safariextz|vcf)$" >
Header unset X-UA-Compatible
</FilesMatch>
</IfModule>

Gzip Compression

If possible we should try and compress anything coming from the webserver, it will help to make your website feel more snappy and save you some bandwidth.

<IfModule mod_deflate.c>
<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
</IfModule>
</IfModule>
<IfModule filter_module>
FilterDeclare   COMPRESS
FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/html
FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/css
FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/plain
FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/xml
FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/x-component
FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/javascript
FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/json
FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/xml
FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/xhtml+xml
FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/rss+xml
FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/atom+xml
FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/vnd.ms-fontobject
FilterProvider  COMPRESS  DEFLATE resp=Content-Type $image/svg+xml
FilterProvider  COMPRESS  DEFLATE resp=Content-Type $image/x-icon
FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/x-font-ttf
FilterProvider  COMPRESS  DEFLATE resp=Content-Type $font/opentype
FilterChain     COMPRESS
FilterProtocol  COMPRESS  DEFLATE change=yes;byteranges=no
</IfModule>

<IfModule !mod_filter.c>
AddOutputFilterByType DEFLATE text/html text/plain text/css application/json
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE text/xml application/xml text/x-component
AddOutputFilterByType DEFLATE application/xhtml+xml application/rss+xml application/atom+xml
AddOutputFilterByType DEFLATE image/x-icon image/svg+xml application/vnd.ms-fontobject application/x-font-ttf font/opentype
</IfModule>
</IfModule>

Setting some expires headers

There are a lot of files that should be cached at the earliest possible time by the browser to save them having to be downloaded several times.

The code to do this looks pretty verbose but covers most angles.

<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault                          "access plus 1 month"
ExpiresByType text/cache-manifest       "access plus 0 seconds"
ExpiresByType text/html                 "access plus 0 seconds"
ExpiresByType text/xml                  "access plus 0 seconds"
ExpiresByType application/xml           "access plus 0 seconds"
ExpiresByType application/json          "access plus 0 seconds"
ExpiresByType application/rss+xml       "access plus 1 hour"
ExpiresByType application/atom+xml      "access plus 1 hour"
ExpiresByType image/x-icon              "access plus 1 week"
ExpiresByType image/gif                 "access plus 1 month"
ExpiresByType image/png                 "access plus 1 month"
ExpiresByType image/jpg                 "access plus 1 month"
ExpiresByType image/jpeg                "access plus 1 month"
ExpiresByType video/ogg                 "access plus 1 month"
ExpiresByType audio/ogg                 "access plus 1 month"
ExpiresByType video/mp4                 "access plus 1 month"
ExpiresByType video/webm                "access plus 1 month"
ExpiresByType text/x-component          "access plus 1 month"
ExpiresByType application/x-font-ttf    "access plus 1 month"
ExpiresByType font/opentype             "access plus 1 month"
ExpiresByType application/x-font-woff   "access plus 1 month"
ExpiresByType image/svg+xml             "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
ExpiresByType text/css                  "access plus 1 week"
ExpiresByType application/javascript    "access plus 1 week"
</IfModule>

Custom Error Pages

Custom Error Pages are an excellent way to customise your site, for example if your site returns a 404 error instead of showing the default page sent from Apache.

This is a pretty small bit of code.

ErrorDocument 404 /404.html

All this means is for the Error Document called 404, send the user to the page 404.html

Block access to certain file types

Oftentimes various text editors and programs will leave files that just end up getting uploaded with the other files when you update your website - best practice would be to not put these files on your web server but sometimes this cannot be avoided, and regardless of why they are there you should do something to tidy them up.

The following code blocks access to various files.

<FilesMatch "(\.(bak|config|sql|fla|psd|ini|log|sh|inc|swp|dist)|~)$">
Order allow,deny
Deny from all
Satisfy All
</FilesMatch>

Conclusion

There are plenty of other things .htaccess files can do, but these are the things I personally use most often, I hope you find them as useful as I have.

Why not read some more of our Development Help posts?