Quicknav Close

Mod_deflate compressing html javascript and css files

Make your websites faster

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

Firefox Disable Cache
Firefox Disable Cache

 

by cloudtec Veröffentlicht: Aktualisiert: 2. August 2017

Mod_deflate compressing html javascript and css files cloudtec AG
Sandrainstrasse 17 3007 Bern Switzerland