Compressing web pages using Gzip or Deflate in HTTP

Interest of the compression

Today, the focus is often on site performance and bandwidth savings . Access times are measured and downloading (very precisely with many tools) in milliseconds. Many recommendations from Google and Yahoo mention of pages compression prior to transit on the network.

1. 1. The server compresses the data (HTML, CSS ...)
2. 2. Files through the network via HTTP
3. 3. The browser decompresses the data before interpreting

This represented an additional burden on web servers at a time when their power was reduced, can now become insignificant with respect to improvements, especially for mobile browsers. If compression imposes too heavy a burden to your server, you can pre-compress the contents, place them in cache and deliver them directly.

These techniques are planned for HTTP/1.1 (1999) may well be implemented for HTML documents but also CSS, XML or JavaScript. There is no need to use for binary files (images, videos, PDF ...). They do not exempt you from initially reduce the size of HTML or CSS (the "minifier") by applying other criteria such as the removal of excess space or unnecessary comments.

Browsers

The first question - in the cutthroat world of web design and wars between ancient and modern browsers - affects support this feature. But here, good news: we can consider that all browsers support the decompression of pages with HTTP/1.1:

Since Netscape 4.6


Microsoft Internet Explorer since 4.0 *
Opera since 5.12
Firefox all versions
Google Chrome all versions
Safari all versions

* Some small bugs with up to versions 5.0 and 6.0 included

Moreover, it is for browsers to send an HTTP header indicating the supported types of compressed pages . If this header is not included in those received by the server, he simply does not enable compression.

GET / HTTP/1.1
Host: www.alsacreations.com
Accept-Encoding: gzip
User-Agent: Firefox/3.6

The server then responds the same way, with Content-Encoding , and by following the compressed content of the page.

HTTP/1.1 200 OK
Server: Apache
Content-Type: text / html
Content-Encoding: gzip
Content-Length: 13337
...

Two formats coexist:

Deflate , which couples LZ77 algorithm and Huffman coding.
Gzip , deflate evolution, a little more efficient, better supported, more widespread.

Implementation in web servers

Warning: The following guidelines should be adjusted according to your configuration and your needs.

Apache is equipped with the official module mod_deflate since version 2.0 that uses zlib, and mod_gzip or mod_deflate to version 1.3. These modules are disabled by default, but can be activated in the general configuration of the server if you have access. Mod_deflate by default allows you to specify file types to compress on the fly with Directive AddOutputFilterByType DEFLATE . Once these modules available you can also use the files . htaccess in each directory for more flexibility (see next point).

Apache 2

Command line as root to enable the necessary modules:

a2enmod headers
a2enmod deflate
/ Etc/init.d/apache2 restart

Possibly also adding a file in mods-available/deflate.load and a symbolic link to it in mods-enabled / , or a line in httpd.conf :

LoadModule deflate_module / usr/lib/apache2/modules/mod_deflate.so

On Windows, it will show the way. Dll file the same name. Warning: If a symbolic link to mod_deflate.conf is already present in mods-enabled with a configuration directive general, it is possible that all your files are already compressed issued. Do a test first - see end of article.

Then we must add directives to the configuration (eg a file located in / etc/apache2/conf.d / ) to compress very specific file types in a specific directory too. This is recommended when placing all style sheets in an independent directory and JavaScripts, because the goal is not to (re) compress all files hosted on the web server but to focus on the essential. It is therefore possible to indicate <Location /css> to only apply these rules to this directory (we consider here the URL) and his descendants, or use  <Directory /chemin/absolu/vers/css>  if Referring to the file system.

< IfModule mod_deflate.c >
DeflateCompressionLevel 1
</ IfModule >

< Location />
AddOutputFilterByType DEFLATE text / plain
AddOutputFilterByType DEFLATE text / xml
AddOutputFilterByType DEFLATE text / html
AddOutputFilterByType DEFLATE text / css
AddOutputFilterByType DEFLATE image / svg + xml
AddOutputFilterByType DEFLATE application / xhtml + xml
AddOutputFilterByType DEFLATE application / xml
AddOutputFilterByType DEFLATE application / rss + xml
AddOutputFilterByType DEFLATE application / atom_xml
AddOutputFilterByType DEFLATE application / x-javascript
AddOutputFilterByType DEFLATE application / x-httpd-php
AddOutputFilterByType DEFLATE application / x-httpd-fastphp
AddOutputFilterByType DEFLATE application / x-httpd-eruby

SetOutputFilter DEFLATE

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
SetEnvIfNoCase Request_URI \. (?: Pdf | avi | mov | mp3 | mp4 | rm) $ 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

# For proxies
Header append Vary User-Agent env =! Dont-vary

</ Location >

DeflateCompressionLevel

• Shows the compression factor, from 1 (low, default) to 9 (strong).

AddOutputFilterByType DEFLATE text / html

• Applies compression on the files of mime type text / html

SetOutputFilter DEFLATE

• Active compression filter.

SetEnvIfNoCase Request_URI \. (?: Gif | jpe? G | png) $ no-gzip dont-vary

• Excludes binary type. Gif. Jpg. Jpeg. Png

BrowserMatch ^ Mozilla / 4 gzip-only-text/html

• Applies or disables compression (and variants) for some browsers. In the example above, we exclude Netscape 4.x which is mismanaging the compression of types other than text / html, and 4.06, 4.07, 4.08 that are worse for all file types. The last instruction compression for BrowserMatch restores the Internet Explorer which is also identified as Mozilla / 4 in the header User-Agent .

