.htaccess – gzip and cache your site for faster loading and bandwidth saving

Please read Improving web site performance with Apache .htaccess for an updated version of this article.

Last week I changed my hosting provider from Site5 to NearlyFreeSpeech.NET.
Despite the fact that the first one is faster than the second, NFSN is a lot more cheaper (I only pay for what I really use).

So in order to speed up my site and save bandwidth (the more I use the more I pay) I use .htaccess file to gzip my text based files and optimize cache HTTP headers.
Although this site is powered by WordPress which has some really great plugins to optimize PHP output I wanted a more generic solution which can be applied to all PHP web applications.

I also try to follow as much as I can the rules for high performance web sites so don’t be surprised if some Expires header seems too long (far future Expires header rule requires at least 172801 seconds).

Turn on compression

mod_gzip is an external extension module for Apache that allows you to quickly and easily compress your files before you send them to the client. This speeds up your site like crazy!

If your hosting provider has mod_gzip module enabled, the best way to compress your content is to add the following lines to 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>

unfortunately my provider doesn’t have this module enabled. If you have the same problem, you can add the following line instead:

php_value output_handler ob_gzhandler

this makes PHP to compress your PHP files (be cautious, this is very CPU intensive).

To compress other static content you can use Ali Farhadi’s JSmart Compressor which compress CSS and JavaScript files.

Setup JSmart

Note: This section is outdated. JSmart Compressor has been renamed and updated as SmartOptimizer.

  • Assuming your application resides in your web root, simply place the JSmart files into /jsmart.
  • Edit /jsmart/config.php if you like, though the default settings should work fine. The mine looks like:
<?php
//JSmart Configuration File

//Show error messages if any error occurs (true or false)
define('JSMART_DEBUG_ENABLED', false);

//Encoding of your js and css files. (utf-8 or iso-8859-1)
define('JSMART_CHARSET', 'utf-8');

//Base dir for javascript files
define('JSMART_JS_DIR', '../');

//Base dir for css files
define('JSMART_CSS_DIR', '../');

//Change it to false only for debugging purposes
define('JSMART_CACHE_ENABLED', true);

//JSmart cache dir
define('JSMART_CACHE_DIR', 'cache/');
?>
  • Create and chmod 777 /jsmart/cache
  • Add the following lines into your .htaccess in your web root:
<ifModule mod_rewrite.c>
  RewriteEngine on
  RewriteRule ^(.*.(js|css))$ jsmart/load.php?file=$1
</ifModule>

Add future Expires and Cache-Control headers

A first-time visitor to your page will make several HTTP requests to download all your sites files, but using the Expires and Cache-Control headers you make those files cacheable. This avoids unnecessary HTTP requests on subsequent page views.

To set your Expires headers add these lines to your .htaccess:

<ifModule mod_expires.c>
  ExpiresActive On
  ExpiresDefault "access plus 1 seconds"
  ExpiresByType text/html "access plus 1 seconds"
  ExpiresByType image/gif "access plus 2592000 seconds"
  ExpiresByType image/jpeg "access plus 2592000 seconds"
  ExpiresByType image/png "access plus 2592000 seconds"
  ExpiresByType text/css "access plus 604800 seconds"
  ExpiresByType text/javascript "access plus 216000 seconds"
  ExpiresByType application/x-javascript "access plus 216000 seconds"
</ifModule>

and to set Cache-Control headers add:

<ifModule mod_headers.c>
  <filesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|swf)$">
    Header set Cache-Control "max-age=2592000, public"
  </filesMatch>
  <filesMatch "\.(css)$">
    Header set Cache-Control "max-age=604800, public"
  </filesMatch>
  <filesMatch "\.(js)$">
    Header set Cache-Control "max-age=216000, private"
  </filesMatch>
  <filesMatch "\.(xml|txt)$">
    Header set Cache-Control "max-age=216000, public, must-revalidate"
  </filesMatch>
  <filesMatch "\.(html|htm|php)$">
    Header set Cache-Control "max-age=1, private, must-revalidate"
  </filesMatch>
</ifModule>

Now all your files must have the right headers and be cacheable except the CSS and JavaScript files processed by JSmart. This is because JSmart overrides the cache headers when gzipping these files.

To fix this you have to edit /jsmart/load.php file and change the block code

if (JSMART_CACHE_ENABLED) {
  if (isset($headers['If-Modified-Since']) && $headers['If-Modified-Since'] == $mtimestr)
    header_exit('304 Not Modified');

  header("Last-Modified: " . $mtimestr);
  header("Cache-Control: must-revalidate", false);
} else header_nocache();

