Ultimate GZIP Compression Using .

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