Gzip compression through .htaccess not working

Question

I have been creating a site and checking it's speed through gtmetrix.com. I used the following .htaccess file to compress the .js, .css and many more files.

<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>

ErrorDocument 401 /401.php
ErrorDocument 403 /403.php
ErrorDocument 404 /404.php
ErrorDocument 500 /500.php

Options Indexes
IndexOptions FancyIndexing

ExpiresActive On
ExpiresDefault "access plus 7 days"
ExpiresByType application/javascript A2592000
ExpiresByType application/x-javascript A2592000
ExpiresByType text/javascript A2592000
ExpiresByType text/html A2592000
ExpiresByType text/xml A2592000
ExpiresByType text/css A2592000
ExpiresByType text/plain A2592000
ExpiresByType image/gif A2592000
ExpiresByType image/jpg A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/png A2592000
ExpiresByType image/bmp A2592000
ExpiresByType application/x-shockwave-flash A2592000

<FilesMatch "\.(html?|txt)$">
  ForceType 'text/html; charset=UTF-8'
</FilesMatch>

<FilesMatch "\.(css)$">
  ForceType 'text/css; charset=UTF-8'
</FilesMatch>

<FilesMatch "\.(js)$">
  ForceType 'text/javascript; charset=UTF-8'
</FilesMatch>

<FilesMatch "\.(css|js)$">
  Header append Vary Accept-Encoding
</FilesMatch>

But when I run the page test it shows the following -----

Compressing the following resources with gzip could reduce their transfer size by 882B (48% reduction).

Compressing http://wooflux.co.cc/ could save 645B (48% reduction).
Compressing http://wooflux.co.cc/style.css could save 237B (51% reduction).

But I have done gzip compression on my .htaccess file. I don't what is getting wrong here, and by the way I'm very new to this coding style. So please let me know if I'm doing any error or not.

Answer 1

I have not used mod_gzip but here is my .htaccess I use to gzip .js, .css and other files via mod_deflate:

#Gzip
<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x- javascript application/javascript
</ifmodule>
#End Gzip

In case you are not already aware of it, Firebug is very useful for checking if downloaded content is gzipped. Click on the "Net" tab in Firebug and then do shift-f5 to get Firefox to reload all the .js and .css files so they show in the Net panel. Click the "+" next to the .js or .css file and click the "Headers" tab. If the response is gzipped you will see "Content-Encoding gzip" in the Response Headers section. I image the IE, Safari, and Chrome equivalents offer the same ability.

There is one gotcha regarding gzipping .js and .css files on IE6 to watch out for. I think it is only applicable to IE6 SP1 users.

Answer 2

Here is a syntax to use with file extensions.

<IFModule mod_deflate.c>
    <filesmatch "\.(js|css|html|jpg|png|php)$">
        SetOutputFilter DEFLATE
    </filesmatch>
</IFModule>