Do not forget to reboot (restart) or reload (reload) Apache after each configuration change.

/ Etc/init.d/apache2 restart

Apache 1.3

Activation of the module in httpd.conf:

LoadModule gzip_module modules / mod_gzip.so

And configuration, similar to the one mentioned before:

< IfModule mod_gzip.c >
mod_gzip_on Yes
Yes mod_gzip_can_negotiate
mod_gzip_static_suffix. gz
AddEncoding gzip. Gz
No mod_gzip_update_static
mod_gzip_command_version '/ mod_gzip_status'
mod_gzip_temp_dir / tmp
No mod_gzip_keep_workfiles
mod_gzip_minimum_file_size 500
mod_gzip_maximum_file_size 500000
mod_gzip_maximum_inmem_size 60000
mod_gzip_min_http 1000
mod_gzip_handle_methods GET POST
mod_gzip_item_exclude reqheader "User-Agent: Mozilla/4.0 [678]"
mod_gzip_item_include file \. $ html
mod_gzip_item_include file \. htm $
mod_gzip_item_include file \. php3 $
mod_gzip_item_include file \. php $
mod_gzip_item_include file \. $ js
mod_gzip_item_include file \. $ css
mod_gzip_item_include mime ^ text /
mod_gzip_item_exclude mime ^ httpd / unix-directory
mod_gzip_item_exclude mime ^ image /
Yes mod_gzip_dechunk
Yes mod_gzip_add_header_count
Yes mod_gzip_send_vary

</ IfModule >

Do not forget to reload Apache after each configuration change.

/ Usr / sbin / apachectl graceful

The options are relatively speaking (for English speakers), they will not be detailed in this article.

Microsoft IIS

IIS supports compression since version 4, but it suffers from bugs. In version 5, Microsoft's efforts have not borne fruit since it is always unstable. It is finally in version 6 that HTTP compression was completed. However it requires some manipulation (see Microsoft documentation: Using HTTP Compression for Faster Downloads (IIS 6.0) and tutorial in French to enable GZip compression in IIS6 .

Other servers are marginal. Lighttpd module is equipped with the aptly named mod_compress .

Quick solutions with a. Htaccess for Apache

The files . htaccess files are placed at the base of a directory and modifying the behavior of the server for the files it contains. We can place the configuration instructions above (without the Location directive or Directory).

Examples tested and operated on Alsacreations.com. If you get HTTP 500 errors after the implementation of the file. Htaccess, check its syntax, fitness for your server type and availability of modules. You can also combine it with caching options (mod_expires in the example for Apache 1.3) to avoid serving several times the same content to visitors and its compression by the server - this is another article.

Apache 2

Contents of the file. Htaccess in the directory containing the CSS and JavaScript files.

# Apache 2.0
SetOutputFilter DEFLATE
AddOutputFilterByType DEFLATE text / html text / css text / plain text / xml application / x-javascript

Apache 1.3

# Compression for CSS files
< IfModule mod_gzip.c >
mod_gzip_on Yes
Yes mod_gzip_dechunk
mod_gzip_minimum_file_size 1024
mod_gzip_maximum_file_size 100000
mod_gzip_item_include file \. $ css
mod_gzip_item_include mime ^ text / css $
</ IfModule >

< IfModule mod_expires.c >
ExpiresActive it
ExpiresDefault "access plus 1 month"
ExpiresByType text / css "access plus 1 day"
ExpiresByType image / png "access plus 1 week"
ExpiresByType image / gif "access plus 1 week"
ExpiresByType image / jpeg "access plus 1 week"
</ IfModule >
==================================================

Compressing JS files for #
< IfModule mod_gzip.c >
mod_gzip_on Yes
Yes mod_gzip_dechunk
mod_gzip_minimum_file_size 512
mod_gzip_maximum_file_size 1000000
mod_gzip_item_include file \. $ js
mod_gzip_item_include mime ^ application / x-javascript. *
</ IfModule >

# Cache
< IfModule mod_expires.c >
ExpiresActive it
ExpiresByType application / x-javascript "access plus 2 month"
ExpiresByType application / javascript "access plus 2 month"
ExpiresByType text / javascript "access plus 2 month"
</ IfModule >

Alternative in PHP

Function ob_gzhandler and all functions of type * ob_ available since PHP4 allow management of the output buffer, ie data that will be sent to the browser. It is then possible to generate the full content of the page and compress it with gzip before sending. Activates the buffer before the script with ob_start , and emptied at the end with ob_end_flush .

Function ob_gzhandler has the advantage of checking compression types supported by the browser (gzip, deflate, or none) before returning the buffer appropriately. If the browser does not support compressed pages this function will return false .

<? Php 

ob_start ( "ob_gzhandler" );

 ?>

... The rest of the code ...

<? Php

ob_end_flush ();

?>

Of course, this is adapt depending on the structure of your site. It is not always enough to put these instructions at the beginning and end of PHP script because many are already using their own CMS system buffer (buffer) internally.

Tests in practice

You can easily check the correct transfer and decompression by checking the properties of the page in the browser (in Firefox: right-click, page info, General tab, Size). Compare the original file and read the size (in byte-).

See also the information provided by the development extensions (Firebug type or development tools available in modern browsers). These include the tab  Network or  Network , and mention the HTTP headers compression and the amount of data downloaded.