Comment activer la compression Gzip ou Brotli dans WordPress

Lorsqu'un navigateur demande une page à votre site WordPress, le serveur renvoie du HTML, du CSS, du JavaScript et d'autres fichiers texte. Sans compression, ces fichiers sont transmis à leur taille complète. L'activation de la compression peut réduire la taille de ces fichiers de 70 à 90 %, ce qui se traduit directement par des chargements de page plus rapides et des coûts de bande passante réduits.

Comment fonctionne la compression en coulisses

La compression repose sur une négociation entre le navigateur et le serveur. Lorsque le navigateur envoie une requête, il inclut un en-tête Accept-Encoding qui répertorie les algorithmes de compression qu'il prend en charge, généralement gzip, deflate, br. Le serveur vérifie cet en-tête, compresse la réponse en utilisant le meilleur algorithme disponible et la renvoie avec un en-tête Content-Encoding indiquant quelle méthode a été utilisée. Le navigateur décompresse ensuite le contenu avant de l'afficher. Tout ce processus est transparent pour l'utilisateur final.

Il existe deux principaux algorithmes de compression que vous rencontrerez :

• Gzip : la norme de l'industrie depuis plus de deux décennies. Pris en charge par tous les navigateurs et serveurs web. Des taux de compression de 70-80 % sont typiques pour les fichiers texte.
• Brotli : développé par Google et publié en 2015. Offre des taux de compression de 15-25 % meilleurs que Gzip pour une utilisation CPU similaire. Pris en charge par tous les navigateurs modernes. Ne fonctionne que sur les connexions HTTPS.

Quels types de fichiers doivent être compressés

La compression fonctionne le mieux sur le contenu textuel et répétitif. Vous devez l'activer pour les types MIME suivants :

• Fichiers texte : text/html, text/css, text/javascript, text/xml, text/plain
• Fichiers application : application/javascript, application/json, application/xml, application/rss+xml, application/atom+xml
• Polices et SVG : image/svg+xml, font/ttf, font/otf (les polices WOFF et WOFF2 sont déjà compressées)

Ne compressez pas les fichiers binaires comme JPEG, PNG, WebP, GIF, MP4 ou PDF. Ces formats utilisent déjà leurs propres algorithmes de compression, et les recompresser gaspille du CPU sans réduire la taille du fichier.

Économies de taille attendues

Pour vous donner une idée concrète de ce que la compression permet d'obtenir, voici quelques exemples concrets :

• Une page HTML WordPress typique (80 Ko) : compressée à environ 15-20 Ko avec Gzip, ou 12-16 Ko avec Brotli.
• Bibliothèque jQuery (90 Ko minifiée) : compressée à environ 30 Ko avec Gzip, ou 25 Ko avec Brotli.
• CSS Bootstrap (160 Ko) : compressé à environ 25 Ko avec Gzip, ou 20 Ko avec Brotli.
• Une grande réponse d'API JSON (500 Ko) : compressée à environ 50-80 Ko avec Gzip.

Sur l'ensemble d'un site WordPress, l'activation de la compression réduit généralement la taille totale des transferts de 60-80 %.

Apache : activer Gzip avec mod_deflate

Si votre site WordPress fonctionne sur Apache (ce qui est le cas pour la plupart des hébergeurs mutualisés), ajoutez ce qui suit à votre fichier .htaccess. Placez-le avant les règles de réécriture WordPress :

<IfModule mod_deflate.c>
    # Compresser HTML, CSS, JavaScript, Texte, XML et polices
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE text/javascript
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/x-javascript
    AddOutputFilterByType DEFLATE application/json
    AddOutputFilterByType DEFLATE application/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

    # Corriger les bugs des anciens navigateurs
    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch ^Mozilla/4\.0[678] no-gzip
    BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

    # S'assurer que les proxys délivrent le bon contenu
    Header append Vary Accept-Encoding
</IfModule>

Le wrapper IfModule garantit que cette configuration n'est appliquée que si mod_deflate est installé. Sur la plupart des hébergeurs, il est activé par défaut. Si vous obtenez une erreur 500 Internal Server Error après avoir ajouté ce code, contactez votre hébergeur pour confirmer que mod_deflate est disponible.

Nginx : activer la compression Gzip

Si votre serveur fonctionne sous Nginx, ajoutez les directives suivantes à votre bloc serveur ou au bloc http de votre fichier nginx.conf :

gzip on;
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_min_length 256;
gzip_types
    text/plain
    text/css
    text/xml
    text/javascript
    application/json
    application/javascript
    application/x-javascript
    application/xml
    application/xml+rss
    application/atom+xml
    image/svg+xml
    font/ttf
    font/otf;

