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…
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)
<IfModulemod_deflate.c><filesMatch"\.(js|css|html|php|svg)$">SetOutputFilterDEFLATE</filesMatch></IfModule># Local caching<IfModulemod_expires.c>ExpiresActiveon# 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)ExpiresByTypetext/cache-manifest"access plus 0 seconds"# Your document htmlExpiresByTypetext/html"access plus 0 seconds"# DataExpiresByTypetext/xml"access plus 0 seconds"ExpiresByTypeapplication/xml"access plus 0 seconds"ExpiresByTypeapplication/json"access plus 0 seconds"# RSS feedExpiresByTypeapplication/rss+xml"access plus 1 hour"# Favicon (cannot be renamed)ExpiresByTypeimage/x-icon"access plus 1 week"# Media: images, video, audioExpiresByTypeimage/gif"access plus 1 month"ExpiresByTypeimage/png"access plus 1 month"ExpiresByTypeimage/jpg"access plus 1 month"ExpiresByTypeimage/jpeg"access plus 1 month"ExpiresByTypevideo/ogg"access plus 1 month"ExpiresByTypeaudio/ogg"access plus 1 month"ExpiresByTypevideo/mp4"access plus 1 month"ExpiresByTypevideo/webm"access plus 1 month"# HTC files (css3pie)ExpiresByTypetext/x-component"access plus 1 month"# WebfontsExpiresByTypefont/truetype"access plus 1 month"ExpiresByTypefont/opentype"access plus 1 month"ExpiresByTypeapplication/x-font-woff"access plus 1 month"ExpiresByTypeimage/svg+xml"access plus 1 month"ExpiresByTypeapplication/vnd.ms-fontobject"access plus 1 month"# CSS and JavaScriptExpiresByTypetext/css"access plus 1 year"ExpiresByTypeapplication/javascript"access plus 1 year"ExpiresByTypetext/javascript"access plus 1 year"<IfModulemod_headers.c>HeaderappendCache-Control"public"</IfModule></IfModule><ifModulemod_headers.c>HeadersetConnectionkeep-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.