Le moyen le plus simple d’accélérer votre site WordPress est d’éliminer toutes ses ressources non désirées. La deuxième façon la plus simple de l’accélérer est de compresser toutes ses ressources souhaitées. L’activation de la compression GZIP sur votre serveur web est l’un des moyens les plus simples et les plus efficaces pour y parvenir.

Tous les navigateurs modernes prennent en charge la compression GZIP par défaut. Cependant, pour que les ressources compressées puissent être servies à vos utilisateurs sans problème, vous devez configurer correctement votre serveur.

Dans cet article, vous apprendrez les bases de la compression des données sur le web, ce qu’est la compression GZIP, ses différents avantages et comment l’utiliser pour accélérer vos sites WordPress sur différentes configurations de serveur.

Vous êtes excité ? Décompressons !

Vous préférez regarder la version vidéo ?

Les bases de la compression des données sur le Web

La compression des données sur le web est le processus de réduction de la taille des données transmises par les sites web. Selon le type de données – texte, images, feuilles de style, scripts, polices – il existe différentes façons de compresser les données.

Les principales composantes d'une page web
Les principales composantes d’une page web

Par exemple, la minification de HTML, CSS et JavaScript est un moyen simple de réduire la quantité de données envoyées par les navigateurs. Ici, la minification compresse le texte en supprimant les caractères inutiles tels que les commentaires et les espaces du code source.

Dans l’exemple ci-dessous d’un simple document HTML, il existe trois types de contenu : Le balisage HTML, les styles CSS et le code JavaScript.

Chaque type de contenu a une syntaxe et une sémantique uniques. Au total, ce document HTML comporte 357 caractères.

<html>
<head>
    <style>
    /* kinsta-banner is used on the homepage only */
    .kinsta-banner { font-size: 150% }
    .kinsta-banner { width: 75% }
</style>
</head>
<body>
    
    <div>...</div>
    
    <script>
    kinstaScripts(); // random scripts used on the page
    </script>
</body>
</html>

Le code ci-dessus est facile à lire et à suivre. Il est idéal pour le développement. Cependant, il n’est pas nécessaire que le navigateur lise les commentaires et les balises sont parfaitement indentées. Un compresseur intelligent peut analyser ce document et en supprimer tous les éléments inutiles.

<html><head><style>.kinsta-banner{font-size:150%;width:75%}</style></head><body><div>...</div><script>kinstaScripts();</script></body></html>

Après minification, le document HTML se réduit à seulement 141 caractères. Cela représente une économie de 60,50 % du nombre de caractères. Ce n’est pas aussi facile pour les yeux, mais cela n’a pas d’importance pour le navigateur. Il affichera toujours la même page pour l’utilisateur.

Pour tirer parti des deux versions, vous pouvez conserver le document original en tant que « version de développement », mais en réduisant tout le code avant de le mettre en ligne.

La plupart des extensions de performance WordPress s’en chargent automatiquement pour vous.

Compression de la taille des fichiers jQuery non compressés vs minifiés
Compression de la taille des fichiers jQuery non compressés vs minifiés

Par exemple, la version non compressée de la bibliothèque jQuery 3.5.1 est plus de 3 fois plus volumineuse que la version minifiée du même fichier.

Les mêmes techniques de compression décrites ci-dessus peuvent optimiser d’autres types de contenu comme les images, les vidéos, les polices, etc. Les réductions de contenu spécifiques comme celles-ci sont la première étape de l’optimisation de la taille des ressources textuelles de votre site web.

Ces avantages évidents sont la raison pour laquelle Kinsta a intégré une fonction de minification de code dans le tableau de bord MyKinsta. Les clients peuvent choisir d’opter pour la minification automatique du code pour leurs fichiers CSS et JavaScript, accélérant ainsi leurs sites sans aucun effort manuel.

Mais la compression des données ne se limite pas à la minification. Grâce à des techniques mathématiques avancées, les algorithmes de compression de données peuvent réduire encore la taille des données.

L’un des exemples les plus populaires d’une telle méthode de compression des données est GZIP. Elle permet une transmission efficace des données et a contribué de manière significative à faire de l’internet un moyen de communication mondial viable.

Qu’est-ce que la compression GZIP ?

GZIP, abréviation de GNU Zip, est la méthode de compression de données sans perte la plus populaire sur le web. Elle vous permet de réduire la taille des pages HTML, des feuilles de style et des scripts de votre site.

En plus d’être un algorithme de compression de données, GZIP est aussi une extension de fichier (.gz) et un logiciel utilisé pour la compression/décompression de fichiers.

