Qu'est-ce que la compression Brotli ?

Brotli est un algorithme de compression plus récent que GZIP, développé par Google. Il offre une meilleure compression (15-20% de mieux que GZIP) et est supporté par tous les navigateurs modernes depuis 2016.

Comment activer la compression GZIP sur Apache ?

Pour activer GZIP sur Apache, vous devez activer le module mod_deflate et ajouter la configuration dans votre fichier .htaccess ou httpd.conf. Le guide complet avec les configurations prêtes à l'emploi est disponible dans cet article.

Comment activer la compression GZIP sur Nginx ?

Pour activer GZIP sur Nginx, ajoutez la directive 'gzip on;' dans votre fichier nginx.conf avec les types MIME à compresser. Nginx inclut le support GZIP par défaut, il suffit de l'activer.

Comment vérifier si la compression GZIP est active ?

Vous pouvez vérifier la compression GZIP avec l'outil en ligne CheckGzipCompression.com, ou en utilisant les DevTools de votre navigateur (onglet Network) pour voir l'en-tête 'Content-Encoding: gzip'.

Quelle est la différence entre GZIP et Brotli ?

GZIP est plus ancien et compatible avec tous les navigateurs, offrant 60-80% de réduction. Brotli est plus récent, offre 70-90% de réduction (15-20% de mieux que GZIP) mais nécessite une configuration supplémentaire. Il est recommandé d'activer les deux : Brotli en priorité avec GZIP en fallback.

La compression serveur remplace-t-elle la minification ?

Non, la compression et la minification sont complémentaires. La minification optimise le code source en supprimant les espaces et commentaires. La compression compresse ensuite le fichier minifié pour un gain supplémentaire lors du transfert réseau. Les deux techniques ensemble offrent les meilleurs résultats.

Compression GZIP et Brotli : Guide complet pour Apache et Nginx — Réduisez la taille de vos fichiers de 70 à 90%

Q: Qu'est-ce que la compression GZIP ?

GZIP est un algorithme de compression qui réduit la taille des fichiers lors de leur transfert entre le serveur et le navigateur. Il peut réduire la taille des fichiers texte (HTML, CSS, JavaScript) de 60 à 80%.

Pourquoi activer la compression serveur ?

La compression serveur est l'une des optimisations les plus efficaces et les plus simples à mettre en place. Contrairement à la minification qui optimise le code source, la compression réduit la taille des fichiers lors de leur transfert entre le serveur et le navigateur. Combinée à la minification, elle peut réduire la taille totale de vos fichiers de 70 à 90%, améliorant drastiquement les temps de chargement et l'expérience utilisateur.

Réduction de 70-90% de la taille des fichiers transférés

Amélioration des temps de chargement de 50-70%

Économies substantielles sur la bande passante et les coûts d'hébergement

Meilleur score dans les Core Web Vitals de Google

Expérience utilisateur optimisée, surtout sur connexions lentes

Impact réel de la compression sur les performances

Métriques de performance concrètes

Voici des données réelles d'un site e-commerce ayant activé la compression GZIP :

Graphique montrant l'amélioration des performances après activation de la compression

Avant optimisation

Taille des fichiers :2.5 MB

Temps de chargement :1.2s

Après optimisation

Taille des fichiers :380 KB

Temps de chargement :0.3s

Améliorations

Réduction de 85% de la taille transférée (de 2,5 MB à 380 KB)

Amélioration de 75% du temps de chargement (de 1,2s à 0,3s)

Économies de 85% sur la bande passante

Amélioration significative du LCP (Largest Contentful Paint)

Impact sur le SEO et les Core Web Vitals

La compression améliore directement vos métriques de performance web :

LCP (Largest Contentful Paint) : -40 à -60% grâce à des fichiers plus petits

FID (First Input Delay) : -30% grâce à moins de données à parser

CLS (Cumulative Layout Shift) : Réduction des reflows

TTI (Time to Interactive) : -50% de temps d'attente

Qu'est-ce que la compression serveur ?

