Logo Background

Ultimate GZIP Compression Using .htaccess

  • By on August 10, 2011 | No Comments

    Looking for ways to speed up web page loading using GZIP compression technique on .htaccess? Mod_deflate or mod_gzip can be used to serve compressed JS or CSS file to destination browser. Alternatively you can use JSmart, Smart Optimizer or W3 Total Cache to improve the blog loading speed.

    Today I am going to share a new .htaccess coding technique which is far efficient than speed optimization using mod_deflate and mod_gzip itself.

    Previously I did share about the JS and CSS file compression using mod_deflate. The downfall of this technique is that the compression takes up additional CPU cycles and memory on the server.

    It will be a problem especially when your blog is running on underpowered shared server.

    Imagine you have one thousand visitor a day and theoretically the server needs to compress the JS and CSS file each time before send it to browser.

    But what if the server serve gzip ready JS and CSS file? It will reduce the CPU and memory utilization on the server definitely. Let’s get started on how to acheive this using .htaccess code.

    Serve GZIP Ready JS And CSS File Using .htaccess

    The piece of .htaccess code as below instruct the Apache to serve .js.gz and .css.gz file directly to all the browser except Safari if these file are available.

    # Serve gzip ready JS and CSS file if available
    <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{HTTP:Accept-encoding} gzip
    RewriteCond %{HTTP_USER_AGENT} !Safari
    RewriteCond %{REQUEST_FILENAME}.gz -f
    RewriteRule ^(.*)$ /$1.gz [QSA,L]
    <FilesMatch \.css\.gz$>
    ForceType text/css
    Header append Vary Accept-Encoding
    </FilesMatch>
    <FilesMatch \.js\.gz$>
    ForceType application/javascript
    Header append Vary Accept-Encoding
    </FilesMatch>
    </IfModule>
    <IfModule mod_mime.c>
    AddEncoding gzip .gz
    </IfModule>

    Let say you have jquery.js file and style.css file in your WordPress blog. You just need to have jquery.js.gz and style.css.gz in the same location.

    UNIX> gzip jquery.js -c -9 > jquery.js.gz
     
    UNIX> gzip style.css -c -9 > style.css.gz

    Use the gzip command as above to compress the original JS and CSS file into the .gz extension. The -9 parameter is to maximize the file compression into the smallest size.

    In the end, clear the cache in the W3 Total Cache (if you have installed this WordPress plugin).

    Check the HTTP Header for jquery.js and style.css and you should see the .gz file being served is the same size on the server. Voila!

    Bonus Tips – Compress HTML And XML File Too

    Place the code as below in .htaccess file and Google Page Speed will love to give you a better grade under ‘enable gzip compression’ section.

    # Use mod_deflate to compress plain text files
    <IfModule mod_deflate.c>
    <FilesMatch ".(html|htm|xml)$">
    SetOutputFilter DEFLATE
    # Properly handle old browsers that do not support compression
    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch ^Mozilla/4\.0[678] no-gzip
    BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
    # Properly handle requests coming from behind proxies
    Header append Vary User-Agent env=!dont-vary
    </FilesMatch>
    </IfModule>
    Previous
    Next
    » 8 Useful SQL To Clean Up Wordpress Database
Leave a Comment