Il est basé sur l’algorithme DEFLATE, qui est un mélange d’encodage LZ77 et d’algorithmes de codage Huffman.

La compression GZIP est basée sur l'algorithme DEFLATE
La compression GZIP est basée sur l’algorithme DEFLATE

Un compresseur GZIP prend un ensemble de données brutes et les compresse sans perte. Les données brutes peuvent provenir de n’importe quel type de fichier, mais GZIP fonctionne mieux avec des ressources textuelles (par exemple HTML, CSS, JS).

La section suivante explique en détail le fonctionnement de la compression GZIP.

Comment GZIP compresse les données

Une illustration approximative du fonctionnement de la compression GZIP
Une illustration approximative du fonctionnement de la compression GZIP

Pour commencer, le compresseur GZIP exécute l’algorithme de compression LZ77 sur les données brutes afin de supprimer les redondances. Cet algorithme fonctionne en trouvant des motifs répétés dans une fenêtre glissante prédéfinie (une petite partie des données brutes).

Il remplace ensuite toutes les chaînes répétées par des tuples pour comprimer les données brutes.

Une illustration de l'algorithme de codage LZ77
Une illustration de l’algorithme de codage LZ77

Dans l’exemple ci-dessus, la taille de la fenêtre coulissante est de 13 caractères (13 octets) seulement. Cependant, la compression GZIP peut utiliser une taille maximale de fenêtre coulissante de 32 Ko (32 768 octets). La taille de la fenêtre coulissante joue un rôle clé dans les performances de la compression LZ77.

Après avoir compressé les données brutes avec l’algorithme LZ77, le compresseur GZIP utilise ensuite l’algorithme de codage de Huffman pour les compresser davantage. Pour ce faire, il attribue aux caractères les plus fréquents le plus petit nombre de bits, tandis qu’il attribue aux caractères rares le plus grand nombre de bits.

Cette technique est similaire à celle utilisée en morse, où les lettres les plus fréquentes en anglais ont les séquences les plus courtes.

Pour comprendre le fonctionnement de l’algorithme de codage de Huffman, considérons le mot BOOKKEEPER. Il comporte 10 caractères, mais seulement 6 caractères uniques. Ce mot a un bon mélange de lettres simples, doubles et triples.

Presque tous les sites web utilisent le codage de caractères UTF-8 pour représenter les lettres et les symboles. Chaque caractère ASCII en UTF-8, qui comprend également l’alphabet anglais, utilise 1 octet (8 bits).

Le mot « BOOKKEEPER » comporte de nombreuses lettres qui se répètent
Le mot « BOOKKEEPER » comporte de nombreuses lettres qui se répètent

Une chaîne de 10 caractères comme BOOKKEEPER nécessite 10 octets (80 bits) de mémoire. Vous pouvez voir qu’elle contient 1 instance des lettres B, P, R, 2 instances des lettres O et K, et 3 instances de la lettre E.

L’algorithme de codage Huffman utilise ces connaissances pour comprimer la chaîne sans perte. Pour ce faire, il génère un arbre binaire dont chaque lettre unique est une feuille.

Les lettres ayant la plus faible fréquence (par exemple B, P, R) se retrouveront en bas de l’arbre, tandis que celles qui apparaissent fréquemment (par exemple E, O, K) se retrouveront idéalement en haut.

Le nœud le plus élevé de l’arbre est la racine (root), et sa valeur est égale au nombre total de caractères de la chaîne.

Arbre de Huffman pour le mot « BOOKKEEPER »
Arbre de Huffman pour le mot « BOOKKEEPER »

Après avoir généré l’arbre de Huffman, toutes les flèches de gauche et de droite reçoivent respectivement les chiffres 0 et 1. Vous pouvez ensuite générer le code Huffman pour n’importe quel caractère en traçant le chemin de la racine à la feuille et en joignant tous les 0 et 1.

Les codes Huffman sont des codes binaires uniques pour chaque caractère
Les codes Huffman sont des codes binaires uniques pour chaque caractère

Vous pouvez remarquer que les lettres ayant la plus haute fréquence ont des codes Huffman avec les plus petits bits.

Note : l’algorithme de codage de Huffman peut générer des codes binaires alternatifs en utilisant une stratégie d’ordonnancement différente pour les caractères ayant les mêmes fréquences. Cependant, la taille totale de la chaîne codée reste la même.

Un mot de 80 bits codé sous la forme d'une chaîne de 25 bits
Un mot de 80 bits codé sous la forme d’une chaîne de 25 bits

Cela représente une réduction de 68,75 % de la mémoire nécessaire pour stocker le mot original.

