Comment activer la compression GZIP pour accélérer les sites WordPress

Publié: 2020-10-16

Le moyen le plus simple d'accélérer votre site WordPress est d'éliminer toutes ses ressources indésirables. Le deuxième moyen le 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 d'y parvenir.

Tous les navigateurs modernes incluent par défaut la prise en charge de la compression GZIP. Cependant, pour servir les ressources compressées à vos utilisateurs sans problème, vous devez configurer votre serveur correctement.

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

Excité? Décompressons !

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

Le moyen le plus simple d'accélérer votre site #WordPress : se débarrasser des ressources indésirables. Le 2e moyen le plus simple : compresser toutes les ressources souhaitées. Apprenez à le faire rapidement avec la compression GZIP Cliquez pour tweeter

Les bases de la compression de 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 manières de compresser les données.

Une illustration des principaux composants d'une page Web
Les principaux composants 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, le minificateur 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 document HTML simple, 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. Dans l'ensemble, ce document HTML compte 357 caractères au total.

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

Le code ci-dessus est facile à lire et à suivre. C'est idéal pour le développement. Cependant, il n'est pas nécessaire que le navigateur lise les commentaires et ait des balises parfaitement indentées. Un compresseur intelligent peut analyser ce document et en supprimer tous les bits 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. C'est une économie de 60,50% sur le 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 à l'utilisateur.

Pour tirer parti des deux versions, vous pouvez conserver le document d'origine en tant que "version de développement", mais réduire tout le code avant de le mettre en ligne.

La plupart des plugins de performance WordPress s'en chargent automatiquement pour vous.

Comparaison de la taille de fichier de jQuery non compressé et minifié
Compression de la taille du fichier de jQuery non compressé vs minifié

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.

De même, 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 spécifiques au contenu comme celles-ci constituent la première étape de l'optimisation de la taille des ressources textuelles de votre site Web.

Mais la compression des données va au-delà de la simple minification. En utilisant des techniques mathématiques avancées, les algorithmes de compression de données peuvent encore réduire la taille des données.

L'un des exemples les plus populaires d'une telle méthode de compression de données est GZIP . Il permet une transmission efficace des données et a largement contribué à faire d'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. Il 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 également 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'algorithmes de codage LZ77 et de codage Huffman.

Une illustration de la façon dont 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 le 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 décrit 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 pour supprimer les redondances. Cet algorithme fonctionne en trouvant des modèles répétés dans une fenêtre glissante prédéfinie (une petite section des données brutes).

Il remplace ensuite toutes les chaînes répétées par des tuples pour compresser 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 glissante n'est que de 13 caractères (13 octets). Cependant, la compression GZIP peut utiliser une taille de fenêtre glissante maximale de 32 Ko (32 768 octets). La taille de la fenêtre coulissante joue un rôle clé dans les performances de compression LZ77.

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

Cette technique est similaire à celle utilisée dans le code Morse, dans laquelle les lettres apparaissant plus fréquemment dans la langue anglaise obtiennent les séquences les plus courtes.

Pour comprendre le fonctionnement de l'algorithme de codage de Huffman, considérons le mot BOOKKEEPER . Il fait 10 caractères, mais il n'a que 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" a de nombreuses lettres qui se répètent
Le mot "BOOKKEEPER" a de nombreuses lettres qui se répètent

Une chaîne de 10 caractères comme BOOKKEEPER nécessitera 10 octets (80 bits) de mémoire. Vous pouvez voir qu'il 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 de Huffman utilise ces connaissances pour compresser sans perte la chaîne. Pour ce faire, il génère un arbre binaire avec chaque lettre unique comme feuille.

