Enabling Gzip in .Htaccess

gzip-font-writeup.md

If you use @font-face (like I do) to enable cool custom fonts on your website, please read this article. I love @font-face to more effectively choose nice fonts for my website, but I never liked the 200-400 KB .ttf files that the user had to download in order to view the fonts. I did a little research and realized that I could simply add these heavy files to the Gzip process in my .Htaccess file (If you would like to read more about Gzip, click here). Turns out that it is very simple, just specify the type that you want to be added along with its corresponding file extension, then add that file type to your current list of file types to Gzip, below is the code needed to Gzip all files along with .ttf, .otf and .eot (three file types used in the @font-face process).

Code

Here is the code that enables Gzip for only .otf, .eot and .ttf files.

<ifmodule mod_deflate.c>
<ifmodule mod_mime.c>   #Checks if your server supports Addtype
Addtype font/opentype .otf
Addtype font/eot .eot
Addtype font/truetype .ttf
</ifmodule>
AddOutputFilterByType DEFLATE font/opentype font/truetype font/eot
</ifmodule>
#End Gzip

If you want to apply this to other files on your site at the same time (as almost everyone would), then here is the code that enables Gzip for .otf, .eot and .ttf files along with all the other files you would normally use on your website. The code without Gzip enabled for the font files can be found in the other file in this Gist.

<ifmodule mod_deflate.c>
<ifmodule mod_mime.c>   #Checks if your server supports Addtype
Addtype font/opentype .otf
Addtype font/eot .eot
Addtype font/truetype .ttf
</ifmodule>
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/x-javascript application/javascript text/text font/opentype font/truetype font/eot
</ifmodule>
#End Gzip

Yes, it is really that simple. You may ask "How effective is this method?". Well, before enabling, I had two .ttf files that totaled around 450 KB, afterward they only totaled 208 KB! You do the math, that is a 54% reduction! I highly recommend this if you use @font-face.

gzip-writeup.md

Can't remember where I learned this but it is fairly common and works wonders. In case you have not heard of it in the past, Gzip is a server process that essentially compresses your files on the fly before transmission to the user. It is primarily used to compress text files such as HTML, CSS, and JavaScript with impressive results. Take the 90KB Mootools framework for example, Gzip reduces it to 26KB saving the visitor time and your bandwidth.

<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript text/javascript
</ifmodule>
#End Gzip

Usage

This code can most likely be placed anywhere in the .htaccess file. I like to put it below the Rewrite conditions and above the Expires for organizational purposes. Note that the If statements are really only needed if you are unsure that your host has it enabled or not.

Pros

• Drastic file size reduction, need I say 26KB is less than 90KB more than once?
• Great for mobile users (where every KB counts).
• Easy to implement in the .htaccess file.
• Saves bandwidth.

Cons

• Increased server load.
• Not enabled by default on most shared servers.

Recommendation

If your hosting setup has Gzip enabled I highly recommend that you enable it in your .htaccess file by copying and pasting the above code into your .htaccess. If they don't have it enabled, simply ask, most of the time they will simply enable it for you