L’utilisation de l’arbre de Huffman avec la convention 0/1 génère des codes binaires qui satisfont la propriété du préfixe. Cela garantit que le code Huffman d’un caractère spécifique n’est pas un préfixe du code d’un autre caractère, ce qui facilite le décodage de la chaîne codée à l’aide de l’arbre de Huffman. Cela joue un rôle primordial dans la vitesse de décompression de GZIP.

Tout comme le mot ci-dessus, le compresseur GZIP utilise l’algorithme de codage de Huffman pour optimiser davantage les tuples générés par l’algorithme LZ77. Il en résulte des fichiers hautement compressés avec l’extension .gz.

Si vous souhaitez en savoir plus sur le fonctionnement de GZIP, reportez-vous à cette vidéo pour un aperçu rapide.

Quelle est la qualité de la compression GZIP ?

Généralement, GZIP atteint un taux de compression d’environ 70 % pour les petits fichiers, mais cela peut atteindre jusqu’à 90 % pour les fichiers texte plus volumineux.

Taux de compression GZIP pour certaines librairies CSS et JS populaires
Taux de compression GZIP pour certaines librairies CSS et JS populaires

Dans le tableau ci-dessus, vous pouvez voir que la compression des fichiers minifiés avec GZIP peut réduire encore leur taille.

Note : vous pouvez compresser n’importe quel type de fichier avec GZIP, mais pour les ressources déjà compressées avec d’autres méthodes (par exemple, des images, des vidéos), cela ne représentera aucune économie. Parfois, cela peut même augmenter la taille du fichier.

La force d’un algorithme de compression ne dépend pas seulement de son taux de compression, mais aussi de la rapidité et de l’efficacité avec lesquelles il peut compresser et décompresser les données. C’est là que GZIP excelle pour la plupart des cas d’utilisation.

Comme GZIP se décompresse rapidement grâce à un algorithme de streaming, il convient parfaitement aux protocoles web où la vitesse est essentielle. De plus, GZIP utilise un minimum de ressources pour compresser et décompresser les données, ce qui le rend idéal pour les serveurs comme pour les clients.

Performance de compression de brotli vs bzip2 vs GZIP vs xz (Source : OpenCPU)
Performance de compression de brotli vs bzip2 vs GZIP vs xz (Source : OpenCPU)

Les graphiques ci-dessus comparent les performances de compression des algorithmes de compression brotli, bzip2, gzip et xz. GZIP est légèrement perdant dans le test du taux de compression, mais pour les vitesses de compression et de décompression, il bat carrément la concurrence.

En examinant le graphique de la vitesse de compression, nous pouvons conclure que GZIP est idéal pour la compression en temps réel dans les serveurs HTTP et autres flux de données sur le web. Compte tenu de tous ses avantages pour faire progresser le web, l’IETF a ratifié le GZIP comme l’un des trois formats standard pour la compression en HTTP/1.1.

Note : une abstraction de la bibliothèque de compression de GZIP appelée zlib est utilisée dans de nombreux systèmes d’exploitation populaires (Linux, macOS, iOS) et dans les consoles de jeu modernes (PlayStation 4, Wii U, Xbox One). Elle est également utilisée dans le format de fichier PNG sans perte pour la compression des images.

6 Avantages de la compression GZIP

Examinons de plus près les principaux avantages de la compression GZIP.

Fournit un taux de compression décent

Comme nous l’avons déjà dit, GZIP n’a pas le meilleur taux de compression par rapport à ses concurrents. Mais il n’en est pas si éloigné non plus. En général, il peut vous aider à réduire la taille des ressources textuelles de 70 à 90 %.

Compression et décompression super rapides

Pour les vitesses de compression et de décompression des données, GZIP est le grand gagnant. Il est hautement souhaitable pour la compression à la volée dans les serveurs HTTP et autres flux de données.

Nécessite très peu de mémoire

Le GZIP laisse une empreinte mémoire minimale, ce qui le rend adapté aux serveurs et aux systèmes ayant une capacité de mémoire limitée. Il est donc pris en charge même par les fournisseurs d’hébergement web les moins chers.

Ne s’étend pas beaucoup, même dans les pires cas

Les algorithmes de compression de données sans perte comme GZIP ont une limite stricte au-delà de laquelle ils ne peuvent pas compresser les données.

En général, cela se produit lorsque la ressource est déjà bien compressée, ou si elle est minuscule et que les efforts liés à l’ajout du dictionnaire GZIP sont supérieurs aux économies réalisées grâce à la compression. Nous pouvons attribuer ce phénomène à un concept appelé encodage entropique. Le GZIP est très résistant à cet effet.