to

if (JSMART_CACHE_ENABLED) {
  if (isset($headers['If-Modified-Since']) && $headers['If-Modified-Since'] == $mtimestr)
    header_exit('304 Not Modified');

  if ($file_type=='js') {
    header("Expires: " . gmdate("D, d M Y H:i:s", $mtime + 216000) . " GMT");
    header("Cache-Control: max-age=216000, private, must-revalidate", true);
  } else {
    header("Expires: " . gmdate("D, d M Y H:i:s", $mtime + 604800) . " GMT");
    header("Cache-Control: max-age=604800, public, must-revalidate", true);
  }
} else header_nocache();

Turn off ETags

By removing the ETag header, you disable caches and browsers from being able to validate files, so they are forced to rely on your Cache-Control and Expires header.
Entity tags (ETags) are a mechanism to check for a newer version of a cached file.

Add these lines to .htaccess:

<ifModule mod_headers.c>
  Header unset ETag
</ifModule>
FileETag None

Remove Last-Modified header

If you remove the Last-Modified and ETag header, you will totally eliminate If-Modified-Since and If-None-Match requests and their 304 Not Modified responses, so a file will stay cached without checking for updates until the Expires header indicates new content is available!

Add these lines to .htaccess:

<ifModule mod_headers.c>
  Header unset Last-Modified
</ifModule>

Notes

With these settings you should have your site a lot faster and your file’s size greatly reduced.

Resources

Some descriptions are based on .htaccess (Hypertext Access) Articles from AskApache.
mod_gzip settings are taken from Highub – Web Development Blog.

Published by

Samuel Santos

Java developer, Open Source hacker, Web technologist, JUG Leader.

