7/30/2019 Ultimate GZIP Compression Using Htaccess

1/2

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

RewriteEngine On

RewriteCond %{HTTP:Accept-encoding} gzip

RewriteCond %{HTTP_USER_AGENT} !Safari

RewriteCond %{REQUEST_FILENAME}.gz -f

RewriteRule ^(.*)$ /$1.gz [QSA,L]

ForceType text/css

Header append Vary Accept-Encoding

ForceType application/javascript

Header append Vary Accept-Encoding

7/30/2019 Ultimate GZIP Compression Using Htaccess

2/2

AddEncoding gzip .gz

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

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