Gratuit d’utilisation et open source

GZIP a été créé principalement pour remplacer gratuitement et en open source le programme de compression breveté utilisé dans les premiers systèmes Unix. Ainsi, il n’est grevé d’aucun brevet et peut être utilisé librement par tout le monde.

Support universel apprécié

Selon le W3Techs, la compression GZIP est utilisée par 82 % de tous les sites web qu’il suit, ce qui en fait l’algorithme de compression le plus utilisé sur le web.

GZIP est supporté par presque tous les serveurs et clients. Quel que soit le serveur sur lequel vous hébergez votre site, vous pouvez l’accélérer en y activant GZIP.

Avertissements GZIP dans les outils de contrôle de vitesse de site web

Après la minification, l’activation de GZIP est l’une des optimisations de vitesse les plus simples et les plus efficaces que vous pouvez mettre en œuvre sur votre site web.

C’est aussi l’un des moyens les plus simples d’optimiser WordPress. Malgré cela, de nombreux sites WordPress ne l’utilisent toujours pas.

Lorsque vous allez sur un site web, votre navigateur vérifie si le serveur web a activé GZIP en vérifiant l’en-tête de réponse content-encoding : gzip. Si l’en-tête existe, il récupère les fichiers compressés, les décompresse, puis vous sert automatiquement les plus petits fichiers.

L'en-tête de réponse « content-encoding : gzip » dans Chrome DevTools
L’en-tête de réponse « content-encoding : gzip » dans Chrome DevTools

Si le navigateur ne détecte pas l’en-tête de réponse GZIP, il télécharge les fichiers non compressés. Dans la plupart des cas, la différence de vitesse de chargement des pages peut être de plusieurs secondes. Par conséquent, si vous n’avez pas activé GZIP, vous verrez des avertissements dans les outils de test de vitesse des sites web.

Avertissement GZIP dans Google PageSpeed Insights / Lighthouse

Google PageSpeed Insights affiche un avertissement lorsque la compression de texte n’est pas activée sur votre site web.

Note : Google PageSpeed Insights et Google Lighthouse étaient deux outils de test des performances de sites web distincts. Ils ont fonctionné indépendamment l’un de l’autre jusqu’en 2018, date à laquelle Google a mis à niveau PageSpeed Insights pour utiliser Lighthouse comme moteur d’analyse. Aujourd’hui, PageSpeed Insights et Lighthouse ne font plus qu’un.

Avertissement « Activer la compression de texte » dans Google PageSpeed Insights
Avertissement « Activer la compression de texte » dans Google PageSpeed Insights

Dans l’exemple de site ci-dessus, la compression des ressources textuelles peut réduire le poids de la page de plus de 78 % et accélérer le temps de chargement de la page de 2,1 secondes.

Note : PageSpeed Insights repose sur les en-têtes de réponse renvoyés à votre navigateur par le serveur. Parfois, il peut afficher un faux avertissement même si la compression GZIP est activée. Cela peut être dû au fait que le test de vitesse est effectué sur une machine qui utilise un serveur proxy intermédiaire ou un logiciel de sécurité. Ils peuvent interférer avec le téléchargement de fichiers compressés à partir de serveurs externes.

Avertissement GZIP dans GTmetrix

GTmetrix affiche un avertissement si votre site web ne sert pas de ressources textuelles compressées. Comme Google PageSpeed Insights, il vous indiquera également les économies potentielles que vous pouvez réaliser.

Avertissement « Activer la compression » dans GTmetrix
Avertissement « Activer la compression » dans GTmetrix

Note : GTmetrix met à jour son algorithme de test de vitesse pour remplacer les anciennes librairies PageSpeed Insights et YSlow par les dernières mesures de Google Lighthouse. Vous pouvez vous attendre à ce que son avertissement de compression GZIP soit similaire à celui affiché par Lighthouse.

Avertissement GZIP dans Pingdom Tools

Pingdom Tools lance un simple avertissement pour compresser les composants de votre site web avec GZIP.

Avertissement « Compresser les composants avec GZIP » dans Pingdom Tools
Avertissement « Compresser les composants avec GZIP » dans Pingdom Tools

Dans la section description, Pingdom Tools vous donne également quelques statistiques sur l’importance de GZIP.

Avertissement GZIP dans WebPageTest

WebPageTest affiche un avertissement dans son onglet Performance Review s’il détecte que les réponses compressibles ne sont pas servies de la manière la plus optimisée.

Avertissement « Utilisez la compression GZIP » dans WebPageTest
Avertissement « Utilisez la compression GZIP » dans WebPageTest

