Gzip Apache Website

Apache 2.x Gzip Compression For Websites

Websites are more complex due to use of elaborate CSS style-sheets and JavaScript code. Most website content features text and multimedia such as images for slide-shows. Rich media such as photos, audio and videos are already compressed.

The Apache HTTP Server module called mod_deflate can compress content before it is delivered to the client-side. All modern browsers are capable of output compression. Even old browsers such as Microsoft’s Internet Explorer 7, 8 and 9 support output compression.

This tutorial uses HTML and JavaScript.

    Tools are required:

  • Text editor.
  • Apache HTTP Server (with mod_deflate).
  • Curl to test compression locally.
  • Browser to view output.

Optional Download and install Apache

Apache is HTTP server required in order to follow this tutorial. For more information about Apache visit Apache HTTP Server

Optional Download and install Curl

Curl is a URL syntax transfer tool required in order to follow this tutorial. For more information about Curl visit Curl

Enable Apache Modules

## ASSUMING DEBIAN LINUX BASED SYSTEM ##
# Enable Apache Module mod_deflate #
sudo a2enmod deflate
# Enable Apache Module mod_headers #
sudo a2enmod headers
# Restart Apache #
sudo service apache2 restart

On Debian systems, use the “a2enmod” command to enable the mod_deflate module. On Fedora systems, edit the httpd.conf file and uncomment “LoadModule deflate_module modules/mod_deflate.so”. Restart Apache to enable the changes.

.htaccess file

#  .htaccess
#  
#  Copyright 2013 edward <http://ojambo.com>
#  
#  This program is free software; you can redistribute it and/or modify
#  it under the terms of the GNU General Public License as published by
#  the Free Software Foundation; either version 2 of the License, or
#  (at your option) any later version.
#  
#  This program is distributed in the hope that it will be useful,
#  but WITHOUT ANY WARRANTY; without even the implied warranty of
#  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
#  GNU General Public License for more details.
#  
#  You should have received a copy of the GNU General Public License
#  along with this program; if not, write to the Free Software
#  Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
#  MA 02110-1301, USA.
#  
# 
####################
# GZIP COMPRESSION #
####################

<IfModule mod_deflate.c>
	# Compress Everything #
	SetOutputFilter DEFLATE

	# Compress Specific Files #
	AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/x-javascript application/x-httpd-php
	
	# Don’t compress #
	SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary
	SetEnvIfNoCase Request_URI \.(?:exe|t?gz|zip|bz2|sit|rar)$ no-gzip dont-vary

	# Dealing with proxy servers caching issues #
	<IfModule mod_headers.c>
		Header append Vary User-Agent
	</IfModule>

</IfModule> 

The “.htaccess” file requires the Apache HTTP Server. SetOutputFilter “DEFLATE” will compress all documents by default. AddOutputFilterByType is used to compress specific files. SetEnvIfNoCase Request_URI is used to ignore files matching provided regular expressions. The “User-Agent” header is changed to vary so that proxy servers can cache the correct content.

HTML-JS-Text-Gzip.html file

<!--
   HTML-JS-Text-Gzip.html
   
   Copyright 2013 edward <http://ojambo.com>
   
   This program is free software; you can redistribute it and/or modify
   it under the terms of the GNU General Public License as published by
   the Free Software Foundation; either version 2 of the License, or
   (at your option) any later version.
   
   This program is distributed in the hope that it will be useful,
   but WITHOUT ANY WARRANTY; without even the implied warranty of
   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
   GNU General Public License for more details.
   
   You should have received a copy of the GNU General Public License
   along with this program; if not, write to the Free Software
   Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
   MA 02110-1301, USA.
   
   
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>Ojambo.com Gzip HTML & JS</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<script type="text/JavaScript" src="jquery-1.9.1.js"></script>
	<script type="text/JavaScript">
		$(window).load(function () {
			// Click Function
			$("h1#demo").on("click", function(event) {
				alert("demo was clicked");
			});
		});
	</script>
</head>

<body>
	<h1 id="demo">Compressed Javascript Demo</h1>
</body>

</html>

The external JavaScript file was chosen due to its large size (268381 bytes). Several JavaScript files and multiple CSS files can also be included.

How to Use:

    Open Browser

  • Load test html file.
  • Compare empty .htaccess file to non-empty .htaccess file.

How to Test:

# Uncompressed Test #
curl -I -L http://ojambo.com
# Compressed Test #
curl -I -L -H 'Accept-Encoding: gzip,deflate' http://ojambo.com
    Open Command Line

  • Run Curl commands for uncompressed and compression.
  • Compare the “Content-Length” results for uncompressed to compressed.

Results:

Ojambo.com Gzip Apache Website Tutorial

Image Missing
Ojambo.com Unziped Apache Website

Image Missing
Ojambo.com Gzipped Apache Website

The HTML-JS-Text-Gzip.html file was renamed index.html so that it would be the default file for the website. The uncompressed results showed a total of 1430 bytes for the uncompressed HTML file. The compressed results showed 830 bytes for the same HTML file which was 58.00% of the uncompressed file.

Conclusion:

The Apache HTTP Server module mod_deflate is optional and must be enabled in order to send compressed data to the client-side. The mod_deflate compression is compatible to Gzip. By default all data will be compressed by mod_deflate.

The module mod_deflate can be configured using a “.htaccess” file. The module mod_deflate is cross-browser compatible.

    Recommendations:

  1. Compress all text based data such as HTML, CSS, and JavaScript files.
  2. Do not compressed previously compressed files such as photo, audio and video files.

Tags: , , , , , ,

This entry was posted on Wednesday, February 27th, 2013 at 12:29 am and is filed under Tips & Tricks. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

One Response to “Gzip Apache Website”

  1. Ojambo Gzip Apache Website Video 0051 Says:

    April 5th, 2013 at 12:02 am

    […] Video for the Ojambo.com Gzip Apache Website article. Part One of […]

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>