Compression Brotli : une alternative rapide à la compression GZIP

La vitesse est importante pour tout site Web. Dans la quête du Web pour des temps de chargement rapides, nous avons un certain nombre de technologies différentes pour nous aider. Une approche consiste à minimiser le code sous-jacent que votre site utilisera sans affecter son fonctionnement. La compression GZIP est un moyen d'y parvenir, mais la compression Brotli est une méthode alternative naissante qui attire l'attention.

Il s'agit d'une solution développée par Google qui cherche à offrir un certain nombre d'avantages par rapport (ainsi qu'une alternative à) la compression GZIP. Les détails de cet article expliqueront exactement ce que la technologie offre, mais la compression Brotli est rapide et efficace, ce qui coche toutes les cases dont vous avez besoin pour l'étudier.

Pour ce didacticiel, nous allons examiner la compression Brotli et vous montrer comment vérifier si votre site l'utilise et comment l'activer si nécessaire. Tout d'abord, nous allons placer Brotli dans l'espace de l'algorithme de compression et expliquer pourquoi vous voudriez l'utiliser par rapport à d'autres solutions.

Compression de données pour le Web

Dans sa forme la plus élémentaire, la compression des données prend le code d'un site Web ou d'une application et minimise la taille du fichier. Cela vous permet de déplacer des fichiers plus légers sur le Web et de réduire le temps nécessaire au chargement et au rendu d'un site Web. Vous constaterez qu'il existe de nombreuses façons de compresser les données en fonction du type de fichier avec lequel vous travaillez.

Une approche courante est la « minification ». C'est là qu'un algorithme dépouille le code de votre site de certains de ses éléments superflus. L'idée est que des aspects tels que les retraits, les commentaires, les espaces blancs, etc. augmenteront la taille des fichiers, et donc les temps de chargement.

La suppression de ces éléments n'affecte pas l'expérience utilisateur (UX) dans la plupart des situations. Cependant, cela rend les choses plus simples pour les ordinateurs qui doivent compiler et restituer le code. Par exemple, prenez cette suite de code :

 define( 'WP_INSTALLING', true ); /** Sets up the WordPress Environment. */ require __DIR__ . '/wp-load.php'; require __DIR__ . '/wp-blog-header.php'; if ( ! is_multisite() ) { wp_redirect( wp_registration_url() ); die(); } $valid_error_codes = array( 'already_active', 'blog_taken' );

Le code ci-dessus utilise des éléments tels que des espaces et des retours chariot pour le rendre lisible par l'homme, mais un ordinateur n'en a pas besoin pour comprendre le code principal. De plus, ces lots d'espaces et de sauts de ligne occuperont un espace précieux qui, supprimé, peut vous donner un gain de performances.