WebPageTest donnera également un score gradué pour montrer la gravité d’un avertissement. Par exemple, il attribue une note de 23 sur 100 à l’avertissement ci-dessus, ce qui signifie que vous devez le corriger en priorité.

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

L’en-tête HTTP Accept-Encoding : gzip, deflate est effectivement pris en charge par tous les navigateurs modernes. Par conséquent, la plupart des hébergeurs web activent la compression GZIP (ou compression Brotli) par défaut sur tous leurs serveurs.

Lorsque les serveurs web voient cet en-tête envoyé par un navigateur, ils reconnaissent le support du navigateur pour GZIP et répondent avec une réponse HTTP compressée en utilisant l’en-tête content-encoding : gzip.

Mais si vous utilisez un autre fournisseur d’hébergement, ou si vous voulez simplement vérifier si votre site web sert correctement le contenu compressé GZIP, vérifiez toujours s’il est activé.

Vous trouverez ci-dessous quelques moyens simples de vérifier la compression GZIP.

1. Outils de test de compression GZIP en ligne

L’utilisation d’un outil en ligne est le moyen le plus simple de vérifier si la compression GZIP est activée sur votre site web. Je recommande d’utiliser les outils gratuits Check GZIP Compression ou HTTP Compression Test. Il vous suffit de saisir l’URL de votre site web et de cliquer sur le bouton Check ou Test.

Ces deux outils en ligne vous afficheront un bref rapport indiquant si GZIP est activé ou non, et la quantité de transfert de données que vous avez économisée (ou pourriez économiser) en servant l’URL de test avec la compression GZIP activée.

Le premier outil vous montrera également d’autres informations pertinentes telles que le type de serveur de votre site web, le type de contenu et le temps de compression.

Tester la page d'accueil de Kinsta avec l'outil de compression Check GZIP
Tester la page d’accueil de Kinsta avec l’outil de compression Check GZIP

Note : Depuis le 5 novembre 2021, Kinsta est passé à la compression Brotli via Cloudflare pour toutes les requêtes HTTPS. Vous pouvez tester la compression Brotli en vérifiant la présence de content-encoding : br dans les en-têtes de réponse d’une requête.

Tester Kinsta.com avec l'outil de test de compression HTTP
Tester Kinsta.com avec l’outil de test de compression HTTP

Vous devez noter que l’optimisation GZIP ne s’arrête pas seulement à votre page web, mais qu’elle inclut également ses ressources statiques basées sur le texte comme les feuilles de style, les scripts et les polices. Si vous utilisez un CDN pour servir ces ressources, vous devez vous assurer que le CDN les sert également avec la compression GZIP activée.

La plupart des CDN modernes tels que Cloudflare, Kinsta CDN, KeyCDN et CloudFront supportent la compression GZIP. Vous pouvez tester les ressources servies par CDN pour la compression GZIP en vous connectant directement aux ressources.

Test de compression GZIP pour les ressources hébergées par un CDN
Test de compression GZIP pour les ressources hébergées par un CDN

Dans le rapport ci-dessus, vous pouvez voir que Kinsta CDN utilise le moteur KeyCDN, qui est un CDN traditionnel de type pull. Si vous utilisez Kinsta pour héberger votre site WordPress, vous n’avez pas à vous soucier de la compression GZIP car elle est activée par défaut.

Note : Kinsta est passé à Cloudflare comme partenaire CDN pour accélérer et sécuriser les sites de nos clients. Vous pouvez en lire plus ici à ce sujet.

Si vous utilisez Kinsta pour héberger votre site, vous n’avez pas à vous soucier de la compression GZIP car nous activons la compression Brotli – une alternative plus rapide à la compression GZIP – par défaut.

2. L’en-tête de réponse HTTP « content-encoding: gzip »

La deuxième façon de vérifier si un site web fournit un contenu compressé GZIP est de vérifier l’en-tête de réponse HTTP content-encoding: gzip.

Vous pouvez ouvrir Chrome DevTools ou Firefox Developer Tools et rechercher cet en-tête de réponse dans la section Réseau.

J’ai déjà montré ce à quoi cela ressemble dans Chrome DevTools plus tôt. Voici à quoi cela ressemble dans Firefox Developer Tools.

L'en-tête « content-encoding : gzip » dans les outils de développement de Firefox
L’en-tête « content-encoding : gzip » dans les outils de développement de Firefox

Vous pouvez également activer l’option « Use large request rows » dans le panneau de configuration de Chrome DevTools pour voir la taille originale et compressée de la page. Comme vous pouvez le voir ci-dessous, la taille de la page originale est passée de 118 Ko à seulement 22,9 Ko après avoir été compressée avec GZIP.

