3 Simple .htaccess Rules For Better Website Performace

htaccess 3 Simple .htaccess Rules For Better Website Performace

.htaccess is the directory-level configuration file that allows us to adjust some sever configurations. Using .htaccess file effectively can increase website performance. In this article, we’ll see some simple rules for .htaccess file, that will make your website load faster!

Disable Etags

Entity tags (ETags) are a mechanism that web servers and browsers use to determine whether the component in the browser’s cache matches the one on the origin server. According to Yahoo! Performance Rules, disable ETags can make the page loads faster, decrease server load and reduce bandwidth if your website is hosted on multiple servers.

So, to disable ETags with .htaccess file, just put the following line into it:

Header unset ETag
FileETag None

Add Expires Headers

The expires headers tells the browser to store website’s components (images, scripts, flashs, etc.) in browser’s cache until they expire (defined by value of the expires header). Making far future expires headers that will make your page load faster because browser doesn’t have to request for those component, it simply takes them from the cache. Thus, this will decrease server load, too.

There’re several ways to define expires headers using .htaccess. You can set it with a specific time like this:

Header set Expires "Tue, 16 Jun 2020 20:00:00 GMT"

If you want to add expires headers for some file types only, use the following code:

<FilesMatch ".(ico|jpg|jpeg|png|gif|js|css|swf)$">
Header set Expires "Tue, 16 Jun 2020 20:00:00 GMT"
</FilesMatch>

The disvantage of this methos is that you have to specify the exact time of expires. There’s a second way that can be more flexible by using relative timestamp, based on current time of server or current time of access.

Try this line in your .htaccess file:

ExpiresActive On
ExpiresDefault "access plus 10 years"

This will add a very far future expires headers (10 years), based on time of access. If you want to use the current time, you can use:

ExpiresActive On
ExpiresDefault "now plus 10 years"

Very easy to implement, right?

This method allows you to add expires headers based on file type, too. You may want to do like this:

ExpiresActive On
ExpiresByType text/html "access plus 1 day"
ExpiresByType image/gif "access plus 10 years"
ExpiresByType image/jpeg "access plus 10 years"
ExpiresByType image/png "access plus 10 years"
ExpiresByType text/css "access plus 10 years"
ExpiresByType text/javascript "access plus 10 years"
ExpiresByType application/x-javascript "access plus 10 years"

As you see, adding expires headers for each file types is a bit complicated. You have to remember the mime-types of these types. That’s not always convenient. A better solution is: set the default expires headers for all file types, and modify expires headers for 1 file type only, like this:

ExpiresActive On
ExpiresDefault "access plus 10 years"
ExpiresByType text/html "access plus 1 day"

This will add expires headers 10 years for all file types, except HTML file type (1 day). That’s good for almost blogs, because HTML file type often is the webpage itself, so you have dynamic content, make short expires headers keep your content always fresh.

Note that this rules requires mod_expires installed. This is a popular module, usually installed on almost web hosts.

Compress Text Files (CSS, Javascript)

Compress text files like CSS, Javascript or HTML files is a effective way to reduce the page’s size, and therefore, reduce page load time and bandwith. To turn on compression in .htaccess file, put the following lines into it:

SetOutputFilter DEFLATE

The problem is that you don’t need to compress all files, especially image files (like jpeg, gif) because they’re alreay been compressed (using image compression algorithm). You should apply this rule for text files. So, change the code above to:

<FilesMatch ".(js|css|html|htm|php|xml)$">
SetOutputFilter DEFLATE
</FilesMatch>

This rule requires mod_deflate installed. This module is not always installed on all hosts. I’m using BlueHost and see it’s installed. Please check your host configuration (or ask your hosting company) to make sure it works (you can still leave them in .htaccess file, they won’t effect to other rules at all).

How to check whether or not rules were activated?

To check whether or not rules were activated on your host, you can use Firebug addon for Firefox. Make sure to activate the Net tab (the last tab) of Firebug.

After that, make some sample requests to your files and check the response headers. Here’s an example request that I made, you can see the expired date and compression method.

headers 3 Simple .htaccess Rules For Better Website Performace

Thanks Jorge Pedret for the great question.

13 Comments

  1. Hi,

    The response header for my website is looking like this:
    HTTP/1.1 200 OK
    Date: Thu, 23 Jan 2014 11:53:23 GMT
    Server: Apache
    Cache-Control: no-cache, must-revalidate, max-age=0
    Pragma: no-cache
    Expires: Wed, 11 Jan 1984 05:00:00 GMT
    Content-Encoding-handler: hce
    Content-Encoding: gzip
    Last-Modified: Wed, 22 Jan 2014 12:07:12 GMT
    Vary: User-Agent
    Keep-Alive: timeout=5, max=100
    Connection: Keep-Alive
    Transfer-Encoding: chunked
    Content-Type: text/html;charset=UTF-8

    I’ve added the relevant Expires and Mod_Deflate code to my htaccess. My concern is Expires: Wed, 11 Jan 1984 05:00:00 GMT which is data 20 years back. Should it read 20 years in the future as per you example? How do I set this?

    The response headers for other static resources like images, css and js seem to return a normal output.

    Many thanks

    Rosh

    Reply
  2. Hello once again,
    I wanted to know if Etags could be of any help for my site , as my site is on only one server.
    Thanks in advance.

    Reply
    • According to Yahoo: “ETags won’t match when a browser gets the original component from one server and later tries to validate that component on a different server, a situation that is all too common on Web sites that use a cluster of servers to handle requests.”. So if you’re using only 1 server, you can still use ETags. In that case your server will send only small response to the browser (304 Not Modified) if the requested resource is not changed.

      Reply
      • Oh,Thank you!
        I must appreciate , this blog is one of the most systematic and well organised blog.
        Keep up the good work!!

        Could you help me how to minify JS,CSS and HTML files?

        Reply
        • If you use .htaccess only, you cannot minify CSS, JS and HTML. But if you have control of your server, you can install mod_pagespeed for Apache. That module will optimize (a lot) your web pages, including minify job.

  3. Very informative article.
    I would like to know what is the difference between “access plus” and “now plus” ?
    Any help would be appreciated.

    Reply
  4. There’s a lot that you can do with an htaccess file, and of course, things can get pretty advanced in a hurry. Here, we’re going to keep things pretty…

    Reply
  5. Hmm, unbelievable, just tried it, and my Page Speed is for the first time over 90 and YSlow over 70…

    Hope it holds up and thank you very much for these hints!

    Reply
  6. I don’t know how many articles I’ve read on this tonight, but NONE of them made any sense. I thought my head was going to explode. lol. Thank you greatly for providing easy to understand instructions! :)

    Reply
  7. Thank you so much your article really helped me a lots from modifying my own .htaccess

    By having your codes now I’m stopped using those crappy cache plugin and I can use it myself :D

    Thanks!

    Reply

Leave a Reply