Si vous utilisez des outils d’analyse des performances de votre site web, tels que Google Lighthouse par exemple, vous aurez sûrement vu ce conseil passer :

Activez la compression gzip sur votre serveur web pour réduire le poids des réponses HTTP

Mais qu’est-ce que cela signifie exactement ?

Pourquoi compresser ?

Même si nos infrastructures réseau sont de plus en plus performantes, la performance de nos machines en termes de nombre de calculs effectués à la seconde évolue beaucoup plus rapidement.

C’est ce que prédisait la loi de Moore

Cela signifie notamment, qu’en terme de performances, il est aujourd’hui plus efficace de perdre quelques millisecondes pour compresser une donnée avant de l’envoyer, et de la décompresser à l’arrivée, que de l’envoyer brute.

Est-ce toujours le cas ?

Comme toute compression, il y a certains cas particuliers ou la compression n’est pas suffisamment efficace pour être intéressante, mais c’est très rare !

Si vous n’êtes pas familier avec les concepts de compression sans perte, je vous invite à lire notre précédent article pour vous familiariser avec certains concepts.

Notamment celui du taux de compression, qui varie selon les algorithmes, et les données à compresser

L’utilité de gzip

Vous connaissez sûrement le concept d’archive compressée appelée « zip », et bien gzip tire son nom de cette technologie, et signifie « GNU zip ».

Mais attention, car ce sont deux technologies bien différentes.

Un fichier zip est une archive, qui contient un ou plusieurs fichiers compressés individuelles, et regroupés ensemble dans un « dossier ». Il existe de nombreux algorithmes de compression compatibles pour créer une archive zip.

Gzip est différent, car c’est un logiciel de compression/décompression de fichier unique, mais également de flux de données, ce qui en fait un outil formidable pour traiter des données arrivant directement du réseau.

D’où son utilisation dans le monde du web

Et la compression qu’offre gzip n’est pas anodine, car on parle d’un taux de compression moyen d’environs 40% !

L’algorithme derrière gzip

Le logiciel Gzip utilise l’algorithme DEFLATE qui est lui même une combinaison entre l’algorithme LZ77 et le codage de Huffman.

Nous n’allons pas rentrer dans les détails de l’implémentation de cet algorithme, car ce serait trop long, mais nous allons parler des grands principes et de leurs avantages.

Si vous souhaitez comprendre l’implémentation au complet, je vous conseille cette série de vidéos !

LZ77 est un algorithme de compression (sans-perte) basé sur un dictionnaire de motifs.

Cela signifie que l’algorithme va parcourir les données binaires du fichier, indexer chaque nouveau motif découvert dans un dictionnaire, et remplacer le motif par son index dans le dictionnaire dans le fichier compressé.

Le parcours du fichier se fait avec une fenêtre glissante qui va parcourir chaque caractère, et l’associer aux n caractères précédent pour détecter un motif existant ou non, avec n supérieur ou égal à 1.

Donc la plus petite taille de motif sera de deux caractères

Cette méthode de compression possède un gros avantage : il n’y a pas besoin de posséder l’entièreté du fichier pour commencer la décompression.

Le dictionnaire étant situé au début du fichier compressé, et la détection des motifs étant linéaire (caractère par caractère), il suffit de relier chaque index à son motif correspondant dans le dictionnaire pour retrouver le fichier d’origine.

Activer la compression gzip sur votre site

Côté client

Pour activer la compression des réponses HTTP, il faut que le client et le serveur travaillent main dans la main pour se mettre d’accord sur une méthode de compression à utiliser.

Pour indiquer au serveur de compresser les données, le client (navigateur) doit ajouter une en-tête spécifique à toutes les requêtes, comme ceci :

"Accept-Encoding": gzip

Heureusement, tous les navigateurs web modernes ajoutent cette en-tête par défaut, vous n’aurez donc rien à faire.

Côté serveur

Le serveur, de son côté, doit compresser les données contenues dans la réponse, mais il doit également indiquer au client que la réponse a été compressée, avec l’en-tête de réponse suivante :

"Content-Encoding": gzip

Nginx

Pour activer la compression gzip sur Nginx, il faudra ajouter la directive suivante dans le fichier nginx.conf :

gzip on;

Par défaut, nginx ne compresse que le type MIME text/html, pour étendre cette compression, suivez la documentation officielle

Apache

Pour activer la compression gzip sur Apache (2+), il faudra d’abord activer le module deflate et redémarrer le service :

sudo a2enmod deflate
service apache2 restart

Puis ajouter la directive suivante dans le fichier apache2.conf :

#/etc/apache2/apache2.conf
#...

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml
 
  # Level of compression (highest compression level)
  DeflateCompressionLevel 9
 
  # Do not compress certain file types
  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$ no-gzip dont-vary
 
  # Make sure proxies don't deliver the wrong content
  Header append Vary User-Agent env=!dont-vary
</IfModule>

À noter

Attention, utiliser gzip n’exclut pas le fait de devoir minifier ses fichiers sources, la compression ne remplace pas la minification, elles sont complémentaires !

Et il faut savoir que si gzip n’est conçu que pour compresser des fichiers unique, il est possible de le coupler avec une archive TAR pour faire une archive compressée (.tar.gz)