Enable gzip compression

What is gzip compression?

When a user hits your website a call is made to your server to deliver the requested files.

The bigger these files are the longer it’s going to take for them to get to your browser and appear on the screen.

Gzip compresses your web pages and style sheets before sending them over to the browser. This drastically reduces transfer time since the files are much smaller.

In terms of cost versus benefit, gzip compression should be near the top of your page speed optimizations if you don’t have it setup already.

 

How to enable?

Option 1: Ask your host to enable Gzip

If the thought of messing about with server settings puts you into a panic, it might be better to simply reach out to your hosting provider and ask if they can enable this for you.

Option 2: Enable Gzip via .htaccess

If you’re like most WordPress users, chances are Apache is happily chugging away behind the scenes as your web server. In order to get it delivering compressed content, you’ll need to make some changes to your .htaccess file.

Your .htaccess file should be located in the root folder of your website. Bear in mind that it’s a dotfile, which means it might be hidden by default on both the remote server and your own machine if you copy the file to it. Check out the following linked useful overviews of how best to handle these files on Windows and Mac if you’re running into trouble at this point.

Now, working with a copy of your existing .htaccess file, add the following:

AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/opentype
# For Olders Browsers That Can’t Handle Compression
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

Next, replace your existing .htaccess file with your new one (being sure to keep a clean copy of your previous file to hand in case of emergency), and check your site here. All being well, you and your users should now be benefiting from the wonders of compression!