Maîtrisez les outils et bonnes pratiques DevOps - DevOps Knowledge Hub Maîtrisez les outils et bonnes pratiques DevOps - DevOps Knowledge Hub

Maîtrise de la Compression Nginx : Gzip vs. Brotli pour les Performances Web

Maîtrisez la compression de contenu Nginx en comparant les algorithmes Gzip et Brotli. Apprenez les directives de configuration pratiques pour activer les deux, comprenez les compromis de performance et découvrez les meilleures pratiques comme l'utilisation de fichiers Brotli statiques pour réduire considérablement l'utilisation de la bande passante et accélérer la livraison de contenu sur vos serveurs web.

Maîtrise de la Compression Nginx : Gzip vs. Brotli pour les Performances Web

La compression Nginx fait partie de ces changements qui semblent mineurs jusqu'à ce que vous regardiez le panneau réseau. Un fichier CSS, un bundle JavaScript, une page HTML, une réponse API JSON ou un SVG peuvent souvent voyager sur le réseau sous forme d'une réponse beaucoup plus petite, puis se développer pour retrouver le même contenu dans le navigateur.

Le choix pratique n'est généralement pas "Gzip ou Brotli pour toujours". La plupart des configurations de production utilisent les deux : Brotli pour les navigateurs qui le demandent, Gzip comme solution de repli, et des fichiers statiques précompressés lorsque le pipeline de construction peut les créer à l'avance. Les détails comptent cependant. Un bloc de compression copié peut gaspiller du CPU, ignorer des types MIME importants, ou échouer silencieusement parce que le module Brotli n'est pas réellement installé.

Comprendre la Compression Web dans Nginx

La compression fonctionne en trouvant des motifs répétitifs dans les données (comme les fichiers HTML, CSS ou JavaScript) et en les remplaçant par des références plus courtes. Cela réduit la taille totale du fichier transféré sur le réseau. Nginx agit comme intermédiaire, appliquant l'algorithme de compression choisi dynamiquement avant d'envoyer les données au navigateur.

Nginx nécessite généralement le module ngx_http_gzip_module pour Gzip et un module Brotli séparé pour Brotli. La plupart des paquets Nginx courants incluent le support Gzip. Brotli est plus variable : certaines distributions le fournissent comme module dynamique, certains dépôts tiers l'incluent, et certaines constructions ne l'ont pas du tout.

Prérequis

Assurez-vous que votre installation Nginx prend en charge Brotli si vous prévoyez de l'utiliser. Vous pouvez souvent vérifier si Brotli est disponible en exécutant :

nginx -V 2>&1 | grep -i brotli

Si la sortie mentionne Brotli, confirmez s'il est compilé ou chargé comme module dynamique. Sur les systèmes Debian ou Ubuntu, vérifiez également les fichiers sous /etc/nginx/modules-enabled/ si votre paquet utilise des modules dynamiques :

ls -l /etc/nginx/modules-enabled/ | grep -i brotli

Si Nginx rejette brotli on; lors de nginx -t, le module n'est pas disponible pour ce binaire Nginx en cours d'exécution, même si le système d'exploitation a un paquet Brotli installé ailleurs.

1. Configuration de la Compression Gzip

Gzip est la norme mature et largement prise en charge pour la compression de contenu. Il offre un bon équilibre entre le taux de compression et la surcharge CPU.

Activation de Gzip dans la Configuration Nginx

Les paramètres Gzip sont généralement placés dans les blocs http, server ou location de votre fichier de configuration Nginx (nginx.conf ou fichiers de configuration inclus).

Pour activer la compression Gzip, utilisez les directives suivantes :

http {
    # Activer la compression Gzip
    gzip on;

    # Définir la taille minimale de réponse à compresser (octets)
    # Compresser uniquement les fichiers de plus de 1000 octets
    gzip_min_length 1000;

    # Niveau de compression (1=le plus rapide/compression la plus faible, 9=le plus lent/compression la plus élevée)
    gzip_comp_level 6;

    # Spécifier les types MIME à compresser
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript image/svg+xml;

    # Recommandé : Envoyer l'en-tête Vary: Accept-Encoding pour que les proxys mettent en cache les versions compressées et non compressées
    gzip_vary on;

    # Recommandé : Ajouter un en-tête gzip pour l'identification
    gzip_proxied any;
}

Explication des Directives Clés Gzip

  • gzip on; : Active le module Gzip.
  • gzip_comp_level : Régler ceci entre 4 et 6 est souvent le point idéal pour les performances. Des niveaux plus élevés économisent plus de bande passante mais augmentent l'utilisation du CPU sur le serveur.
  • gzip_types : Crucialement, vous ne devez jamais compresser des formats déjà compressés comme les images (.jpg, .png, .gif) ou les vidéos.

2. Configuration de la Compression Brotli

Brotli est un algorithme de compression plus récent développé par Google. Pour les actifs textuels, il produit souvent des fichiers plus petits que Gzip. Le gain exact dépend du contenu, du niveau de compression et du fait que les fichiers soient compressés à chaque requête ou à l'avance lors du déploiement.

Activation de Brotli dans la Configuration Nginx

La configuration Brotli utilise des directives similaires mais remplace gzip par brotli.

brotli on;
brotli_comp_level 6; # Généralement 4 à 8 est recommandé
brotli_static on; # Active la livraison de fichiers .br précompressés s'ils sont disponibles
brotli_types text/plain text/css application/json application/javascript application/x-javascript text/xml;

Note Importante sur la Pré-compression (brotli_static) :

