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
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:
- Compress all text based data such as HTML, CSS, and JavaScript files.
- Do not compressed previously compressed files such as photo, audio and video files.
- References:
- Apache HTTP Server
- Curl