Compression vs Minification : Comprendre la différence

La minification et la compression sont deux techniques complémentaires mais différentes. La minification supprime les espaces, commentaires et optimise le code source. La compression (GZIP ou Brotli) compresse ensuite le fichier déjà minifié pour un gain supplémentaire lors du transfert réseau.

Imaginez que votre fichier est une valise. La minification, c'est enlever tout ce qui est inutile de la valise. La compression, c'est utiliser une machine à comprimer pour rendre la valise encore plus compacte avant de l'envoyer. Les deux techniques ensemble offrent les meilleurs résultats.

1. Écrire votre code JavaScript ou CSS normalement

2. Minifier le code (réduction de 40-80%)

3. Compresser le fichier minifié avec GZIP/Brotli (réduction supplémentaire de 60-80%)

4. Résultat : fichier final 5 à 10 fois plus petit que l'original

GZIP vs Brotli : Quelle compression choisir ?

GZIP est la compression la plus répandue et compatible avec tous les navigateurs. Brotli est plus récent et offre une meilleure compression (15-20% de mieux que GZIP), mais nécessite une configuration supplémentaire.

GZIP

compression:60-80% de réduction

compatibility:100% des navigateurs

cpu:Faible consommation CPU

setup:Configuration simple

Brotli

compression:70-90% de réduction

compatibility:Tous les navigateurs modernes (2016+)

cpu:Consommation CPU légèrement plus élevée

setup:Configuration plus complexe

Recommandation : Activez les deux ! Configurez Brotli en priorité, avec GZIP en fallback pour les navigateurs plus anciens.

Configuration GZIP sur Apache

Méthode 1 : Activation via .htaccess (recommandé pour débutants)

La méthode la plus simple pour activer GZIP sur Apache est d'utiliser le fichier .htaccess. Cette méthode fonctionne même si vous n'avez pas accès à la configuration principale du serveur.

Créer ou modifier le fichier .htaccess

# Activer la compression GZIP
<IfModule mod_deflate.c>
  # Compresser HTML, CSS, JavaScript, Text, XML et fonts
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/json
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/atom+xml
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/woff
  AddOutputFilterByType DEFLATE font/woff2
  
  # Ne pas compresser les images déjà compressées
  SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|webp)$ no-gzip dont-vary
  SetEnvIfNoCase Request_URI \.(?:exe|t?gz|zip|bz2|sit|rar)$ no-gzip dont-vary
</IfModule>

Vérifier que le module mod_deflate est activé

# Pour vérifier, exécutez cette commande sur votre serveur :
apache2ctl -M | grep deflate

# Si le module n'est pas listé, activez-le avec :
sudo a2enmod deflate
sudo systemctl restart apache2

Méthode 2 : Configuration dans httpd.conf (pour utilisateurs avancés)

Pour une configuration plus globale et performante, configurez GZIP directement dans le fichier de configuration principal d'Apache.

Configuration

# Dans /etc/apache2/apache2.conf ou /etc/httpd/httpd.conf

# Activer le module deflate
LoadModule deflate_module modules/mod_deflate.so

# Configuration de la compression
<IfModule mod_deflate.c>
  # Niveau de compression (1-9, 6 est un bon compromis)
  DeflateCompressionLevel 6
  
  # Types MIME à compresser
  AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css
  AddOutputFilterByType DEFLATE text/javascript application/javascript
  AddOutputFilterByType DEFLATE application/json application/xml
  AddOutputFilterByType DEFLATE application/xhtml+xml application/rss+xml
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE font/ttf font/otf font/woff font/woff2
  
  # Exclure les fichiers déjà compressés
  SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|webp|ico|gz|zip|bz2|rar)$ no-gzip
  
  # Exclure les fichiers trop petits (moins de 1 KB)
  DeflateFilterByType text/html text/plain text/xml text/css text/javascript application/javascript
</IfModule>

Après modification de httpd.conf, redémarrez Apache avec : sudo systemctl restart apache2 (ou httpd selon votre distribution)

