How to enable gzip compression on your website

Amardeep Rai
DEVUX
Published in
2 min readNov 27, 2017

Gzip is an automated server-side method of compressing files to make them smaller, which in turn will reduce the time it takes for a user’s browser to download them.

Enabling gzip compression

One of the simplest ways that you can enable gzip compression on your website is to add a file named .htaccess to the root of your web server (the place where you upload your HTML, CSS & JS files).

If you have an existing .htaccess file, find the mod_deflate module in the file and update it with the code below. If you do not have an existing .htaccess file, create a new one and copy and paste the code below into it:

<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml

# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>

How effective is gzip compression?

One of the main reasons gzip is so effective reducing file sizes is because CSS & HTML files have a lot of repeated characters and whitespace. Because gzip compresses these common characters, you could look to save around fifty to seventy percent in file size.

Testing compression

You can check if you have gzip enabled on your website by using a tool such as these:

This article was originally published on amardeeprai.com

--

--