Blog

Speed Up your Website with Gzip Compression

Tags: , , , , , , , ,
You are currently viewing Speed Up your Website with Gzip Compression
Credits

The vast majority of websites today use some kind of compression, delivering their content, as most modern browsers support compression. Compression is useful when applied to text (html, javascript, js), as images (usually png) are already compressed. The result of compression is remarkable bandwidth saving, so the site becomes more responsive. This is also a SEO advantage.

Compression will slightly increase CPU usage, but in most cases this is not a problem, comparing to compression advantages.

The most common compression solution is gzip compression. Almost all web servers support gzip compression. Nginx has built-in http compression. This is probably a reason why Nginx rapidly gains popularity.

Here I describe how to setup and test gzip compression in a Debian system with Apache using Apache module mod_deflate. Mod_deflate is the Apache2 successor of Apache v1.* mod_gzip. For other popular web servers you can find information here: IIS, Nginx.

Installation

In latest Debian version (Debian 6 or Squeeze), mod_deflate is installed and enabled. If not:

a2enmod deflate
service apache2 restart

Edit website configutation file, for example:

nano /etc/apache2/sites-available/www.pontikis.net

add the following lines:

SetOutputFilter DEFLATE
SetEnvIfNoCase Request_URI .(?:gif|jpe?g|ico|png)$  no-gzip dont-vary
SetEnvIfNoCase Request_URI .(?:exe|t?gz|zip|bz2|sit|rar)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI .pdf$ no-gzip dont-vary

BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch bMSIE !no-gzip !gzip-only-text/html

Explanation of above Apache directives:

  • Line 1: Enable gzip compression
  • Line 2: Do not compress images
  • Line 3: Do not compress already compressed files
  • Line 4: Do not compress pdf
  • Line 6-8: Some exceptions for old browsers

That’s all. Don’t forget to restart Apache.

As an alternative, you can use an .htaccess file in your webroot directory (with the same Apache directives).

Gzip compression using PHP

If your site is PHP based, there is an alternative (not recommended) method to apply gzip compression. Just make the following changes to php.ini, save and restart Apache:

zlib.output_compression = On
zlib.output_compression_level = 6

Check gzip compression using mod_deflate logs

In order mod_deflate to keep logs, add the following lines to website configuration file (and restart Apache).

DeflateFilterNote Input instream
DeflateFilterNote Output outstream
DeflateFilterNote Ratio ratio

LogFormat '"%r" %{outstream}n/%{instream}n (%{ratio}n%%)' deflate
CustomLog /var/log/apache2/deflate_log deflate

To check mod_deflate log file:

tail -f /var/log/apache2/deflate_log

Example

"GET / HTTP/1.1" 4468/18229 (24%)
"GET /css/layout.css HTTP/1.1" 6384/34851 (18%)
"GET /lib/jquery_1.8.3/jquery-1.8.3.min.js HTTP/1.1" 33415/93637 (35%)
"GET /blog/ HTTP/1.1" 8948/45567 (19%)
"GET /blog/media/2013/03/how-to-write-code-for-any-database-with-php-adodb/home/people.png HTTP/1.1" -/- (-%)
"GET /labs/jui_datagrid/demo/ HTTP/1.1" 10247/44986 (22%)
"GET /feed/ HTTP/1.1" 20210/87272 (23%)

Comments on above log file entries:

  • Line 1: http://www.pontikis.net (compressed html document 4468 bytes, original 18229 bytes, compression ratio of 24%)
  • Line 2: relevant log for layout.css
  • Line 3: relevant log for jquery.js
  • Line 4: relevant log for http://www.pontikis.net/blog/
  • Line 5: image (people.png) was not compressed
  • Line 6: relevant log for http://www.pontikis.net/labs/jui_datagrid/demo/
  • Line 7: relevant log for http://www.pontikis.net/feed/ (xml document)

You probably need to remove logging in a production server, after you check compression results.

Check gzip compression with online tools

Suggested tools:

Check http headers

Gzip compression can be detected from http headers, looking for Content-Encoding: gzip. In this example, the page http://www.pontikis.net/blog/ is examined:

Chrome developer tools

Go to http://www.pontikis.net/blog/, press CTRL+SHIFT+I (or Menu button → Tools → Developer tools) and go to Network tab

Firebug (Firefox)

Go to http://www.pontikis.net/blog/, press F12 to activate Firebug and go to Net tab

Redbot.org

Using the online tool Redbot.org

We appreciate your feedback and suggestions. Leave us a comment below.