Configuration Brotli sur Apache

Installation du module mod_brotli

Brotli nécessite l'installation d'un module supplémentaire. Voici comment l'installer selon votre système.

Installation sur Ubuntu/Debian

# Installer les dépendances
sudo apt-get update
sudo apt-get install -y libbrotli-dev

# Installer mod_brotli depuis les sources
# Télécharger depuis : https://github.com/kjdev/apache-mod-brotli
# Ou utiliser le PPA si disponible

Activation du module

# Activer le module
sudo a2enmod brotli
sudo systemctl restart apache2

Configuration Brotli dans .htaccess

Une fois le module installé, configurez Brotli dans votre .htaccess avec priorité sur GZIP.

Configuration

# Configuration Brotli (priorité sur GZIP)
<IfModule mod_brotli.c>
  # Niveau de compression (1-11, 6 est recommandé)
  BrotliCompressionLevel 6
  
  # Types MIME à compresser
  AddOutputFilterByType BROTLI_COMPRESS text/html text/plain text/xml text/css
  AddOutputFilterByType BROTLI_COMPRESS text/javascript application/javascript
  AddOutputFilterByType BROTLI_COMPRESS application/json application/xml
  AddOutputFilterByType BROTLI_COMPRESS application/xhtml+xml application/rss+xml
  AddOutputFilterByType BROTLI_COMPRESS image/svg+xml
  AddOutputFilterByType BROTLI_COMPRESS font/ttf font/otf font/woff font/woff2
  
  # Exclure les fichiers déjà compressés
  SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|webp|ico|gz|zip|bz2|rar)$ no-brotli
</IfModule>

# Configuration GZIP en fallback
<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/css text/javascript application/javascript application/json
</IfModule>

Le navigateur choisira automatiquement Brotli s'il le supporte, sinon il utilisera GZIP.

Configuration GZIP sur Nginx

Configuration de base dans nginx.conf

Nginx inclut le support GZIP par défaut. Il suffit de l'activer dans votre configuration.

Configuration

# Dans /etc/nginx/nginx.conf (configuration globale)
# Ou dans votre fichier de site spécifique

# Activer la compression GZIP
gzip on;
gzip_vary on;
gzip_proxied any;

# Niveau de compression (1-9, 6 est recommandé)
gzip_comp_level 6;

# Types MIME à compresser
gzip_types
    text/plain
    text/css
    text/xml
    text/javascript
    application/json
    application/javascript
    application/xml+rss
    application/atom+xml
    image/svg+xml
    font/ttf
    font/otf
    font/woff
    font/woff2;

# Taille minimale des fichiers à compresser (1 KB)
gzip_min_length 1000;

# Ne pas compresser les fichiers déjà compressés
gzip_disable "msie6";

Après modification, testez la configuration avec : sudo nginx -t puis redémarrez avec : sudo systemctl restart nginx

Configuration optimale pour la production

Configuration avancée pour maximiser les performances en production.

Configuration

# Configuration optimale GZIP pour Nginx
gzip on;
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;

gzip_types
    text/plain
    text/css
    text/xml
    text/javascript
    application/json
    application/javascript
    application/xml+rss
    application/atom+xml
    image/svg+xml
    font/ttf
    font/otf
    font/woff
    font/woff2;

gzip_min_length 1000;
gzip_disable "msie6";

# Cache des fichiers compressés
gzip_static on;

gzip_static permet de servir des fichiers pré-compressés (.gz) s'ils existent, améliorant encore les performances.

Configuration Brotli sur Nginx

Installation du module ngx_brotli

Nginx nécessite l'installation du module ngx_brotli. Voici comment procéder.

Installation depuis les sources

# Installer les dépendances
sudo apt-get update
sudo apt-get install -y libbrotli-dev

# Télécharger ngx_brotli
cd /tmp
git clone https://github.com/google/ngx_brotli.git
cd ngx_brotli
git submodule update --init

