Speed Up your Website with Gzip Compression

02:46:00 , , , , , , , 0 Comments

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.


How gzip works

This a nice video from Google about gzip compression.

Installation

In latest Debian version (Debian 6 or Squeeze), mod_deflate is installed and enabled. If not:
1
2
a2enmod deflate
service apache2 restart
Edit website configutation file, for example:
1
nano /etc/apache2/sites-available/www.pontikis.net
add the following lines:
1
2
3
4
5
6
7
8
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:
1
2
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).
1
2
3
4
5
6
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:
1
tail -f /var/log/apache2/deflate_log
Example
1
2
3
4
5
6
7
"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:
(click the thumb for full image)

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
(click the thumb for full image)

Firebug (Firefox)

Go to http://www.pontikis.net/blog/, press F12 to activate Firebug and go to Net tab
(click the thumb for full image)

Redbot.org

Using the online tool Redbot.org

0 comments :

Subscribe to: Post Comments ( Atom )