La vitesse est importante pour tout site web. Dans la quête du web pour des temps de chargement rapides, nous disposons d’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 autre méthode naissante qui retient l’attention.
Il s’agit d’une solution développée par Google qui semble offrir un certain nombre d’avantages par rapport à la compression GZIP (ainsi qu’une alternative à celle-ci). Les détails de cet article décriront exactement ce que la technologie offre, mais la compression Brotli est rapide et efficace, ce qui remplit toutes les conditions pour que vous l’étudiiez.
Consultez notre guide vidéo sur la compression Brotli
Pour ce tutoriel, 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 situer Brotli dans l’espace des algorithmes de compression et expliquer pourquoi vous souhaitez l’utiliser plutôt que 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 donne des fichiers plus légers à déplacer sur le web et réduit le temps de chargement et de rendu d’un site web. Vous découvrirez 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 » Il s’agit d’un algorithme qui 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 et autres augmentent 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 rendre 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 comme les espaces et les retours chariot pour le rendre lisible par l’homme, mais un ordinateur n’en a pas besoin pour comprendre le code de base. De plus, ces lots d’espaces et de retours à la ligne prennent un espace précieux qui, supprimé, peut vous faire gagner en performance.
Si vous minimisez ce code, il a l’air 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 grande dégradation de l’image elle-même :
La compression GZIP est un moyen standard de minimiser la taille des paquets de fichiers – pensez aux paquets tels que ZIP ou aux paquets de Linux .tar. Mais jusqu’à présent, il n’existait pas de véritable alternative. Nous parlerons plus tard de la raison pour laquelle une alternative devrait exister, mais tout d’abord, nous allons vous présenter le « concurrent » de GZIP
La compression Brotli
En un mot, Brotli est un algorithme de compression de données. Cependant, si c’était tout ce que nous avions à dire, il n’y aurait aucune raison de l’étudier.
Il fournit une compression « sans perte » et est développé par Google sous une licence MIT. L’entreprise est souvent à l’avant-garde de la technologie d’avancement 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
- L’encodage et le 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 un sujet que nous abordons de manière extrêmement approfondie 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 dans un 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 fait que Brotli se distingue.
Compression Brotli vs Compression GZIP
Comme mentionné, Brotli et GZIP utilisent tous deux la méthode DEFLATE pour compresser (et décompresser) les données. Cela peut prêter à confusion pour de nombreuses personnes, car ce seul élément ne justifie pas un changement.
Cependant, Google s’appuie sur DEFLATE pour proposer des techniques améliorées et compresser les données selon un standard 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 employer son algorithme.
Les développeurs utiliseront un dictionnaire de paires clé-valeur pour stocker les données, car c’est une méthode efficace, flexible et évolutive. Voici à quoi ressemblerait un dictionnaire PHP (appelé « array ») :
$cats = get_categories(
array(
'taxonomy' => 'link_category',
'hierarchical' => 0,
'include' => $link_cat,
)
);Alors que GZIP n’utilise pas de dictionnaires, Brotli en utilise deux.
Le 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 langages différents, et Brotli les utilisera comme références à des 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 plus large de code.
Ainsi, l’encodeur ne doit pas passer le code au crible 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 que le dictionnaire contient des expressions du monde réel ainsi que du code qui ne serait pas souvent compressé. Cela permet à certaines balises, comme <HTML>, et à certains paramètres, comme type="text/javascript", de bénéficier d’une certaine compression et de vous offrir des gains plus importants.
Il existe également des « transformations » dans le dictionnaire : des phrases partielles, incomplètes et autres types de phrases qui, avec un nouveau préfixe, suffixe ou casse, deviennent un tout nouveau mot – par exemple, « Work » se transformant en « Working » ou « html » en « HTML »
Le 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 gros fichiers. Il est également appelé « sliding window » et peut atteindre une taille de 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. Elle est ultra-dynamique en ce sens qu’elle change constamment.
Si vous comparez cela à la sliding window de 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 sliding window Brotli d’environ 4 Mo, ce qui est encore énorme par rapport aux algorithmes concurrents.
Compression Brotli vs Compression GZIP : Performance et support
Lorsqu’il s’agit de chiffres 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 dû en partie à des mesures d’adoption plus larges par les principaux navigateurs ; la montée en puissance des navigateurs basés sur Chromium y contribue également.
Consultez notre guide vidéo sur la compression Brotli par rapport à la compression GZIP
Le site web Can I Use… recense les technologies adoptées par les navigateurs et fournit une sorte d’historique. Ce site note que plus de 95 % des navigateurs utilisent la compression Brotli à la rédaction 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 présentait un meilleur taux de compression par rapport aux algorithmes concurrents, mais était en retrait en termes de temps de compression et de décompression :
Cependant, les tests du Benchmark Squash montrent une histoire différente – une histoire plus nuancée. La véritable conclusion est que, dans l’ensemble, Brotli est plus souple que GZIP, avec un taux de compression généralement plus élevé.
Voici le résumé des résultats des benchmarks Squash :
- Brotli a le meilleur taux de compression (c’est-à-dire qu’il produit des fichiers compressés plus petits) à tous les niveaux de compression.
- Bien que GZIP batte Brotli en vitesse la plupart du temps, le niveau de compression est un facteur déterminant dans les résultats que vous obtiendrez.
L’analyse de Paul Calvano donne plus de détails, mais l’essentiel est que Brotli a besoin de plus de puissance CPU pour fournir un plus grand facteur de compression de fichiers. Cela se voit aux niveaux de compression les plus élevés et les plus bas. L’analyse comparative de Cloudflare confirme ce constat : des fichiers beaucoup plus petits, avec des chiffres comparatifs de vitesse de compression plus proches.
Il faut également tenir compte du fait 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 d’autres collectent sur le fonctionnement de Brotli. Vous pouvez voir des « faux négatifs » si vous effectuez des tests : des chiffres de vitesse de page plus élevés qui ignorent la compression de fichier que vous employez.
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 :
- Il prend la même technologie que celle utilisée par GZIP et l’améliore avec des méthodes modernes.
- L’analyse syntaxique de Brotli, basée sur un dictionnaire, signifie qu’il peut compresser un plus grand nombre de vos fichiers à un niveau plus profond.
- Bien que Brotli ait besoin de plus de puissance de calcul par rapport à GZIP, les résultats se traduisent par des fichiers plus petits.
- Aux niveaux de compression utilisés par la plupart des hébergeurs web – quelque chose de milieu de gamme comme le niveau quatre ou cinq – Brotli est plus performant que GZIP sans se fatiguer.
- Vous constaterez que Brotli bénéficie d’une prise en charge quasi-universelle sur les navigateurs, si ce n’est de certains des outils de benchmark auxquels vous êtes habitué.
- Brotli est libre d’utilisation et open source. C’est un avantage si vous utilisez un CDN compatible avec Brotli, tel que Cloudflare.
Il est intéressant 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 matière de vitesse et de livraison de fichiers.
Parce que Kinsta offre l’intégration de 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 meilleurs fournisseurs d’hébergement du marché.
Comment vérifier si votre site utilise la compression Brotli
La compression Brotli n’étant pas encore standard (bien qu’elle y soit presque), vous voudrez probablement savoir si votre site l’utilise. Il existe plusieurs façons de le savoir.
1. Utilisez un outil en ligne
La façon la plus simple de vérifier si votre site utilise la compression Brotli est d’utiliser un outil en ligne. Il en existe plusieurs, mais il est préférable d’opter pour un outil simple et rapide à utiliser qui vous fournira également un grand nombre 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 de la marche à suivre. Ces mesures offrent un aperçu important, car vous ne voulez pas seulement considérer si le serveur de votre site utilise la bonne « saveur » de compression.
Il y a beaucoup d’éléments qui composent un site web, et même des bibliothèques et dépendances tierces. Vous pouvez choisir de les servir en utilisant un CDN, et si c’est le cas, celui-ci doit également utiliser la compression Brotli pour obtenir les meilleures performances possibles.
Si vous utilisez Gift Of Speed pour tester des éléments individuels, vous pouvez jeter un coup d’œil à la valeur Server pour voir comment ils sont servis.
Tous les sites Kinsta utilisent le CDN Kinsta propulsé par Cloudflare. En tant que tel, chaque site utilisera également la compression Brotli dans toute la chaîne et l’architecture du serveur.
2. Vérifiez en utilisant les 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 de recherches et de dépannages liés au web. Une vérification rapide que vous pouvez faire est de savoir si votre site (ou une ressource spécifique) utilise la compression Brotli.
Pour tous les principaux navigateurs tels que Brave, Edge, Firefox ou Chrome, vous pouvez vous rendre dans l’écran Réseau > Tout.
Au début, vous ne verrez rien concernant les en-têtes de contenu – vous devrez sélectionner une ressource ou une requête dans la partie gauche. Si vous continuez à regarder et à faire défiler la liste, vous verrez s’ouvrir un panneau qui affichera par défaut les informations relatives aux Headers.
Ici, faites défiler jusqu’à ce que vous voyiez la ligne content-encoding: br:
En bref : Si vous voyez content-encoding: br, cela signifie que Brotli est actif pour ce site.
Comment activer la compression Brotli pour votre site
Dans ces dernières sections, nous allons vous montrer plusieurs façons différentes 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 ce que nous recommandons pour tout site lisant la première approche !
1. Utilisez un plugin WordPress
Presque chaque site WordPress utilisera au moins une extension – souvent plus selon la fonctionnalité dont le site a besoin. La mise en cache est un cas d’utilisation des extensions, et il y en a beaucoup. Cependant, toutes 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 toute modification 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 facile de trouver le bon réglage.
Vous devez vous rendre sur la page Performance > Cache de navigateur de WordPress :
Cet écran montre deux réglages. Celui que vous voudrez choisir est Activer la compression HTTP (brotli)
Toutefois, 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 y a un certain nombre d’extensions dont vous n’aurez pas besoin, et certaines autres sont même interdites d’utilisation sur les sites Kinsta.
Dans ces cas, vous voudrez adopter une autre approche.
2. Activez 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 remporte. Quoi qu’il en soit, les deux types de serveurs peuvent activer la compression Brotli, et il existe différentes approches pour chacun d’eux.
Avant de vous pencher sur l’approche manuelle, il y a quelques conditions préalables 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, surtout lorsqu’il s’agit de 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, vous devriez vous en sortir.
- Dans certains cas, vous aurez besoin de vos informations de connexion en tant qu’utilisateur Secure Shell (SSH) sur le serveur lui-même. Vous pouvez les trouver dans le panneau de contrôle de votre hébergement ou contacter le support pour les demander.
Si vous avez des doutes sur l’approche manuelle, nous vous recommandons d’envisager une autre option ou de demander de l’aide à votre hébergeur. Quoi qu’il en soit, nous allons donner 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 devrez d’abord trouver le fichier nginx.conf. Il se trouvera dans l’un des quelques emplacements suivants :
/usr/local/nginx/conf/etc/nginx/usr/local/etc/nginx
Lorsque vous avez ouvert le fichier, ajoutez ce qui suit au bas du fichier :
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 va activer Brotli et l’utiliser pour servir des fichiers statiques. Le réglage brotli_comp_level est un réglage que vous pouvez modifier en fonction de votre cas d’utilisation et de vos besoins. Des nombres plus élevés offrent une meilleure compression en contrepartie d’un site moins performant.
Apache
Apache étant flexible en matière de configuration, vous pouvez activer la compression Brotli sans trop de difficultés.
Pour cela, suivez les étapes suivantes :
- Connectez-vous à votre serveur à l’aide d’une application d’invite de commande ou un terminal, en tant qu’utilisateur root
sudo. - Exécutez la commande
a2enmod brotlipour activer la compression. - Dans la configuration d’Apache VirtualHost ou de votre serveur, ajoutez la ligne
AddOutputFilterByType BROTLI_COMPRESS text/html text/plain text/xml text/css text/javascript application/javascriptpour 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 offert en utilisant la ligne BrotliCompressionQuality LEVEL-NUMBER . Cependant, vous devrez remplacer le caractère générique « LEVEL-NUMBER » par un nombre compris entre 1 et 11.
3. Utilisez un hébergeur web qui le prend en charge
La façon la plus simple d’activer la compression Brotli pour votre site est de s’assurer que votre hébergeur le fait par défaut. Kinsta offre la compression Brotli en standard grâce à son intégration avec le CDN de Cloudflare.
Le CDN de Kinsta est propulsé par l’infrastructure de Cloudflare sur tous les plans – ainsi chaque site utilise la compression Brotli sans que vous ayez besoin de l’activer.
Vous voudrez vérifier si l’hébergeur que vous avez choisi offre la compression Brotli, et à quel niveau vous devez la configurer. Afin d’exécuter le site le plus performant, le plus stable et le plus sécurisé, un bon hébergement est essentiel.
Résumé
La compression des données est un élément nécessaire au développement et à 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 assembler un site web. Tous ces fichiers ont besoin d’une forme de compression.
Jusqu’à présent, l’approche typique était GZIP, mais il y a un nouveau venu.
La compression Brotli base sa technologie sur les mêmes fondements que GZIP, mais inclut certains avantages en termes d’amélioration des performances. Comme nous l’avons vu, elle utilise le mappage de contexte pour traiter une demande de compression plus rapidement, et un dictionnaire qui utilise une population dynamique. Ces avantages sont bien plus importants que ce que GZIP peut offrir, et permettent également aux utilisateurs mobiles de bénéficier 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 utilisant GZIP et se charge rapidement pour ceux qui utilisent des appareils plus petits.
Vous avez des questions sur la compression Brotli ? N’hésitez pas à les poser dans la section des commentaires ci-dessous !
Salman Ravoof est un développeur web autodidacte, un écrivain, un créateur et un grand admirateur des logiciels libres. Outre la technologie, il est passionné par la science, la philosophie, la photographie, les arts, les chats et la nourriture. Apprenez-en plus sur son site web, et connectez-vous avec Salman sur X.
Laisser un commentaire