Les lettres les moins fréquentes (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 haut de l'arborescence est la racine et sa valeur est égale au nombre total de caractères de la chaîne.

Huffman Tree pour le mot "BOOKKEEPER"
Huffman Tree pour le mot "BOOKKEEPER"

Après avoir généré l'arbre de Huffman, toutes les flèches de ramification à gauche et à droite reçoivent respectivement des nombres 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 avec la fréquence la plus élevée ont des codes de Huffman avec les plus petites tailles de bits.

Remarque : L'algorithme de codage de Huffman peut générer des codes binaires alternatifs en utilisant une stratégie de classement différente pour les caractères ayant les mêmes fréquences. Cependant, la taille totale de la chaîne encodée restera la même.

Un mot de 80 bits codé comme une chaîne de 25 bits
Un mot de 80 bits codé comme une chaîne de 25 bits

C'est une réduction de 68,75 % de la mémoire nécessaire pour stocker le mot d'origine.

L'utilisation de l'arbre de Huffman avec la convention 0/1 génère des codes binaires qui satisfont la propriété de préfixe. Il 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 Huffman. Cela joue un rôle primordial dans la vitesse de décompression GZIP.

Tout comme avec le mot ci-dessus, le compresseur GZIP utilise l'algorithme de codage Huffman pour optimiser davantage les tuples générés par l'algorithme LZ77. Cela se traduit par 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 ?

En règle générale, GZIP atteint un taux de compression d'environ 70 % pour les petits fichiers, mais il peut atteindre jusqu'à 90 % pour les ressources textuelles plus volumineuses.

Comparaison des taux de compression GZIP pour diverses bibliothèques CSS et JS
Taux de compression GZIP pour certaines bibliothèques CSS et JS populaires

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

Remarque : Vous pouvez compresser n'importe quel type de fichier avec GZIP, mais pour les actifs déjà compressés 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 également de la rapidité et de l'efficacité avec lesquelles il peut compresser et décompresser les données. C'est là que GZIP excelle dans la plupart des cas d'utilisation.

Étant donné que GZIP se décompresse rapidement à l'aide d'un algorithme de diffusion en continu, 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 et les clients.

Performances de compression de brotli vs bzip2 vs GZIP vs xz (Source : OpenCPU)
Performances 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 perd dans le test du taux de compression par une légère marge, mais pour les vitesses de compression et de décompression, il bat carrément la concurrence.

En regardant le graphique de 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é GZIP comme l'un des trois formats standard de compression dans HTTP/1.1.

Remarque : 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 consoles de jeu modernes (PlayStation 4, Wii U, Xbox One). Il est également utilisé dans le format de fichier PNG sans perte pour compresser les images.

6 avantages de la compression GZIP

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

Fournit un taux de compression décent

Comme indiqué précédemment, GZIP n'a pas le meilleur taux de compression par rapport à ses concurrents. Mais ce n'est pas si loin d'eux non plus. En règle générale, cela peut vous aider à réduire la taille des ressources textuelles de 70 à 90 %.

Compression et décompression ultra rapides

Pour les vitesses de compression et de décompression des données, GZIP est clairement le 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

GZIP laisse une empreinte mémoire minimale, ce qui le rend adapté aux serveurs et aux systèmes dont la capacité de mémoire est limitée. Par conséquent, vous le trouverez 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 règle générale, cela se produit lorsque la ressource est déjà bien compressée, ou si elle est minuscule et que la surcharge liée à l'ajout du dictionnaire GZIP est supérieure aux économies de compression. Nous pouvons attribuer ce phénomène à un concept appelé codage entropique. GZIP est très résistant à cet effet.

Libre d'utilisation et open source

GZIP a été principalement créé en tant que remplacement gratuit et open source du 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 n'importe qui.

Bénéficie d'un support universel

Selon W3Techs, la compression GZIP est utilisée par 82 % de tous les sites Web qu'ils suivent, ce qui en fait l'algorithme de compression le plus utilisé sur le Web.

GZIP est pris en charge 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 activant GZIP dessus.

Avertissements GZIP dans les outils de test de vitesse de site Web

Outre la minification, l'activation de GZIP est l'une des optimisations de vitesse les plus simples et les plus efficaces que vous puissiez 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 visitez 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 fichiers plus petits.

L'en-tête de réponse "content-encoding: gzip"
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 du site Web.

Avertissement GZIP dans Google PageSpeed ​​Insights / Lighthouse

Google PageSpeed ​​Insights émet un avertissement lorsque la compression de texte n'est pas activée sur votre site Web.

Remarque : Google PageSpeed ​​Insights et Google Lighthouse étaient deux outils de test de performances de site Web distincts. Ils ont travaillé indépendamment les uns des autres jusqu'en 2018, lorsque Google a mis à jour PageSpeed ​​Insights pour utiliser Lighthouse comme moteur d'analyse. Par conséquent, PageSpeed ​​Insights et Lighthouse ne font qu'un maintenant.

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 .

Remarque : PageSpeed ​​Insights s'appuie sur les en-têtes de réponse renvoyés à votre navigateur par le serveur. Parfois, il peut afficher un faux avertissement même lorsque la compression GZIP est activée. Cela peut être dû à l'exécution du test de vitesse 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 propose pas de ressources textuelles compressées. Comme Google PageSpeed ​​Insights, il vous montrera également les économies potentielles que vous pouvez réaliser.

Avertissement "Activer la compression" dans GTmetrix
Avertissement "Activer la compression" dans GTmetrix

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

Avertissement GZIP dans les outils Pingdom

Pingdom Tools lance un avertissement simple 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 de description, Pingdom Tools vous donne également quelques statistiques sur l'importance de GZIP. Fèves fraîches!

Avertissement GZIP dans WebPageTest

WebPageTest affiche un avertissement dans son onglet Examen des performances s'il détecte que des réponses compressibles ne sont pas servies de la manière la plus optimisée.

Avertissement "Utiliser la compression GZIP" dans WebPageTest
Avertissement "Utiliser la compression GZIP" dans WebPageTest

WebPageTest donnera également un score gradué pour montrer la gravité d'un avertissement. Par exemple, il évalue l'avertissement ci-dessus 23 sur 100, 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 pris en charge par tous les navigateurs modernes. Par conséquent, la plupart des hébergeurs Web, y compris Kinsta, activent la compression GZIP par défaut sur tous leurs serveurs.

Lorsque les serveurs Web voient cet en-tête envoyé par un navigateur, ils reconnaissent la prise en charge de GZIP par le navigateur et répondent par une réponse HTTP compressée à l'aide content-encoding: gzip .

Mais si vous utilisez un autre fournisseur d'hébergement WordPress ou si vous souhaitez simplement vérifier si votre site Web diffuse correctement le contenu compressé GZIP, vérifiez toujours s'il est activé.

Vous trouverez ci-dessous quelques méthodes simples pour 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. Entrez simplement l'URL de votre site Web et appuyez sur le bouton Vérifier ou Tester .

Ces deux outils en ligne vous montreront un bref rapport indiquant si GZIP est activé ou non, et la quantité de transfert de données que vous avez économisée (ou que vous pouvez é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 Check GZIP Compression
Test de la page d'accueil de Kinsta avec l'outil Check GZIP Compression
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 inclut également ses ressources textuelles statiques telles que 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 dessert également avec la compression GZIP activée.

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

Test de compression GZIP pour les actifs hébergés par un CDN
Test de compression GZIP pour les actifs hébergés par un CDN

Dans le rapport ci-dessus, vous pouvez voir que Kinsta CDN utilise le moteur KeyCDN, qui est un CDN pull traditionnel. 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.

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 du contenu compressé GZIP consiste à vérifier l'en-tête de réponse HTTP content-encoding: gzip .

Fatigué du support d'hébergement WordPress de niveau 1 inférieur à la moyenne sans les réponses ? Essayez notre équipe d'assistance de classe mondiale ! Découvrez nos forfaits

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é à quoi cela ressemble dans Chrome DevTools plus tôt. Voici à quoi cela ressemble dans les outils de développement de Firefox.

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 "Utiliser de grandes lignes de requête" dans le panneau des paramètres de Chrome DevTools pour voir à la fois la taille d'origine et la taille compressée de la page. Comme vous pouvez le voir ci-dessous, la taille de la page d'origine est passée de 118 Ko à seulement 22,9 Ko après l'avoir compressée avec GZIP.

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

3. Outils de test de vitesse de page Web

La plupart des outils de test de vitesse de site Web vous avertiront de ne pas utiliser de compression comme GZIP pour servir vos pages Web. De nombreux lecteurs qui arrivent à cet article viennent probablement à cause de ces avertissements GZIP, dont j'ai déjà discuté en profondeur ci-dessus.

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 tels que PageSPeed Insights, GTmetrix, Pingdom Tools et WebPageTest pour vérifier si la compression GZIP est activée sur votre site Web WordPress.

Comment activer la compression GZIP

Si la compression GZIP n'est pas activée sur votre serveur Web, il existe plusieurs 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, effectuez une sauvegarde de vos fichiers de configuration de site et de serveur avant de les modifier.

Activer GZIP avec un plugin WordPress

Le moyen le plus simple d'activer la compression GZIP sur votre site WordPress consiste à utiliser un plugin 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 son panneau de paramètres de cache du navigateur .

De même, WP Rocket vous permet d'ajouter automatiquement des règles de compression GZIP. Ces plugins activent 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 plugins WordPress nécessitent des autorisations pour modifier les fichiers sur votre serveur Web. S'ils n'ont pas les bonnes autorisations, ils échoueront ou vous montreront 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.

Remarque : Kinsta a optimisé sa plateforme pour la haute performance, la fiabilité et la sécurité. Cela inclut également l'activation de la compression GZIP par défaut pour tous ses plans d'hébergement.

Étant donné que les plugins de mise en cache tiers peuvent provoquer des conflits avec les optimisations de performances internes de Kinsta, Kinsta n'autorise pas la plupart d'entre eux sur ses serveurs. Pour plus d'informations, vous pouvez consulter la liste complète des plugins interdits de Kinsta.

Activer GZIP sur le serveur Web Apache

Selon Netcraft, Apache dessert plus de sites actifs que tout autre serveur Web utilisé aujourd'hui. C'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 pour compresser la sortie du serveur avant de l'envoyer aux clients sur le réseau.

Vous avez deux options pour modifier les configurations du serveur Apache en fonction du niveau d'accès dont vous disposez :

  1. Si vous pouvez accéder au fichier de configuration du serveur principal (généralement appelé httpd.conf ), il 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 avec la plupart des fournisseurs d'hébergement mutualisé WordPress, vous devez configurer Apache à l'aide du fichier .htaccess .

La première option est strictement réservée aux administrateurs système, car les hébergeurs vous autorisent rarement à modifier le fichier de configuration du serveur principal. Expliquer comment procéder de cette manière sort du cadre de cet article. Vous pouvez vous référer aux exemples de configurations de serveur Apache partagés 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 fournisseurs d'hébergement partagé 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 ensuite l'extrait de code ci-dessous.

Important : Assurez-vous que le module mod_filter est actif sur votre serveur. La plupart des hébergeurs l'ont activé par défaut, mais si ce n'est pas le cas, la directive AddOutputFilterByType ne fonctionnera pas et peut générer une erreur HTTP 500. Vous pouvez consulter les journaux d'erreurs de votre serveur si vous rencontrez des problèmes après avoir ajouté l'extrait de 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>

Ajoutez le code ci-dessus uniquement après les directives existantes de votre fichier .htaccess . Enregistrez le fichier, puis vérifiez s'il active 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 répertoriées ci-dessus. Vous pouvez le confirmer en utilisant l'une des méthodes mentionnées précédemment.

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 accédant à son référentiel de code et en suivant toutes les ressources qui y sont liées.

Activer GZIP sur le serveur Web Nginx

Selon 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 optimisées pour WordPress.

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

Pour commencer, ajoutez les directives données ci-dessous à votre fichier nginx.conf . Généralement, vous pouvez trouver ce fichier à 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 des fichiers JS et CSS volumineux, 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 Nginx pour une liste à jour de toutes les directives ngx_http_gzip_module .

Activer GZIP sur le serveur Web IIS

Les services d'information Internet (IIS) de Microsoft sont le troisième serveur Web le plus utilisé aujourd'hui. IIS est principalement déployé dans des environnements d'entreprise fonctionnant sous Windows, en particulier pour la configuration 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é.

Pourtant, si vous vous trouvez dans l'une de ces 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 Stack Overflow utile.

Alternatives à la compression GZIP

Le monde de la compression de données sur le Web est en constante évolution. Le poids moyen des pages augmentant constamment, la technologie Web essaie également de le rattraper pour rendre le transfert de données sur le Web plus efficace.

Augmentation de la taille du poids de la page au fil du temps (Source : HTTPArchive)
Augmentation de la taille du poids de la page au fil du temps (Source : HTTPArchive)

Un nouvel algorithme de compression a gagné en popularité ces dernières années : Brotli. La compression des polices Web WOFF2 était à l'origine l'objectif principal de Brotli, mais il s'est depuis étendu 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 compresser les données. Cependant, son temps de décompression est comparable à celui de GZIP, bien qu'il soit encore un peu plus lent.

Prise en charge de Brotli sur différents navigateurs
Prise en charge de Brotli sur différents navigateurs

La plupart des navigateurs prennent en charge Brotli aujourd'hui, mais son utilisation sur les sites WordPress est encore quelque peu compliquée. Vous devez héberger votre site auprès d'un fournisseur d'hébergement qui prend en charge Brotli ou vous permet d'installer la bibliothèque Brotli. La plupart des hébergeurs WordPress gérés ne le prennent pas encore en charge, mais si vous utilisez un CDN tel que Cloudflare ou KeyCDN, vous pouvez l'activer facilement.

Brotli est très prometteur pour les ressources statiques de compression. Akamai a publié un article détaillé comparant Brotli à GZIP. You can check it out to learn more about Brotli.

Ready to speed up your site? ️ Enabling GZIP compression on your web server is one of the simplest and most efficient ways to achieve that. Learn how with this step-by-step walkthrough ️ Click to Tweet

Résumé

A well-optimized web is great for everyone. Users love snappier websites, website owners love the reduced hosting charges, and web hosts love the optimization achieved on their servers. Compression techniques like GZIP are one of the best ways to speed up page load times for your visitors.

WordPress site owners can speed up their sites instantly by enabling GZIP compression. Kinsta enables it by default on all its servers, but for others, this article covers multiple ways to enable GZIP compression on various web servers.

Speed is critical for any website. Just compress!