Pour obtenir des temps de chargement rapides sur votre site WordPress, il est crucial de réduire la taille de vos pages. Cela peut faire la différence entre un site qui se charge en moins d’une seconde et un site qui donne l’impression de charger indéfiniment. L’activation de la compression GZIP peut aider à réduire la taille de votre page Web, ce qui peut réduire considérablement le temps de téléchargement de la ressource, réduire l’utilisation des données pour le client et améliorer le temps d’affichage initial de vos pages (Time to first Byte – TTFB). Tous les navigateurs modernes le supportent et négocient automatiquement la compression GZIP pour toutes les requêtes HTTP. Aujourd’hui, nous allons partager avec vous comment vérifier et activer la compression GZIP sur votre serveur web.

Qu’est-ce que la compression GZIP ?

GZIP est un format de fichier et une application logicielle utilisée pour la compression et la décompression de fichiers. La compression GZIP est activée côté serveur et permet de réduire davantage la taille de vos fichiers HTML, feuilles de style et fichiers JavaScript. Il ne fonctionnera pas sur les images car celles-ci sont déjà compressées d’une autre manière. Certains ont connu des réductions allant jusqu’à 70 % en grâce à la compression. C’est probablement l’une des optimisations les plus faciles que vous pourriez mettre en place sur votre WordPress.

La compression est le processus d’encodage de l’information en utilisant moins de bits. Ilya Grigorik, Google

Lorsqu’un navigateur Web visite un site Web, il vérifie si le serveur Web a activé GZIP en vérifiant si l’en-tête de réponse « content-encoding : gzip » existe. Si l’en-tête est détecté, il sert les fichiers compressés et plus petits. Si ce n’est pas le cas, il sert les fichiers non compressés. Si vous n’avez pas activé GZIP, vous verrez très probablement des avertissements et des erreurs dans les outils de test de vitesse tels que Google PageSpeed Insights et GTmetrix.

Avertissement GZIP dans Google PageSpeed Insights

Comme vous pouvez le voir, Google dit que la compression des ressources avec GZIP ou deflate peut réduire le nombre d’octets envoyés sur le réseau.

Avertissement PageSpeed Insight activer GZIP

Conseil pour l’activation de la compression dans Google PageSpeed Insight

Avertissement GZIP dans GTmetrix

GTmetrix recommande également de permettre la compression GZIP pour réduire la taille de transfert des ressources statiques.

Activer compression GZIP GTMetrix

Conseil pour l’activation de la compression GZIP dans GTmetrix

Comment vérifier si la compression GZIP est activée ?

GZIP est très répandu de nos jours, et il est activé par défaut sur tous les serveurs de Kinsta. Vous n’avez pas à vous soucier de la prise en charge de GZIP dans les navigateurs, car beaucoup d’entre eux la prennent en charge depuis plus de 17 ans. Voici une liste de navigateurs capables de gérer l’en-tête de réponse HTTP « content encodage : gzip » :

  • Internet Explorer 5.5+ (Juillet 2000)
  • Opera 5+ (Juin 2000)
  • Firefox 0.9.5+ (Octobre 2001)
  • Chrome (peu après son lancement en 2008)
  • Safari (peu après son premier lancement en 2003)

Si vous utilisez un autre hébergeur WordPress, vous devriez toujours vérifier qu’il est activé, car les administrateurs du serveur négligent souvent cette optimisation. Il existe deux façons rapides de vérifier la compression GZIP :

1. Vérifier l’outil de compression GZIP

La première et la plus rapide façon de vérifier si la compression GZIP est activée sur votre site est de simplement se diriger vers un outil de test de compression GZIP gratuit. Il suffit d’entrer votre site Web et de cliquer sur Rechercher. Il retournera la quantité qui a été sauvegardée en comprimant la page avec GZIP. Ou alors il retournera une erreur vous indiquant que GZIP n’est pas activé. Comme vous pouvez le voir dans notre test ci-dessous, nous avons gagné 66,9%.

Vérifier compression GZIP WordPress

Vérifier la compression GZIP

Et n’oubliez pas que GZIP s’applique également à vos ressources statiques. Ce qui signifie que si vous servez des ressources à partir d’un CDN, vous voudrez vous assurer que la compression GZIP est également activée. Tous les fournisseurs de CDN modernes prennent en charge la compression GZIP, comme le CDN Kinsta, Cloudflare, KeyCDN et CloudFront. Vous pouvez également le tester facilement en exécutant simplement l’un de vos fichiers CSS ou JavaScript sur votre CDN à l’aide de l’outil.

Vérifier compression GZIP CDN

Vérifier la compression GZIP sur un CDN

2. Réponse GZIP content-encoding dans le header HTTP

La deuxième façon de vérifier est de vérifier si l’en-tête de réponse HTTP « content-encoding : gzip » est actif sur votre site. C’est ce que le navigateur recherche lorsqu’il envoie une requête au serveur. Vous pouvez ouvrir Chrome Devtools et regarder votre premier en-tête de réponse sous la section réseau.

Vérifier réponse GZIP header

content-encoding: Réponse GZIP dans le header HTTP

Vous pouvez également cliquer sur l’option « voir les grandes requêtes » et elle vous montrera la taille originale et compressée de la page. Comme vous pouvez le voir ci-dessous, la page originale était de 51,6 Ko et la version compressée avec GZIP est de 17,7 Ko.

Taille compression Chrome Devtools

Voir la taille de la page compressée dans les outils de développement de Chrome

Comment activer la compression GZIP

Si la compression GZIP n’est pas activée, vous pouvez l’activer sur votre serveur web.

Activer GZIP avec une extension WordPress

La première solution et l’une des plus simples est l’utilisation d’une extension de mise en cache qui supporte l’activation de GZIP. WP Rocket par exemple ajoute automatiquement les règles de compression GZIP dans votre fichier .htaccess en utilisant le module mod_deflate. W3 Total Cache a aussi un moyen de l’activer pour vous dans sa section performance. Même s’il s’agit d’extensions, cela dépend toujours des permissions pour modifier les fichiers sur votre serveur web. Si votre extension de mise en cache n’a pas la permission, vous devrez demander à votre hébergeur ou utiliser un extrait de code ci-dessous.

Activer GZIP sur Apache

La deuxième façon d’activer la compression Gzip est d’éditer votre fichier .htaccess. La plupart des hébergeurs partagés utilisent Apache, dans lequel vous pouvez simplement ajouter le code ci-dessous dans votre fichier .htaccess. Vous pouvez trouver votre fichier .htaccess à la racine de votre site WordPress via FTP.

Important : Assurez-vous que mod_filter est bien chargé sur votre serveur, sinon la directive AddOutputFilterByType ne fonctionnera pas et pourra causer une erreur 500. Nous vous recommandons de vérifier vos logs d’erreurssi vous avez des erreurs avec le code ci-dessous.


  # 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

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent

Assurez-vous de l’ajouter sous le contenu actuel de votre fichier .htaccess. Exemple ci-dessous :

Ajouter code GZIP

Exemple de code .htaccess pour GZIP sur Apache

Activer GZIP sur NGINX

Si vous utilisez NGINX, ajoutez simplement ce qui suit à votre fichier nginx.conf.

gzip on;
gzip_disable "MSIE [1-6]\.(?!.*SV1)";
gzip_vary on;
gzip_types text/plain text/css text/javascript image/svg+xml image/x-icon application/javascript application/x-javascript;

Activer GZIP sur IIS

Si vous utilisez IIS, il existe deux types de compression différents, statique et dynamique. Nous vous recommandons de consulter le guide de Microsoft sur la façon d’activer la compression.

18
Partages