Si vous minimisez ce code, il semble complètement différent :

 define( 'WP_INSTALLING', true ); /** Sets up the WordPress Environment. * / require __DIR__ . '/wp-load.php'; require __DIR__ . '/wp-blog-header.php'; if ( ! is_multisite() ) { wp_redirect( wp_registration_url() ); die(); } $valid_error_codes = array( 'already_active', 'blog_taken' );

Cependant, les principes fondamentaux de ce que fait ce code sont toujours les mêmes.

Vous constaterez que d'autres types de fichiers ont des moyens de compresser les données. Par exemple, les images nécessitent souvent beaucoup de compression pour réduire leur taille sans trop dégrader l'image elle-même :

La compression GZIP est un moyen standard de minimiser la taille des ensembles de fichiers - pensez à des packages tels que les packages ZIP ou Linux .tar . Mais jusqu'à présent, il n'y avait pas vraiment d'alternative. Nous parlerons plus en détail de la raison pour laquelle une alternative devrait exister plus tard, mais commençons par vous présenter le "concurrent" de GZIP.

Brotli Compression

En un mot, Broti est un algorithme de compression de données. Cependant, si c'est tout ce que nous aurions à dire, il n'y aurait aucune raison d'enquêter.

Il fournit une compression "sans perte" et est développé par Google sous une licence MIT. La société est souvent à la pointe de la technologie de pointe du Web, il n'est donc pas surprenant que Brotli cherche à prendre ce que fait GZIP, à l'améliorer et à offrir une expérience améliorée aux utilisateurs et aux sites.

La compression Brotli utilise les mêmes technologies de base que la compression GZIP, à savoir :

• L'algorithme LZ77
• Encodage et décodage Huffman

En fait, si vous combinez ces deux technologies, vous obtenez le format DEFLATE qui sert de base aux compressions GZIP et Brotli. C'est quelque chose que nous abordons avec une extrême profondeur dans notre article sur la compression GZIP.

En bref, les fichiers non compressés passent par les algorithmes LZ77 et Huffman dans le cadre du processus DEFLATE pour les compresser au format Brotli. À partir de là, un processus INFLATE décompressera à nouveau les fichiers si nécessaire.

Bien que Brotli soit actuellement le principal concurrent de GZIP, il existe d'autres technologies similaires qui utilisent également DEFLATE . Dans la section suivante, nous parlerons de ce qui distingue Brotli.

Compression Brotli contre compression GZIP

Comme mentionné, Brotli et GZIP utilisent la méthode DEFLATE pour compresser (et décompresser) les données. Cela peut dérouter de nombreuses personnes, car cela ne justifie pas à lui seul un basculement.

Cependant, Google s'appuie sur DEFLATE pour offrir des techniques améliorées et compresser les données à un niveau plus élevé et plus rapide.

Comment Brotli utilise les dictionnaires pour améliorer la compression des données

Un aspect technique des formats de compression de données est la façon dont la compression Brotli utilise le langage et le texte connus existants dans les dictionnaires de données pour utiliser son algorithme.

Les développeurs utiliseront un dictionnaire de paires clé-valeur pour stocker les données, car il est efficace, flexible et évolutif. Voici à quoi ressemblerait un dictionnaire PHP (appelé "tableau") :

 $cats = get_categories( array( 'taxonomy' => 'link_category', 'hierarchical' => 0, 'include' => $link_cat, ) );

Alors que GZIP n'utilise pas de dictionnaires, Brotli en utilise deux .

Dictionnaire statique de Brotli

Le premier est un dictionnaire statique (c'est-à-dire prédéfini) de termes de code courants qui servent de référence pour le texte HTML, CSS et JavaScript.

Il y a plus de 13 000 mots dans six langues différentes, et Brotli les utilisera comme références aux points du code. Ce n'est pas une analogie exacte, mais c'est similaire à la façon dont un hook WordPress fait référence à une suite de code plus large.

Ainsi, l'encodeur n'a pas à parcourir le code octet par octet. Au lieu de cela, il peut agir sur les références, extraire la définition du dictionnaire et passer à la suivante.

Vous constaterez également qu'il existe des phrases du monde réel dans le dictionnaire ainsi que du code qui ne verrait pas souvent la compression. Cela aide certaines balises telles que <HTML> et des paramètres tels que type="text/javascript" à prendre une certaine compression et à vous donner des gains plus importants.

Il existe également des "transformations" dans le dictionnaire : des expressions partielles, incomplètes et d'autres types de phrases qui, avec un nouveau préfixe, suffixe ou cas, deviennent un tout nouveau mot - par exemple, "Travail" se transforme en "Travail" ou "html » à « HTML ».

Dictionnaire dynamique de Brotli

Le dictionnaire dynamique analyse le contenu et le code à la source, ce qui est bon pour les petits appareils, mais moins bon pour les fichiers plus volumineux. Elle est également appelée "fenêtre coulissante" et sa taille peut atteindre 16 Mo. C'est là que l'algorithme de compression « met en cache » certaines des données les plus récentes afin de les référencer. C'est ultra-dynamique en ce sens qu'il change constamment.

Si vous comparez cela à la fenêtre coulissante GZIP d'environ 32 Ko, vous verrez que les possibilités d'analyse et de compression en temps réel sont énormes. En fait, la plupart des pratiques typiques utilisent une fenêtre glissante Brotli d'environ 4 Mo, ce qui est encore énorme par rapport aux algorithmes concurrents.

Compression Brotli vs compression GZIP : performances et prise en charge

En ce qui concerne les numéros d'utilisateurs purs, la compression GZIP est toujours numéro un. Cependant, la compression Brotli est de plus en plus utilisée chaque jour. Cela est en partie dû à des mesures d'adoption plus larges par les principaux navigateurs ; la montée en puissance des navigateurs basés sur Chromium aide également.

Le site Web Puis-je utiliser… enregistre les technologies adoptées par les navigateurs et fournit un historique de toutes sortes. Ce site note que plus de 95% des navigateurs utilisent la compression Brotli à l'écriture actuelle, y compris toutes les versions majeures.

Dans notre article sur la compression GZIP, nous avons noté un test de référence où Brotli avait un meilleur taux de compression par rapport aux algorithmes concurrents, mais a pris du retard en temps de compression et de décompression :

Cependant, les tests Squash Benchmark montrent une histoire différente, plus nuancée. Le vrai point à retenir est que dans l'ensemble, Brotli est plus flexible que GZIP, avec un taux de compression généralement plus élevé.

Voici le résumé des conclusions de Squash Benchmarks :

• Brotli a le meilleur taux de compression (c'est-à-dire qu'il produit des fichiers compressés plus petits) à tous les niveaux de compression.
• Alors que GZIP bat Brotli sur la vitesse la plupart du temps, le niveau que vous compressez à des facteurs dans les résultats que vous verrez.

La ventilation de Paul Calvano donne plus de détails, mais le point crucial est que Brotli a besoin de plus de puissance CPU pour fournir un plus grand facteur de compression de fichiers. Cela s'affiche aux niveaux de compression les plus élevés et les plus bas. L'analyse comparative de Cloudflare le confirme : des fichiers beaucoup plus petits, avec des chiffres de vitesse de compression comparatifs plus proches.

Considérez également que certains outils de test tels que Pingdom et certains réseaux de diffusion de contenu (CDN) ne prennent pas encore en charge Brotli. Cela peut fausser les données que les autres collectent sur le fonctionnement de Brotli. Vous pouvez voir des "faux négatifs" si vous exécutez des tests : des chiffres de vitesse de page plus élevés qui ignorent la compression de fichier que vous utilisez.

Avantages de la compression Brotli

Jusqu'à présent, il y a beaucoup d'informations à prendre en compte sur la compression Brotli. Cependant, nous pouvons résumer ce que vous devez savoir sur les raisons pour lesquelles vous devriez choisir Brotli plutôt que GZIP :

1. Il utilise la même technologie que GZIP et l'améliore avec des méthodes modernes.
2. L'analyse basée sur un dictionnaire de Brotli signifie qu'il peut compresser davantage de vos fichiers à un niveau plus profond.
3. Bien que Brotli ait besoin de plus de puissance de calcul que GZIP, les résultats signifient des fichiers plus petits.
4. Aux niveaux de compression que la plupart des hébergeurs utilisent - quelque chose de milieu de gamme comme le niveau quatre ou cinq - Brotli fonctionne mieux que GZIP sans transpirer.
5. Vous constaterez que Brotli a une prise en charge quasi universelle sur tous les navigateurs, sinon certains des outils de référence auxquels vous êtes habitué.
6. Brotli est libre d'utilisation et open source. C'est un avantage si vous utilisez un CDN compatible Broti, tel que Cloudflare.

Il convient de noter que Cloudflare utilise la compression Brotli sur tous ses serveurs. En fait, il utilise une version modifiée et optimisée de Brotli pour vous offrir des gains supplémentaires en termes de vitesse et de livraison de fichiers.

Parce que Kinsta offre l'intégration Cloudflare sur tous les plans, chaque site hébergé utilise Brotli par défaut. Ce n'est qu'une des raisons pour lesquelles Kinsta est l'un des principaux et des meilleurs fournisseurs d'hébergement du marché.

Comment vérifier si votre site utilise la compression Brotli

Étant donné que la compression Brotli n'est pas encore standard (bien qu'elle y soit presque), vous voudrez probablement savoir si votre site l'utilise. Il existe plusieurs façons de comprendre cela.

1. Utilisez un outil en ligne

Le moyen le plus simple de vérifier si votre site utilise la compression Brotli consiste à utiliser un outil en ligne. Bien qu'il y en ait quelques-uns parmi lesquels choisir, vous voudrez quelque chose qui soit rapide et simple à utiliser qui vous donnera également un tas d'informations sur votre configuration.

Gift of Speed ​​est notre choix pour vérifier la compression Brotli.

Il déterminera si votre site utilise GZIP, Brotli ou aucune compression du tout, et fournira quelques autres mesures pour vous aider à décider quoi faire ensuite. Ces métriques offrent des informations importantes, car vous ne voulez pas seulement déterminer si le serveur de votre site utilise la bonne "saveur" de compression.

Il existe de nombreux éléments qui composent un site Web, et même des bibliothèques et des dépendances tierces. Vous pouvez choisir de les servir à l'aide d'un CDN, et si c'est le cas, cela doit également utiliser la compression Brotli pour obtenir les meilleures performances possibles.

Si vous utilisez Gift Of Speed ​​pour tester des actifs individuels, vous pouvez consulter la valeur du serveur pour voir comment il est servi.

Tous les sites Kinsta utilisent le CDN Kinsta alimenté par Cloudflare. Ainsi, chaque site utilisera également la compression Brotli dans toute la chaîne et l'architecture du serveur.

2. Vérifiez à l'aide des outils de développement de votre navigateur

La plupart des développeurs savent qu'un navigateur offre des outils fantastiques pour vous aider dans toutes sortes d'enquêtes et de dépannages liés au Web. Une vérification rapide que vous pouvez faire est de savoir si votre site (ou un actif spécifique) utilise la compression Brotli.

Pour tous les principaux navigateurs tels que Brave, Edge, Firefox ou Chrome, vous pouvez accéder à l'écran Réseau > Tous .

Au début, vous ne verrez rien concernant les en-têtes de contenu - vous devrez sélectionner un actif ou une demande dans la partie gauche. Si vous continuez à regarder et à faire défiler la liste, vous verrez un panneau s'ouvrir qui affiche par défaut les informations d'en-tête.

Ici, faites défiler la sortie jusqu'à ce que vous voyiez la ligne content-encoding: br :

En bref : Si vous voyez content-encoding: br , cela vous indique que Brotli est actif pour ce site.

Comment activer la compression Brotli pour votre site

Dans ces dernières sections, nous vous montrerons différentes façons d'activer la compression Brotli pour votre site. La première sera l'approche que nous recommandons pour la plupart des sites WordPress n'utilisant pas Kinsta — et la dernière est celle que nous recommandons pour chaque site lisant la première approche !

1. Utilisez un plugin WordPress

Presque tous les sites WordPress utiliseront au moins un plugin – souvent plus selon les fonctionnalités dont le site a besoin. La mise en cache est un cas d'utilisation pour les plugins, et il y en a beaucoup. Cependant, tous ne vous permettront pas d'activer la compression Brotli, vous devrez donc choisir judicieusement et être prêt à changer votre solution préférée.

Avant d'entreprendre des modifications sur un site, n'oubliez pas de faire une sauvegarde complète au cas où vous auriez besoin de restaurer plus tard. Pour cette méthode, nous utiliserons W3 Total Cache car il est simple de trouver le bon paramètre.

Vous devrez vous diriger vers la page Performances > Cache du navigateur dans WordPress :

Cet écran affiche deux paramètres. Celui que vous voudrez choisir est Enable HTTP (brotli) Compression :

Cependant, cela ne conviendra pas à tous les sites et à toutes les situations. Par exemple, Kinsta optimise son serveur pour un hébergement rapide, performant et fiable. En tant que tel, il existe un certain nombre de plugins dont vous n'aurez pas besoin, et certains autres sont même interdits d'utilisation sur les sites Kinsta.

Dans ces cas, vous voudrez adopter une autre approche.

2. Activer Brotli sur le serveur

Lorsqu'il s'agit de choisir un type de serveur, Nginx contre Apache est une bataille de longue date que (pour l'instant) le premier est en train de gagner. Quoi qu'il en soit, les deux types de serveurs peuvent activer la compression Brotli, et il existe différentes approches pour chacun.

Avant de vous pencher sur l'approche manuelle, il y a quelques prérequis que vous devez connaître :

• Vous voudrez comprendre comment accéder à vos fichiers de configuration pour votre serveur spécifique.
• La connaissance de la ligne de commande sera bénéfique, en particulier en ce qui concerne les serveurs Apache. Pour exécuter des commandes, vous devez être un utilisateur root avec des privilèges sudo .
• Vous aurez peut-être besoin d'un éditeur de texte, mais pour des modifications rapides comme celle-ci, tout devrait bien se passer.
• Dans certains cas, vous aurez besoin de vos identifiants de connexion en tant qu'utilisateur Secure Shell (SSH) sur le serveur lui-même. Vous pouvez les trouver dans votre panneau de contrôle d'hébergement ou contacter le support pour demander.

Si vous avez des doutes sur l'approche manuelle, nous vous recommandons de rechercher une autre option ou de contacter votre hôte pour obtenir de l'aide. Quoi qu'il en soit, nous donnerons un bref aperçu du processus pour chaque serveur à tour de rôle, en commençant par Nginx.

Nginx

Pour activer la compression Brotli sur les serveurs Nginx, vous devez d'abord trouver le fichier nginx.conf . Ce sera l'un des rares endroits:

• /usr/local/nginx/conf
• /etc/nginx
• /usr/local/etc/nginx

Lorsque le fichier est ouvert, ajoutez ce qui suit en bas :

 brotli on; brotli_static on; brotli_comp_level 9; # You can change this from 1–11. 4–9 offers good performance balance. brotli_types text/plain text/css application/javascript application/json image/svg+xml application/xml+rss;

Cette suite activera Brotli et l'utilisera pour servir des fichiers statiques. Le paramètre brotli_comp_level est celui que vous pouvez modifier en fonction de votre cas d'utilisation et de vos besoins. Des nombres plus élevés offrent une meilleure compression équilibrée avec un site moins performant.

apache

Parce qu'Apache est flexible en ce qui concerne les configurations, vous pouvez activer la compression Brotli sans trop de tracas.

Pour le faire, suivez ces étapes:

1. Connectez-vous à votre serveur à l'aide d'une invite de commande ou d'une application Terminal, en tant qu'utilisateur root sudo .
2. Exécutez la commande a2enmod brotli pour activer la compression.
3. Dans Apache VirtualHost ou dans la configuration de votre serveur, ajoutez la AddOutputFilterByType BROTLI_COMPRESS text/html text/plain text/xml text/css text/javascript application/javascript pour définir les bons types de fichiers que vous souhaitez compresser.

Bien qu'Apache ne prenne pas en charge la compression statique, vous pouvez modifier le niveau de compression Brotli que vous proposez à l'aide de la BrotliCompressionQuality LEVEL-NUMBER . Cependant, vous devrez remplacer l'espace réservé "LEVEL-NUMBER" par un nombre compris entre 1 et 11.

3. Utilisez un hébergeur de support

Le moyen le plus simple d'activer la compression Brotli pour votre site est de vous assurer que votre hébergeur le fait par défaut. Kinsta propose la compression Brotli en standard grâce à son intégration avec le CDN de Cloudflare.

Le CDN Kinsta est alimenté par l'infrastructure de Cloudflare sur tous les plans - de sorte que chaque site utilise la compression Brotli sans que vous ayez besoin de l'activer.

Vous voudrez vérifier si l'hôte que vous avez choisi offre la compression Brotli et à quel niveau vous devez le configurer. Afin de faire fonctionner le site le plus performant, stable et sécurisé, un bon hébergement est essentiel.

Résumé

La compression des données est une composante nécessaire du développement et de l'utilisation du Web moderne. La taille des fichiers peut monter en flèche en raison des types de fichiers riches et complexes que vous utiliserez pour reconstituer un site Web. Tous ont besoin d'une certaine forme de compression.

L'approche typique a été GZIP jusqu'à maintenant, mais il y a un petit nouveau sur le bloc.

La compression Brotli base sa technologie sur la même base que GZIP, mais inclut certains avantages d'amélioration des performances. Comme nous en avons discuté, il utilise le mappage de contexte pour traiter une demande de compression plus rapidement et un dictionnaire qui utilise la population dynamique. C'est beaucoup plus grand que ce que GZIP peut offrir, et permet également aux utilisateurs mobiles de bénéficier également de la compression.

La bonne nouvelle est que chaque site Kinsta peut bénéficier de la compression Brotli grâce à notre intégration Cloudflare unique. Cela signifie que votre site hébergé par Kinsta est plus rapide que la concurrence en utilisant GZIP et se charge rapidement pour ceux sur des appareils plus petits.

Vous avez des questions sur la compression Brotli ? N'hésitez pas à demander dans la section des commentaires ci-dessous!