Voir les tailles de page compressées et non compressées dans Chrome Devtools
Voir les tailles de page compressées et non compressées dans Chrome Devtools

3. Outils de contrôle de vitesse de page web

La plupart des outils de test de vitesse des sites web vous avertiront que vous n’utilisez pas de compression comme GZIP pour servir vos pages web. De nombreux lecteurs arrivant à cet article viennent probablement à cause de ces avertissements GZIP, dont j’ai déjà parlé en détail plus haut.

Avertissements GZIP dans divers outils de test de vitesse de page web
Avertissements GZIP dans divers outils de test de vitesse de page web

Vous pouvez utiliser des outils comme PageSPeed Insights, GTmetrix, Pingdom Tools et WebPageTest pour vérifier si la compression GZIP est activée sur votre site WordPress.

Comment activer la compression GZIP ?

Si la compression GZIP n’est pas activée sur votre serveur web, il existe de nombreuses façons de l’activer. La méthode exacte dépend du serveur web que vous utilisez pour héberger votre site web.

Important : comme toujours, faites une sauvegarde de votre site et des fichiers de configuration de votre serveur avant de les modifier.

1. Activer GZIP avec une extension WordPress

La façon la plus simple d’activer la compression GZIP sur votre site WordPress est d’utiliser une extension de mise en cache ou d’optimisation des performances.

Par exemple, si vous hébergez votre site WordPress sur un serveur web Apache, W3 Total Cache inclut une option permettant d’activer la compression GZIP dans le panneau de configuration du cache du navigateur.

De même, WP Rocket vous permet d’ajouter automatiquement des règles de compression GZIP. Ces extensions permettent la compression GZIP en ajoutant le module mod_deflate d’Apache au fichier .htaccess.

Activation de la compression GZIP dans W3 Total Cache
Activation de la compression GZIP dans W3 Total Cache

Les extensions WordPress nécessitent des autorisations pour modifier les fichiers sur votre serveur web. Si elles n’ont pas les bonnes autorisations, elles échoueront ou vous afficheront une erreur.

Dans ce cas, vous devez contacter votre fournisseur d’hébergement ou modifier manuellement les fichiers de configuration de votre serveur web à l’aide des extraits de code ci-dessous.

Note : Kinsta a optimisé sa plateforme pour la rendre plus performante, plus fiable et plus sûre. Cela inclut également l’activation de la compression GZIP par défaut pour tous ses plans d’hébergement.

Comme les extensions de mise en cache tierces peuvent causer des conflits avec les optimisations de performance internes de Kinsta, Kinsta n’autorise pas la plupart d’entre elles sur ses serveurs. Pour plus d’informations, vous pouvez consulter la liste complète des extensions interdites par Kinsta.

2. Activer GZIP sur le serveur Web Apache

Selon Netcraft, Apache dessert plus de sites actifs que tout autre serveur web utilisé aujourd’hui. Il est également l’un des deux serveurs web recommandés par WordPress.

Pour activer la compression GZIP sur les serveurs Apache, vous devez utiliser ses modules mod_filter et mod_deflate et les configurer correctement avec les bonnes directives. Ils dirigeront Apache vers la compression de sortie du serveur avant de l’envoyer aux clients sur le réseau.

Vous avez deux options pour modifier la configuration du serveur Apache en fonction de votre niveau d’accès :

  1. Si vous pouvez accéder au fichier de configuration du serveur principal (généralement appelé conf), il vous est recommandé de l’utiliser pour configurer Apache car les fichiers .htaccess peuvent ralentir Apache.
  2. Si vous ne pouvez pas accéder au fichier de configuration du serveur principal, ce qui est généralement le cas chez la plupart des fournisseurs d’hébergement WordPress partagés, vous devez alors configurer Apache à l’aide du fichier .htaccess.

La première option est strictement réservée aux administrateurs système, car les fournisseurs d’hébergement vous permettent rarement de modifier le fichier de configuration du serveur principal. Expliquer comment le faire de cette manière n’entre pas dans le cadre de cet article. Vous pouvez vous référer à l’exemple de configuration de serveur Apache partagé par le projet HTML5 Boilerplate et à la documentation Apache pour commencer.

La deuxième option est idéale pour la plupart des propriétaires de sites WordPress, car de nombreux hébergeurs mutualisés vous permettent de modifier les fichiers .htaccess.

Pour commencer, utilisez SFTP ou le gestionnaire de fichiers en ligne de votre hébergeur pour trouver le fichier .htaccess dans le répertoire racine de votre site WordPress. Ajoutez-y ensuite le code ci-dessous.