# Recompiler Nginx avec le module (nécessite les sources de Nginx)
# Consultez la documentation officielle pour les détails complets

Installation via package (si disponible)

# Sur certaines distributions, ngx_brotli est disponible via package
# Vérifiez avec votre gestionnaire de paquets

Configuration Brotli dans nginx.conf

Une fois le module installé, configurez Brotli avec GZIP en fallback.

Configuration

# Configuration Brotli (priorité sur GZIP)
brotli on;
brotli_comp_level 6;
brotli_types
    text/plain
    text/css
    text/xml
    text/javascript
    application/json
    application/javascript
    application/xml+rss
    application/atom+xml
    image/svg+xml
    font/ttf
    font/otf
    font/woff
    font/woff2;

brotli_min_length 1000;

# Configuration GZIP en fallback
gzip on;
gzip_vary on;
gzip_comp_level 6;
gzip_types text/plain text/css text/javascript application/javascript application/json;
gzip_min_length 1000;

Le navigateur choisira automatiquement Brotli s'il le supporte (navigateurs modernes), sinon GZIP sera utilisé.

Vérifier que la compression fonctionne

Utiliser un outil en ligne de vérification

Le moyen le plus simple de vérifier si la compression GZIP ou Brotli est active sur votre site est d'utiliser un outil en ligne spécialisé.

Interface d'un outil de vérification de compression montrant les résultats

GiftOfSpeed Gzip/Brotli Test

Outil gratuit et simple pour vérifier la compression GZIP et Brotli de votre site web

https://www.giftofspeed.com/gzip-test/

Fonctionnalités :

•Vérification instantanée de la compression GZIP
•Détection de la compression Brotli
•Affichage de la taille originale vs compressée
•Pourcentage de réduction affiché
•Test sur plusieurs ressources (HTML, CSS, JS)

Comment utiliser :

1. Visitez https://www.giftofspeed.com/gzip-test/

2. Entrez l'URL de votre site web

3. Cliquez sur 'Test webpage'

4. Consultez les résultats : vous verrez si GZIP/Brotli est actif et le pourcentage de réduction

Vérification manuelle avec les DevTools du navigateur

Vous pouvez aussi vérifier la compression directement dans les outils de développement de votre navigateur.

Ouvrir les DevTools

Appuyez sur F12 ou Cmd+Option+I (Mac) / Ctrl+Shift+I (Windows/Linux)

Onglet Network

Allez dans l'onglet 'Network' et rechargez la page

Vérifier les en-têtes

Cliquez sur une ressource (HTML, CSS, JS) et regardez l'onglet 'Headers'. Vous devriez voir 'Content-Encoding: gzip' ou 'Content-Encoding: br' (Brotli)

Exemple

# Exemple d'en-tête de réponse avec compression GZIP
HTTP/1.1 200 OK
Content-Type: text/css
Content-Encoding: gzip
Content-Length: 15234

# Exemple d'en-tête de réponse avec compression Brotli
HTTP/1.1 200 OK
Content-Type: text/css
Content-Encoding: br
Content-Length: 12345

Bonnes pratiques et recommandations

Quels fichiers compresser ?

Compressez les fichiers texte, mais évitez de compresser les fichiers déjà compressés.

À compresser :

HTML, CSS, JavaScript

JSON, XML, SVG

Polices (TTF, OTF, WOFF, WOFF2)

Fichiers texte (TXT, CSV)

Ne pas compresser :

Images déjà compressées (JPEG, PNG, GIF, WebP)

Fichiers binaires (PDF, ZIP, EXE)

Fichiers vidéo et audio

Fichiers déjà compressés (.gz, .bz2)

Niveaux de compression optimaux

Trouvez le bon équilibre entre taille et consommation CPU.

GZIP niveau 6 : Bon compromis pour la plupart des sites

Brotli niveau 6 : Optimal pour Brotli (meilleure compression que GZIP niveau 6)

Évitez le niveau 9 : Gain marginal pour une consommation CPU importante

