How to Apply Gzip Compression to WordPress to Reduce Page Size by 78%

Level of Difficulty – [Easy]

Compressing the size of your web page files, before sending them to the client browser, will result in faster page loading times and give a better user-experience for your visitors.

Reducing Your File Size Using Gzip Compression – will reduce the response times by reducing the size of the HTTP request.

This article will show how to use Gzip encoding to compress HTTP responses, which will reduce page download response times. This is the easiest technique for reducing page weight and also has the biggest impact for your site’s speed.

Many web site owners will use Gzip to compress their HTML documents, along with scripts and stylesheets.

The sites that choose to use Gzip compression for all of their HTML, JavaScripts and CSS stylesheets, can dramatically reduce their file sizes (by 70% or more), in turn reducing the response times of HTTP server calls.

Let’s get started…

Enabling Gzip File Compression

Although the server scripting language Apache will include the Mod_Deflate module, many web-hosts will disable it on their servers due to it taking too many resources.

NOTE: Enabling mod_deflate can be an easy task if you have access to the main configuration file httpd.conf, otherwise you’ll need to ask your web host to enable it for you (if willing).

Once mod_deflate is enabled, it can be applied to any directory or to the entire site. This will allow targeted compression of specific file-types and directories.

As seen in the screenshot below, by compressing your web page files with Gzip/mod_deflate, you can substantially reduce your file sizes by 70% or more.

Test Your Site for Gzip Compression Using the Link Below:

http://www.whatsmyip.org/http-compression-test/

Having your site use Gzip compression will mean faster page-loading times and a better user-experience for your visitors.

From the many different methods available, below are some of the best ways to implement HTTP compression for your website, or any specific part of it.

Applying Gzip Compression to Your WordPress Web Site Via .htaccess

When placed within the root directory .htaccess file, the following directives will tell Apache to compress all HTML, text, CSS sytlesheets and Javascript for your entire site.

If you want to limit the compression to a sub-directory, you will need to create an .htaccess file within the sub-directory folder, then add the code there.

NOTE: If you have files that are render blocking (won’t allow other information to download until file is fully loaded), having smaller file sizes will help those scripts & stylesheets to load faster allowing the additional components to load.

– – – –

The next step will require you to have access to the directory files of your website or blog to locate the ‘.htaccess’ file.

This .htaccess file may be located in the root directory or any sub-directory of your site and, it is not always visible by default.

If your site is controlled using cPanel… go to your ‘File Manager’, then checkmark the “Show Hidden Files”. When you open the ‘File Manager’, look for .htaccess… click on it, then click on ‘Edit’, then add the scripting below.

The wording with the ‘#’ are for descriptive purposes and are not required…

IMPORTANT: Be SURE to use the following link to copy/paste the script into your .htaccess file: https://speedrak.com/gzip-file-compression.pdf

You can place this scripting after other code that is within your .htaccess file.

To grab a copy of the scripting, just hover your mouse over the box below, then click on the ‘double page’ icon.

Either right click your mouse and copy the code, or press Ctrl + C on your keyboard, then Ctrl + V to paste into the .htaccess file.

# Enable file compression
<IfModule mod_deflate.c>
	<IfModule mod_setenvif.c>
		<IfModule mod_headers.c>
			SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ \
			^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
			RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
		</IfModule>
	</IfModule>
	<IfModule mod_filter.c>
		FilterDeclare COMPRESS
		FilterProvider COMPRESS DEFLATE resp=Content-Type $text/css
		FilterProvider COMPRESS DEFLATE resp=Content-Type $text/html
		FilterProvider COMPRESS DEFLATE resp=Content-Type $text/javascript
		FilterProvider COMPRESS DEFLATE resp=Content-Type $text/plain
		FilterProvider COMPRESS DEFLATE resp=Content-Type $text/xml
		FilterProvider COMPRESS DEFLATE resp=Content-Type $application/javascript
		FilterChain COMPRESS
		FilterProtocol COMPRESS DEFLATE change=yes;byteranges=no
	</IfModule>
	<IfModule !mod_filter.c>
		AddOutputFilterByType DEFLATE text/css text/html text/plain text/xml
		AddOutputFilterByType DEFLATE text/javascript application/javascript
	</IfModule>
	<IfModule mod_setenvif.c>
		BrowserMatch ^Mozilla/4 gzip-only-text/html
		BrowserMatch ^Mozilla/4\.0[678] no-gzip
		BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
		SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary
	</IfModule>
	<IfModule mod_headers.c>
		Header append Vary User-Agent env=!dont-vary
		Header append Vary Accept-Encoding
	</IfModule>
</IfModule>

Closing Comments – Apply Gzip Compression to Reduce Page Weight

Improving your site’s performance is a first step to making the search engines and your visitors happy.

It will also help catch the algorithmic eye of Google, because you are trying everything in your power to improve your Site’s Speed and Performance, which as you know, is a BIG PLUS with Google.

NOTE: This simple method of implementing Gzip Compression with the Mod_Deflate directive is an easy method to reduce the page weight of your entire website, which in turn will create quicker HTTP response times; I.E., faster site speed & download response times.

Combining Gzip Compression with Expires Headers (to Optimize your site’s Cache-Control), within the same .htaccess file, will give you a lethal combination (it’s a good thing), for faster loading times.

Much of the Gzip Compression and Mod_Deflate mentions are take-away’s from the book “.HTAccess Made Easy” ~ Written by Jeff Starr

In Future Articles – we will be discussing the Remaining Steps in greater detail, so be sure to put your email address in the box below for notification.

Tags: Gzip HTAccess File HTTP Requests