Important : assurez-vous que le module mod_filter est actif sur votre serveur. Il est activé par défaut sur la plupart des hébergeurs, mais s’il ne l’est pas, la directive AddOutputFilterByType ne fonctionnera pas et peut générer une erreur HTTP 500. Vous pouvez vérifier les journaux d’erreurs de votre serveur si vous avez des problèmes après avoir ajouté le code ci-dessous.

<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  

  # Remove browser bugs (only needed for ancient 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
</IfModule>

N’ajoutez le code ci-dessus qu’après les directives existantes de votre fichier .htaccess. Enregistrez le fichier et vérifiez ensuite s’il permet la compression GZIP sur votre serveur.

Exemple de fichier Apache .htaccess après avoir activé la compression GZIP
Exemple de fichier Apache .htaccess après avoir activé la compression GZIP

Votre serveur web devrait maintenant servir des fichiers compressés pour toutes les extensions de fichiers listées ci-dessus. Vous pouvez le confirmer en utilisant l’une des méthodes mentionnées plus tôt.

Si vous voulez vous assurer que les proxies et les logiciels de sécurité côté client n’interfèrent pas avec la compression GZIP, vous pouvez remplacer l’extrait de code ci-dessus par celui ci-dessous.

<IfModule mod_deflate.c>
  # force compression for clients that mangle 'Accept-Encoding' request headers
  <IfModule mod_setenvif.c>
  <IfModule mod_headers.c>
    SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
    RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
  </IfModule>
  </IfModule>

  # compress all output with one of the following file extensions
  <IfModule mod_filter.c>
    AddOutputFilterByType DEFLATE "application/atom+xml" \
                                  "application/javascript" \
                                  "application/json" \
                                  "application/ld+json" \
                                  "application/manifest+json" \
                                  "application/rdf+xml" \
                                  "application/rss+xml" \
                                  "application/schema+json" \
                                  "application/geo+json" \
                                  "application/vnd.ms-fontobject" \
                                  "application/wasm" \
                                  "application/x-font-ttf" \
                                  "application/x-javascript" \
                                  "application/x-web-app-manifest+json" \
                                  "application/xhtml+xml" \
                                  "application/xml" \
                                  "font/eot" \
                                  "font/opentype" \
                                  "font/otf" \
                                  "font/ttf" \
                                  "image/bmp" \
                                  "image/svg+xml" \
                                  "image/vnd.microsoft.icon" \
                                  "text/cache-manifest" \
                                  "text/calendar" \
                                  "text/css" \
                                  "text/html" \
                                  "text/javascript" \
                                  "text/plain" \
                                  "text/markdown" \
                                  "text/vcard" \
                                  "text/vnd.rim.location.xloc" \
                                  "text/vtt" \
                                  "text/x-component" \
                                  "text/x-cross-domain-policy" \
                                  "text/xml"
  </IfModule>

  # define and map media types to their appropriate encoding type    
  # Using SVG format (Scalable Vector Graphics) is highly recommended to    
  # load logos, icons, text, and simple images. You can compress .SVG files
  # further using GZIP to create .SVGZ files. However, most browsers don’t
  # know that they need to decompress them first if they’re not served
  # without an appropriate ‘content-encoding’ HTTP response header. Thus,
  # these images wouldn’t show up in the browser. Hence, this module.

  <IfModule mod_mime.c>
    AddType image/svg+xml svg svgz
    AddEncoding gzip svgz
  </IfModule>

</IfModule>

Vous pouvez en savoir plus sur toutes les directives utilisées ici en vous rendant dans son dépôt de code et en suivant toutes les ressources qui y sont liées.

3. Activer GZIP sur le serveur Web Nginx

Comme pour Netcraft, Nginx est le serveur web le plus utilisé par les ordinateurs connectés au web. Si la tendance actuelle se poursuit, il dépassera bientôt Apache pour devenir le serveur web le plus utilisé par les sites actifs. Même Kinsta utilise Nginx pour alimenter ses solutions d’hébergement, dont les performances sont optimisées.

Vous pouvez activer la compression GZIP sur votre serveur web Nginx en utilisant les directives définies dans le module ngx_http_gzip_module.

Pour commencer, ajoutez les directives données ci-dessous à votre fichier nginx.conf. En général, vous trouverez ce fichier dans l’emplacement /etc/nginx/nginx.conf de votre serveur.

# enables GZIP compression
gzip on; 

# compression level (1-9)
# 6 is a good compromise between CPU usage and file size
gzip_comp_level 6;