La compression Brotli peut être intensive en CPU lorsqu'elle est effectuée à la volée pour chaque requête. Une bonne pratique courante est de pré-compresser les actifs à l'aide d'un outil dédié hors ligne (comme l'utilitaire en ligne de commande brotli) et de stocker la version .br à côté du fichier original (par exemple, style.css et style.css.br).

Régler brotli_static on; indique à Nginx de vérifier si un fichier .br précompressé existe pour la ressource demandée et de le servir directement si le client prend en charge Brotli, contournant ainsi entièrement le traitement en temps réel.

3. Gzip vs. Brotli : Faire le Bon Choix

Le choix entre Gzip et Brotli dépend fortement du support client et de vos ressources serveur.

Caractéristique Gzip Brotli Recommandation
Taux de Compression Bon Souvent meilleur pour les actifs textuels Brotli gagne généralement
Charge CPU (à la volée) Faible Modérée à Élevée Gzip est plus léger
Support Client Presque Universel (Tous les navigateurs modernes) Très Élevé (La plupart des navigateurs modernes) Gzip est plus sûr pour la compatibilité héritée
Pré-compression Possible, mais moins courante Hautement recommandée (brotli_static) Utilisez Brotli précompressé si possible

L'Approche Hybride : Meilleure Pratique

La configuration moderne la plus robuste utilise une configuration hybride, priorisant Brotli pour les clients modernes tout en fournissant Gzip comme solution de repli fiable.

  1. Prioriser Brotli : Configurez Brotli en premier, souvent avec brotli_static on; pour la vitesse.
  2. Repli sur Gzip : Assurez-vous que Gzip est activé et configuré pour gérer les clients qui ne prennent pas en charge Brotli.

Nginx choisit une réponse en fonction de l'en-tête Accept-Encoding du client et des modules activés dans votre construction. Dans le trafic normal du navigateur, Brotli est préféré lorsque le client annonce br ; Gzip reste utile pour les clients, outils, proxys et piles plus anciennes qui ne demandent que gzip.

Exemple de Configuration Hybride

Si votre version de Nginx prend en charge les deux modules, vous pouvez activer les deux simultanément. Nginx priorise le module qui sert le contenu en fonction des en-têtes de requête du client.

http {
    # --- Configuration Brotli ---
    brotli on;
    brotli_comp_level 6;
    brotli_static on;
    brotli_types
        text/plain
        text/css
        application/javascript
        application/json
        application/xml
        image/svg+xml;

    # --- Configuration Gzip (Repli) ---
    gzip on;
    gzip_comp_level 5;
    gzip_vary on;
    gzip_proxied any;
    gzip_types
        text/plain
        text/css
        application/javascript
        application/json
        application/xml
        image/svg+xml;
}

Conseils d'Optimisation des Performances

Quel que soit l'algorithme que vous sélectionnez, respectez ces meilleures pratiques pour un impact maximal :

1. Vérifier la Réponse Réelle

Ne présumez pas que la compression fonctionne parce que le fichier de configuration contient gzip on; ou brotli on;. Vérifiez une réponse réelle :

curl -I -H 'Accept-Encoding: br,gzip' https://example.com/app.js
curl -I -H 'Accept-Encoding: gzip' https://example.com/app.js

Recherchez Content-Encoding: br ou Content-Encoding: gzip. Gardez également Vary: Accept-Encoding sur les réponses qui peuvent être mises en cache par un CDN ou un proxy partagé, afin que les variantes compressées et non compressées ne soient pas mélangées.

2. Éviter la Sur-Compression

Ne réglez jamais gzip_comp_level ou brotli_comp_level trop haut (par exemple, 9 ou 11) à moins que votre serveur ne soit gravement sous-utilisé. Le gain marginal en réduction de taille de fichier justifie rarement les cycles CPU supplémentaires nécessaires au calcul.

3. Mettre en Cache les Fichiers Précompressés

Pour Brotli, l'utilisation de brotli_static on; et la pré-compression de vos actifs statiques est le gain de performance le plus important. Cela déplace la charge CPU du temps de requête au temps de déploiement.

4. Tester Votre Configuration

Après avoir modifié votre configuration Nginx, testez toujours la syntaxe avant de recharger :

sudo nginx -t

Si réussi, rechargez Nginx pour appliquer les modifications :

sudo systemctl reload nginx

Vous pouvez également utiliser les outils de développement du navigateur ou les services de test de performance pour confirmer que les réponses sont servies avec Content-Encoding: gzip ou Content-Encoding: br.

Une Manière Pratique de Déployer Cela

Commencez par Gzip si le site n'a aucune compression. Il est intégré dans la plupart des paquets Nginx et vous donne une base de référence rapide. Ajoutez ensuite Brotli une fois que vous avez confirmé le support du module et que vous avez un moyen de générer des fichiers .br pour les actifs statiques lors du déploiement.

Pour un site React, Vue ou de documentation statique, la meilleure configuration est généralement des fichiers .br et .gz précompressés pour les actifs construits, une compression dynamique modérée pour les réponses HTML et API, et une configuration CDN qui respecte Accept-Encoding. Pour une petite API fonctionnant près des limites du CPU, un niveau Gzip conservateur peut être le meilleur premier pas.

Le gain ne réside pas seulement dans des fichiers plus petits. Une bonne compression maintient la bande passante basse, aide les connexions client plus lentes et élimine le temps de transfert inutile sans modifier le code de l'application. La principale discipline est de tester les en-têtes, d'éviter de compresser les médias déjà compressés et de maintenir les niveaux de compression suffisamment raisonnables pour que votre serveur puisse encore respirer lors des pics de trafic.