Mod_deflate compressing html javascript and css files
Speed up your webpage by compressing html javascript and css files automated with the gzip engine installed on your apache server.
I will not explain the reasons why you should compress your websites. It is obvious that you save traffic and gain speed when responding to http requests with compressed content. The fact that not all browsers can handle compressed content is one argument against using them, but seeing that we are in the 21st century and all, we should move on and integrate a filter to handle the older browsers…
Mod_deflate compresses website content
The example below will compress html, css, js files and more. It requires Apache 2.0 and will only work if the mod_deflate is enabled on Apache. Please note that also the cache expire headers are set. This is handy because it speeds up your page for returning visitors and google likes to see this setting enabled.
Include this code in your .htaccess file (works great with MODX CMS)
<IfModule mod_deflate.c>
<filesMatch "\.(js|css|html|php|svg)$">
SetOutputFilter DEFLATE
</filesMatch>
</IfModule>
# Local caching
<IfModule mod_expires.c>
ExpiresActive on
# Perhaps better to whitelist expires rules? Perhaps.
ExpiresDefault "access plus 1 month"
# cache.appcache needs re-requests in FF 3.6 (thx Remy ~Introducing HTML5)
ExpiresByType text/cache-manifest "access plus 0 seconds"
# Your document html
ExpiresByType text/html "access plus 0 seconds"
# Data
ExpiresByType text/xml "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType application/json "access plus 0 seconds"
# RSS feed
ExpiresByType application/rss+xml "access plus 1 hour"
# Favicon (cannot be renamed)
ExpiresByType image/x-icon "access plus 1 week"
# Media: images, video, audio
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"
# HTC files (css3pie)
ExpiresByType text/x-component "access plus 1 month"
# Webfonts
ExpiresByType font/truetype "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"
# CSS and JavaScript
ExpiresByType text/css "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType text/javascript "access plus 1 year"
<IfModule mod_headers.c>
Header append Cache-Control "public"
</IfModule>
</IfModule>
<ifModule mod_headers.c>
Header set Connection keep-alive
</ifModule>
Alternatively use php.ini to enable compression
These two lines allow you to enable zlib compresson on shared hosts if you have php ini access. It will compress your html but not the css and the javascript.
zlib.output_compression = On zlib.output_compression_level = 9
mod_deflate css and javascript compression does not work
While implementing this solution I ran into a problem that only my html files were being compressed and not the css and the javascript files. I kept rechecking my code over and over again without success, but then realized that I had failed at a small setting in Firebug which I had used to analyze the compression. The page caching was still enabled and that was why the old CSS and JS files were indicated as not compressed. As soon as I disabled the cache setting, I was able to see that the compression was enabled and working.