# minimum file size limit in bytes to avoid negative compression outcomes
gzip_min_length 256;

# compress data for clients connecting via proxies
gzip_proxied any;

# directs proxies to cache both the regular and GZIP versions of an asset
gzip_vary on;

# disables GZIP compression for ancient browsers that don't support it
gzip_disable "msie6";

# compress outputs labeled with the following file extensions or MIME-types
# text/html MIME-type is enabled by default and need not be included
gzip_types
application/atom+xml
application/geo+json
application/javascript
application/x-javascript
application/json
application/ld+json
application/manifest+json
application/rdf+xml
application/rss+xml
application/vnd.ms-fontobject
application/wasm
application/x-web-app-manifest+json
application/xhtml+xml
application/xml
font/eot
font/otf
font/ttf
image/bmp
image/svg+xml
text/cache-manifest
text/calendar
text/css
text/javascript
text/markdown
text/plain
text/xml
text/vcard
text/vnd.rim.location.xloc
text/vtt
text/x-component
text/x-cross-domain-policy;

Si votre site sert de gros fichiers JS et CSS, vous pouvez augmenter la taille de la mémoire tampon utilisée pour la compression en ajoutant la directive suivante à votre fichier nginx.conf :

# sets the 'number' and 'size' of buffers for GZIP compression
# default buffer size is 4K or 8K depending on the platform
gzip_buffers 16 8k;

N’oubliez pas de recharger Nginx après avoir enregistré votre fichier nginx.conf.

sudo service nginx reload

Enfin, vous devriez tester pour voir si votre serveur a activé la compression GZIP. Vous pouvez vous référer à la documentation de Nginx pour obtenir une liste à jour de toutes les directives de ngx_http_gzip_module.

4. Activer GZIP sur le serveur Web IIS

Internet Information Services (IIS) de Microsoft est le troisième serveur web le plus populaire utilisé aujourd’hui. IIS est principalement déployé dans des environnements d’entreprise fonctionnant sous Windows, en particulier pour la mise en place de serveurs intranet et extranet spécifiques à l’entreprise.

Il est rarement utilisé pour héberger des sites WordPress en raison de divers problèmes de compatibilité.

Cependant, si vous vous trouvez dans l’une des rares situations où vous devez activer la compression GZIP sur IIS, vous pouvez vous référer à la documentation de Microsoft pour commencer. Vous pouvez également trouver ce fil de discussion sur Stack Overflow utile.

Alternatives à la compression GZIP

Le monde de la compression des données sur le web ne cesse de progresser. La taille moyenne des pages augmentant constamment, la technologie du web tente de la rattraper pour rendre le transfert de données sur le web plus efficace.

Augmentation du poids des pages au fil du temps
Augmentation du poids des pages au fil du temps (Source : HTTPArchive)

Un nouvel algorithme de compression a gagné en popularité au cours des dernières années : Brotli. La compression des polices web WOFF2 était l’objectif principal de Brotli à l’origine, mais il s’est étendu depuis pour prendre en charge la compression de tout type de données.

Brotli compresse mieux les données que GZIP, mais il faut beaucoup plus de temps et de ressources pour les compresser. Cependant, son temps de décompression est comparable à celui de GZIP, bien qu’il soit encore un peu plus lent.

Support de Brotli sur différents navigateurs
Support de Brotli sur différents navigateurs

La plupart des navigateurs supportent Brotli aujourd’hui, mais son utilisation sur les sites WordPress est encore un peu compliquée. Vous devez héberger votre site chez un fournisseur d’hébergement qui supporte Brotli ou qui vous permet d’installer la bibliothèque Brotli. La plupart des hébergeurs WordPress infogérés ne le supportent pas encore complètement, mais si vous utilisez un CDN tel que Cloudflare ou KeyCDN, vous pouvez l’activer facilement.

Résumé

Un web bien optimisé est bon pour tout le monde. Les utilisateurs aiment les sites web plus attrayants, les propriétaires de sites web aiment les frais d’hébergement réduits, et les hébergeurs de sites web aiment l’optimisation réalisée sur leurs serveurs. Les techniques de compression comme GZIP sont l’un des meilleurs moyens d’accélérer le temps de chargement des pages pour vos visiteurs.

Les propriétaires de sites WordPress peuvent accélérer leurs sites instantanément en activant la compression GZIP. Kinsta l’active par défaut sur tous ses serveurs, mais pour les autres, cet article couvre de multiples façons d’activer la compression GZIP sur divers serveurs web.

La vitesse est un élément essentiel pour tout site web. Compressez !

Salman Ravoof

Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.