104 thoughts on “.htaccess – gzip and cache your site for faster loading and bandwidth saving”

  1. thanks.
    i search this tool and this works fine.

    tipp:
    use htaccess for rewriting the urls. it’s better for the security and static files look like nicer

  2. Thanks for the great article…. I was using mod_expires and gzip only. I just added the eTag, mod_headers stuff to my htaccess … hope it gives my sites a boost in speed.

    Thanks again.
    Stumbled it !

  3. Nice article – my only question is should you be gzipping your jpg/png/gif files? They’re already compressed so I’d have thought gzipping wouldn’t noticeably reduce the file size, and just create unnecessary processor overhead.

  4. Thank you, I was about to dump WordPress and my host to do speed issues, but thanks to these tips, my site now runs faster than before!

  5. Thank you for this overview of different methods.

    I was especially happy with Smart Optimizer, thank you so much for mentioning it!

    I saved 36% in total :)

  6. If your host is up-to-date you won’t have mod_gzip becaues it was renamed/morphed into mod_deflate

  7. mod_gzip still exists as an external extension module and mod_deflate only comes bundle with Apache since the version 2.
    Unfortunately for me, my host still uses Apache 1.3.

  8. Hi, My hosting provider confirmed that the Gzip mod is available, so I placed your script at the top of .htaccess files. YSlow (Yahoo’s website performance add-in for Firefox) still reports though that a whole bunch of .css & .js files could be compressed for improved perfomance. So it appears the code is not working. I have tried this on static HTML sites and WordPress sites with the same result?
    Do you have any idea/s why this may not be working ?

  9. Thanks, My server is Apache 2.2.13 so I tried using this as you suggested.
    (on both WP & static HTML sites)

    SetOutputFilter DEFLATE

    The result though is still the same. YSlow reports that .js & .css files are not compressed.?

  10. hi
    i also added your code to my htacsess but i do not have any change
    my host server support deflate and gzip
    when i try to gzip the index file i get error page
    my host does not support or give me explanation why
    do you have any suggestions?

  11. hi thanks for your answer i asked them here is the question and their answer
    Q: hi
    1.which Apache module are you using to gzip files?

    2.why i do not see Content-Encoding: gzip
    in the
    Response Headers – http://www.espressotech.co.il/index.html

    Date: Fri, 08 Jan 2010 17:25:45 GMT
    Server: Microsoft-IIS/5.0
    Last-Modified: Fri, 08 Jan 2010 10:59:18 GMT
    Accept-Ranges: bytes
    Content-Length: 16841
    Content-Type: text/html

    200 OK
    regards
    Guy

    [Jan 8, 2010 9:48:34 AM]
    A: Hi

    We do not have any special setup for apache module, apache running as was explained in your early tickets, using standard coding and all php functions applied are located in link below:
    http://bsd2.hostdone.com/info.php

    You may looking for some special coding or advanced setting that is not supported running in our shared hosting service, keep in mind that shared hosting service may limit to standard setup to keep service running optimal for all uses.

    Best Regards
    Support team

    also the server release is
    Apache Release 1.03

    please advise me what i can do in order to enable gzip under these conditions?
    regards
    Guy

  12. Thanks for this page. Already my page speeds are much greater. I am very new at .htaccess stuff but am familiar with HTML and CSS. So far I haven’t been able to get smartoptimizer to compress the CSS files yet even though I followed its installation instructions carefully.

  13. Wow quick response! My host server runs the older Apache that has gzip but not deflate. As for the css, it apparently IS being compressed by gzip but for some reason the page speed tools in the Firebug add-on for the Firefox browser indicated that it wasn’t.

    So far as I know, I now have browser caching and gzipping enabled for all content on my web site. If you have a few minutes, maybe you could email me and I could send you exactly what is in my .htaccess file (cobbled together from yours and smartoptimizer’s code) and you could tell me if I did it right. If not, still cool. thanks again for a great page!

  14. I am looking for the WordPress plugin WP Super Cache and I was wondering if there’s a version that you can install on your custom php content management system?

  15. @ Samuel Santos, Sorry if I did not make myself clear. Hmmm what I mean is that does the WP Super Cache is only available in WordPress? Does it have any other version for other CMS or platforms? I’ve been looking @ Google for a while and can’t seem to find answer. I can only see WordPress out there.

  16. @ Samuel thanks for the link, but sadly there’s no other version other then WordPress. Your htaccess tutorial doesn’t work with my server but works locally. I guess I have to find a cache library in php classes and see if I can cache my template files.

  17. Thanks! This is an awesome tutorial…saw instant results in speed after adjusting my .htaccess file. Went from a 78 to 85 in my Yslow score and even more in other areas.

  18. Hi Sam,
    Cheers for your efforts.
    I’ve noticed that etags does not need the

    Header unset ETag

    All that is needed is

    FileETag None

  19. Huy guys,
    I can’t find the “” /jsmart/load.php file” in my directory
    in order
    “To fix this you have to edit /jsmart/load.php file and change the block code”.

    I have only :
    Smartoptimiser directory
    > cache directory (empty)
    > config.php
    > index.php
    > minifiers directory
    > css.php
    > js.php

    Would you have any idea ?
    Thanks

  20. i used
    ExpiresActive On
    ExpiresDefault “access plus 1 seconds”
    ExpiresByType text/html “access plus 1 seconds”
    ExpiresByType image/gif “access plus 2592000 seconds”
    ExpiresByType image/jpeg “access plus 2592000 seconds”
    ExpiresByType image/png “access plus 2592000 seconds”
    ExpiresByType text/css “access plus 604800 seconds”
    ExpiresByType text/javascript “access plus 216000 seconds”
    ExpiresByType application/x-javascript “access plus 216000 seconds”
    . But it response 500 error

    1. I don’t use W3 Total Cache myself.
      You need to open your website’s .htaccess file, check which modules have been enabled by the plugin, and add those that are missing.

  21. Sam,

    I think you have some incorrect information about ETags and Last-Modified. You said that disabling these will prevent the clients’ browsers from hitting your web server with conditional request (If-Modified-Since and If-None-Match) until after the cache period has expired.

    However, web browsers will not hit your server with a conditional request during the cache period anyway; if a user clicks on a link to (or within) your site, the browser will see the cache is still current (from your Cache-Control tag), and load the content from its cache. It will not contact your server, and it will not consider the ETag or Last-Modified at all. In other words, removing these tags is not necessary to prevent the browser from sending a request during the cache period.

    After the cache period (or if the user hits F5), the browser will use the ETag and/or Last-Modified to send a conditional request; if the server sees from those tags that the resource is unchanged, it will send back a 304. If you disable ETag or Last-Modified headers, then the browser will always have to download the whole resource again, because it will have no information to share with the server about what version it has in its cache. So, you will certainly see no 304s in your logs, but what you don’t realize is you increase bandwidth.

    Bottom line: leave the ETag or Last-Modified there. Then, when the cache period is expired, the browsers will contact your web server, but if the resource has not been updated, your server will only have to respond with a few bytes (304), rather than send the resource again.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>