Apr 20, 2008
.htaccess - gzip and cache your site for faster loading and bandwidth saving
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 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 I use Ali Farhadi’s JSmart Compressor which compress css and javascript files.
Setup JSmart
- 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
.htaccessin 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.
Excellent article! Very nice, you’ll need the faster speed these tips provide when I start sending traffic your way. You might also like: Hacking wp-cache for ultimate speed.
AskApache
Thanks. I’m waiting for it
[...] .htaccess - gzip and cache your site for faster loading and bandwidth saving [...]
[...] .htaccess - gzip and cache your site for faster loading and bandwidth saving (tags: apache) [...]
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
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 !
Undeniable, a must read & practice for all webmaster!
Thanks for the tips!
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.
Yes Greg, you are right. jpg/png/gif files shouldn’t be gzipped.
The mod_gzip configuration has been updated. Thanks!
Wow!!
What a G R E A T tip!!!
My site is now very very fast!!
[...] faster loading and bandwidth saving Posted October 13, 2008 Filed under: Uncategorized | samaxes » .htaccess - gzip and cache your site for faster loading and bandwidth saving .htaccess - gzip and cache your site for faster loading and bandwidth [...]
[...] Great .htaccess discussion. [...]
Nice article it help me a lot to speed up my site
thanks a lot
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!
Thank you very much for tips and tricks!
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
Thanks for the guide, I was using PHP GZip method on my site (WWN) before this, the .htaccess method was something I didn’t know.
Thanks.
If your host is up-to-date you won’t have mod_gzip becaues it was renamed/morphed into mod_deflate
mod_gzipstill exists as an external extension module andmod_deflateonly comes bundle with Apache since the version 2.Unfortunately for me, my host still uses Apache 1.3.
[...] Source - Samaxes [...]
[...] gzip 压缩减少页面加载时间的 .htaccess 技巧，文章太长，请点击 .htaccess-gazip and cache your site for faster loading and bandwidth saving [...]
[...] http://www.samaxes.com/2008/04/20/htaccess-gzip-and-cache-your-site-for-faster-loading-and-bandwidth... [...]
[...] Speed Up the Performance of CakePHP Apps 2. How To Save Half A Second On Every CakePHP Request 3. Learn more about cakephp with .htaccess and another one about .htaccess 4. CSS Compress Tagged: cakephp, [...]
[...] You can get more info @ SamAxes Blog [...]
[...] References : 1. http://pravin.insanitybegins.com/ 2. http://www.samaxes.com [...]
The line:
php_value output_handler ob_gzhandlerwill not work when Suhosin is installed in the server.Great Tut! It was news to me and it definitely works. I’m a regular here now.
[...] Source [...]
[...] Source: http://www.samaxes.com/2008/04/htaccess-gzip-and-cache-your-site-for-faster-loading-and-bandwidth-sa... [...]
[...] .htaccess – gzip and cache your site for faster loading and bandwidth saving [...]
[...] Here’s a how-to on configuring Apache’s cache expiration headers with .htaccess (link). [...]
Thank You for that great article :)…
woww thanka tips…
Hi, Great stuff. How can you tell if the Mod_Gzip is enabled on your server?
No, it’s not. Unfortunately my hosting provider supports neither mod_gzip nor mod_deflate.
[...] 最后使用如下也就稀里糊涂的解决了，参考了这个帖子。 [...]
I just can’t thank you enough.My site http://www.overcloud9.com was rated D by Yslow and Google webmasters showed loading time of 12.5 seconds!with your simple htaccess modification codes,now Yslow rates it at 70%.
Nice tips, Thanks a lot!
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 ?
[...] mod_gzip: (gefunden bei samaxes.com) <ifModule mod_gzip.c> mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file [...]
Apache 2 comes bundled with mod_deflate which probably is the module that you have available.
Take a look at More on compressing and caching your site with .htaccess to see how you can configure it.
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.?
I suggest you to contact your hosting provider and ask them which module are they using to compress files.
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?
Hello Guy,
You have to ask your hosting provider which Apache module are they using to gzip files.
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
The link http://bsd2.hostdone.com/info.php shows that they are using Apache 1.3.41.
This version does not come bundled with any gzip module.
does it mean that this server cannot support gzip?
in the same link http://bsd2.hostdone.com/info.php it says
HTTP_ACCEPT_ENCODING gzip, deflate
what does it mean?
regards
Guy
That’s a header sent by the browser request telling the server that it supports gzipped data.
[...] 4) Removing Etags and last modified header-If you’ve made any changes in the images/js files hosted in your site,that may not get updated if you remove these two features.However if your site’s images or javascripts dependant features are not updated regularly then you may consider removing these two as it will improve page loading time.These and other optimizing features are better explained at- http://www.samaxes.com/2008/04/htaccess-gzip-and-cache-your-site-for-faster-loading-and-bandwidth-sa... [...]