Quelques notes sur ces paramètres : gzip_comp_level 6 offre un bon équilibre entre taux de compression et utilisation CPU. Les niveaux supérieurs à 6 offrent des rendements décroissants tout en augmentant considérablement la charge CPU. La directive gzip_min_length 256 empêche la compression des très petits fichiers où la surcharge de la compression dépasse les économies. La directive gzip_vary on indique aux proxys de mise en cache de stocker des versions distinctes pour le contenu compressé et non compressé.

Nginx : activer la compression Brotli

Brotli n'est pas inclus dans le paquet Nginx standard. Vous devez installer le module ngx_brotli séparément, ou utiliser une distribution qui l'inclut (de nombreuses distributions Linux modernes l'offrent en tant que paquet optionnel). Une fois installé, ajoutez ceci à votre configuration Nginx :

brotli on;
brotli_comp_level 6;
brotli_min_length 256;
brotli_types
    text/plain
    text/css
    text/xml
    text/javascript
    application/json
    application/javascript
    application/x-javascript
    application/xml
    application/xml+rss
    application/atom+xml
    image/svg+xml
    font/ttf
    font/otf;

Vous pouvez exécuter Gzip et Brotli en même temps. Nginx servira Brotli aux navigateurs qui le prennent en charge et reviendra à Gzip pour les autres. C'est la configuration recommandée pour une compatibilité maximale.

Extensions WordPress qui gèrent la compression

Si vous n'avez pas accès aux fichiers de configuration du serveur (courant sur l'hébergement mutualisé), plusieurs extensions de cache WordPress peuvent activer la compression pour vous :

• WP Rocket : ajoute automatiquement les règles de compression Gzip à votre fichier .htaccess lors de l'activation. Aucune configuration supplémentaire nécessaire. C'est une extension premium.
• LiteSpeed Cache : si votre hébergeur utilise le serveur web LiteSpeed, cette extension active la compression au niveau du serveur, ce qui est plus efficace que mod_deflate d'Apache. Gratuite et disponible dans le répertoire des extensions WordPress.
• W3 Total Cache : propose la compression Gzip dans le cadre de ses paramètres Browser Cache. Activez-la sous Performance > Browser Cache > HTTP compression. Gratuite, mais avec une courbe d'apprentissage plus raide.
• WP Super Cache : inclut une option « Compresser les pages » qui sert des fichiers statiques pré-compressés. Plus simple que W3 Total Cache mais avec moins d'options.

Gardez à l'esprit que si votre hébergeur active déjà la compression au niveau du serveur, l'ajouter à nouveau via une extension n'aura aucun effet supplémentaire. Vérifiez d'abord avant d'effectuer des modifications.

Comment tester si la compression fonctionne

Après avoir activé la compression, vous devez vérifier qu'elle est réellement appliquée. Voici plusieurs méthodes :

• DevTools du navigateur : ouvrez votre site, appuyez sur F12 pour ouvrir DevTools, allez dans l'onglet Réseau et rechargez la page. Cliquez sur n'importe quelle requête HTML, CSS ou JS et regardez les en-têtes de réponse. Vous devriez voir Content-Encoding: gzip ou Content-Encoding: br. Vous pouvez également comparer la colonne « Taille » (taille de transfert compressée) avec la colonne « Contenu » ou « Ressource » (taille décompressée réelle).
• Outils en ligne : des sites web comme GTmetrix, Google PageSpeed Insights et le vérificateur de compression de KeyCDN peuvent vérifier que votre site sert du contenu compressé. Ils signaleront les ressources non compressées s'il y en a.
• Ligne de commande : si vous avez accès à un terminal, vous pouvez utiliser curl -H "Accept-Encoding: gzip" -I https://votresite.com pour voir les en-têtes de réponse. Cherchez l'en-tête Content-Encoding dans la sortie.
• Analyse InspectWP : lancez une nouvelle analyse InspectWP après avoir activé la compression. La section performance affichera la valeur Content-Encoding. Elle devrait afficher gzip ou br (Brotli) au lieu d'être vide ou manquante.

Dépannage des problèmes courants

Si la compression ne semble pas fonctionner après les modifications, vérifiez les éléments suivants :

• Surcharge par CDN : si vous utilisez un CDN comme Cloudflare, le CDN peut gérer la compression indépendamment des paramètres de votre serveur. Cloudflare active Gzip par défaut et propose Brotli comme bascule dans les paramètres Speed.
• Module serveur non chargé : sur Apache, mod_deflate doit être activé. Contactez votre hébergeur si vous n'êtes pas sûr. Sur Nginx, le module Brotli nécessite une installation séparée.
• Règles conflictuelles : plusieurs extensions ou règles .htaccess qui tentent de configurer la compression peuvent entrer en conflit. Vérifiez les blocs mod_deflate en double dans votre fichier .htaccess.
• Couche proxy ou cache : les proxys inverses comme Varnish peuvent supprimer ou modifier les en-têtes de compression. Assurez-vous que chaque couche de votre pile est configurée correctement.