Niveau 1-3 : Pour les serveurs avec peu de ressources CPU

Taille minimale des fichiers

Ne compressez pas les très petits fichiers, le gain est négligeable.

Configurez une taille minimale de 1 KB (1000 octets). Les fichiers plus petits ne seront pas compressés, économisant des ressources CPU.

Cache et compression

Combinez compression et mise en cache pour des performances optimales.

Servez des fichiers pré-compressés (.gz, .br) quand possible

Configurez des en-têtes Cache-Control appropriés

Utilisez ETags pour la validation de cache

Activez le cache des fichiers compressés dans Nginx (gzip_static)

Dépannage courant

La compression ne fonctionne pas

Si la compression ne semble pas active, vérifiez ces points :

Vérifiez que le module mod_deflate (Apache) ou gzip (Nginx) est bien activé

Vérifiez les logs d'erreur du serveur pour des messages d'erreur

Assurez-vous que les types MIME sont correctement configurés

Vérifiez que le navigateur envoie l'en-tête 'Accept-Encoding: gzip, br'

Testez avec un outil en ligne comme GiftOfSpeed Gzip/Brotli Test

Erreurs de configuration Apache

Problèmes courants avec Apache et leurs solutions.

Erreurs et solutions

# Erreur : 'mod_deflate' not found
# Solution : Activez le module
sudo a2enmod deflate
sudo systemctl restart apache2

# Erreur : Syntax error dans .htaccess
# Solution : Vérifiez la syntaxe, chaque ligne doit être correcte

Erreurs de configuration Nginx

Problèmes courants avec Nginx et leurs solutions.

Erreurs et solutions

# Erreur : 'unknown directive "gzip"'
# Solution : Vérifiez que vous n'avez pas de faute de frappe
# gzip doit être écrit exactement ainsi

# Erreur : Configuration test failed
# Solution : Testez avec sudo nginx -t pour voir les erreurs exactes

Conclusion

Activer la compression GZIP et Brotli sur vos serveurs Apache ou Nginx est une optimisation essentielle qui peut réduire drastiquement la taille de vos fichiers transférés. Combinée à la minification de votre code JavaScript et CSS, la compression peut améliorer significativement les performances de votre site web, réduire vos coûts de bande passante et améliorer votre référencement Google grâce à de meilleurs Core Web Vitals.

Activez GZIP en priorité (compatible avec tous les navigateurs)

Ajoutez Brotli si possible pour une compression encore meilleure

Configurez une taille minimale de 1 KB pour éviter de compresser les petits fichiers

Testez régulièrement avec GiftOfSpeed Gzip/Brotli Test pour vérifier que tout fonctionne

Combinez compression et minification pour des résultats optimaux

Surveillez l'impact sur vos Core Web Vitals dans Google Search Console

Prêt à optimiser vos fichiers ?

Essayer notre outil de minification maintenant

Compression GZIP et Brotli : Guide complet pour Apache et Nginx — Réduisez la taille de vos fichiers de 70 à 90%

Pourquoi activer la compression serveur ?

Impact réel de la compression sur les performances

Avant optimisation

Après optimisation

Améliorations

Qu'est-ce que la compression serveur ?

GZIP

Brotli

Configuration GZIP sur Apache

Créer ou modifier le fichier .htaccess

Vérifier que le module mod_deflate est activé

Configuration

Configuration Brotli sur Apache

Installation sur Ubuntu/Debian

Activation du module

Configuration

Configuration GZIP sur Nginx

Configuration

Configuration

Configuration Brotli sur Nginx

Installation depuis les sources

Installation via package (si disponible)

Configuration

Vérifier que la compression fonctionne

GiftOfSpeed Gzip/Brotli Test

Fonctionnalités :

Comment utiliser :

Ouvrir les DevTools

Onglet Network

Vérifier les en-têtes

Exemple

Bonnes pratiques et recommandations

À compresser :

Ne pas compresser :

Dépannage courant

Erreurs et solutions

Erreurs et solutions

Conclusion

Articles connexes