Catégories
Astuces et Design

Comment j'ai utilisé Brotli pour obtenir des fichiers CSS et JavaScript encore plus petits à l'échelle CDN

La sitcom HBO Silicon Valley hilarante a suivi Pied Piper, une équipe de développeurs avec des rêves de démarrage pour créer un algorithme de compression si puissant que les problèmes de streaming et de stockage de fichiers de haute qualité deviendraient une chose du passé.

Dans l'émission, Google est interprété par la société fictive Hooli, qui est après la propriété intellectuelle de Pied Piper. Ce qui est drôle, c'est que, bien qu'étant loin d'une startup, Google possède en effet un puissant moteur de compression dans la vraie vie appelé Brotli.

Cet article concerne mon expérience d'utilisation de Brotli à l'échelle de la production. Bien qu'il soit vraiment cher et une méthode vraiment impossible à réaliser pour la compression à la volée, Brotli est en fait très économique et permet d'économiser sur de nombreux fronts, en particulier par rapport au gzip ou à des niveaux de compression inférieurs de Brotli (dans lesquels nous entrerons).

Le début de Brotli…

En 2015, Google a publié un article de blog annonçant Brotli et a publié son code source sur GitHub. Les deux développeurs qui ont créé Brotli ont également créé la compression Zopfli de Google deux ans plus tôt. Mais là où Zopfli a exploité les techniques de compression existantes, Brotli a été écrit à partir de zéro et entièrement axé sur la compression de texte au profit des ressources Web statiques, comme HTML, CSS, JavaScript et même des polices Web.

À cette époque, je travaillais en tant que consultant indépendant en performance de sites Web. J'étais vraiment excité pour l'amélioration de 20 à 26% promise par Brotli par rapport à Zopfli. Zopfli en lui-même est une implémentation dense du compresseur de dégonflage par rapport à l'implémentation standard de zlib, donc la revendication de jusqu'à 26% était assez impressionnante. Et c'est quoi zlib? C'est essentiellement la même chose que gzip.

Nous examinons donc la prochaine génération de Zopfli, qui est une ramification de zlib, qui est essentiellement gzip.

Une histoire de déception

Il a fallu quelques mois aux principaux acteurs du CDN pour prendre en charge Brotli, mais en attendant, il a été largement adopté dans les outils, les services, les navigateurs et les serveurs. Cependant, la compression dense de 26% promise par Brotli ne s'est jamais reflétée dans la production. Certains CDN définissent un niveau de compression inférieur en interne tandis que d'autres prennent en charge Brotli à l'origine afin qu'ils ne le prennent en charge que s'il a été activé manuellement à l'origine.

La prise en charge du serveur pour Brotli était assez bonne, mais pour atteindre des niveaux de compression élevés, il fallait rouler votre propre code de pré-compression ou utiliser un module serveur pour le faire pour vous – ce qui n'est pas toujours une option, en particulier dans le cas des services d'hébergement partagé .

C'était vraiment décevant pour moi. Je voulais compresser chaque dernier octet possible pour les sites Web de mes clients dans un lecteur pour les rendre plus rapides, mais utiliser la précompression et permettre aux clients de mettre à jour les fichiers à la demande simultanément n'était pas toujours facile.

Prendre les choses en main

J'ai commencé à créer mon propre service d'optimisation des performances pour mes clients.

J'ai eu plusieurs astuces qui pourraient accélérer considérablement les sites Web. Le service a classé toutes les optimisations en trois groupes comprenant plusieurs optimisations «Contenu», «Livraison» et «Cache». J'avais Brotli en tête pour la partie d'optimisation de contenu du service pour les ressources compressibles.

Comme d'autres formats de compression, Brotli est disponible en différents niveaux de puissance. Le niveau maximum de Brotli est exactement comme le volume maximum des amplis de guitare C'est Spinal Tap: il passe à 11.

Brotli: 11, ou niveau de compression Brotli 11, peut offrir une réduction significative de la taille des fichiers compressibles, mais a un compromis substantiel: il est douloureusement lent et impossible pour la compression à la demande de la même manière que gzip est capable de le faire. Il en coûte beaucoup plus en termes de temps CPU.

Dans mes benchmarks, Brotli: 11 prend plusieurs centaines de millisecondes pour compresser un seul fichier jQuery minifié. Donc, la seule façon d'offrir Brotli: 11 à mes clients était de l'utiliser pour la pré-compression, ce qui me laisse trouver un moyen de mettre en cache des fichiers au niveau du serveur. Heureusement, nous l'avions déjà en place. Le seul problème était la crainte que Brotli ne puisse tuer toutes nos ressources de traitement.

C'est peut-être pour cette raison que Pied Piper a dû continuer à configurer ses serveurs pour plus de puissance.

J'ai mis mes craintes de côté et j'ai créé Brotli: 11 comme option de serveur configurable. De cette façon, les clients pouvaient décider si l'activation valait le coût informatique.

C'est lent, mais ça rapporte progressivement

Parmi plusieurs autres optimisations, le service pour mes clients propose également la livraison de contenu géographique; en d'autres termes, il a un CDN intégré.

Parmi les nombreuses astuces que j'ai essayées lorsque j'ai pris les choses en main, l'une consistait à combiner le CDN public (ou CDN open-source) et le CDN privé sur un seul hôte afin que les sites Web puissent profiter des avantages du cache de navigateur partagé des ressources publiques sans encourir recherche DNS et coût de connexion distincts pour cet hôte public. Je voulais éviter ce coût de connexion supplémentaire car il a un impact significatif pour les utilisateurs mobiles. De plus, la combinaison de plus en plus de ressources sur un seul hôte peut aider à tirer le meilleur parti des fonctionnalités HTTP / 2, comme le multiplexage.

J'ai activé le CDN public et activé la pré-compression Brotli: 11 pour toutes les ressources compressibles, y compris CSS, JavaScript, SVG et TTF, entre autres types de fichiers. Les frais généraux de compression ont en effet augmenté à la première demande de chaque ressource – mais après cela, tout a semblé fonctionner correctement. Brotli prend en charge plus de 90% des navigateurs et presque toutes les demandes envoyées à mon service utilisent maintenant Brotli.

J'étais heureux. Les clients étaient contents. Mais je n'avais pas de chiffres. J'ai commencé à analyser l'impact de l'activation de cette compression haute densité sur les ressources publiques. Pour cela, j'ai enregistré les tailles de transfert de fichiers de plusieurs bibliothèques populaires – y compris jQuery, Bootstrap, React et d'autres cadres – qui utilisaient des méthodes de compression communes implémentées par d'autres CDN et j'ai constaté que la compression Brotli: 11 économisait environ 21% par rapport à d'autres formats de compression .

Il est important de noter que certains des autres CDN publics que j'ai comparés utilisaient déjà Brotli, mais à des niveaux de compression inférieurs. Donc, la compression supplémentaire de 21% était vraiment satisfaisante pour moi. Ce nombre est basé sur un très petit sous-ensemble de bibliothèques mais n'est pas incorrect par une grande marge car je voyais autant de gain sur tous les sites Web que j'ai testés.

Voici une représentation graphique des économies.

Graphique à barres verticales. Compare jQuery, Bootstrap, D3.js, Ant Design, Senamtic UI, Font Awesome, React, Three.js, Bulma et Vue avant et après la compression Brotli. La compression de Brotli est toujours plus petite.

Vous pouvez voir les données brutes ci-dessous .. Notez que les économies pour CSS sont beaucoup plus importantes que ce que JavaScript obtient.

Bibliothèque Original Moy. de compression commune (A) Brotli: 11 (B) (A) / (B) – 1
Conception de fourmi 1 938,99 Ko 438,24 Ko 362.82 KB 20,79%
Amorcer 152.11 KB 24.20 KB 17.30 KB 39,88%
Bulma 186,13 Ko 23.40 KB 19.30 KB 21,24%
D3.js 236.82 KB 74,51 KB 65,75 KB 13,32%
Police Awesome 1,104.04 KB 422,56 KB 331.12 KB 27,62%
jQuery 86.08 KB 30,31 Ko 27,65 Ko 9,62%
Réagir 105,47 Ko 33.33 KB 30.28 KB 10,07%
UI sémantique 613,78 Ko 91,93 Ko 78.25 KB 17,48%
three.js 562,75 KB 134.01 KB 114,44 Ko 17,10%
Vue.js 91.48 KB 33.17 KB 30,58 Ko 8,47%

Les résultats sont excellents, ce à quoi je m'attendais. Mais qu'en est-il de l'impact global de l'utilisation de Brotli: 11 à grande échelle? Il s'avère que l'utilisation de Brotli: 11 pour toutes les ressources publiques réduit les coûts tout autour:

  • Les tailles de fichier plus petites devraient entraîner une surcharge TLS plus faible. Cela dit, il n'est pas facilement mesurable, ni significatif pour mon service car les processeurs modernes sont très rapides pour le cryptage. Pourtant, je pense qu'il y a des économies minuscules et répétées à cause du cryptage pour chaque demande, car les fichiers plus petits cryptent plus rapidement.
  • Il réduit le coût de la bande passante. Les 21% d'économies que j'ai réalisées dans tous les domaines en sont un bon exemple. Et, rappelez-vous, l'épargne n'est pas une chose ponctuelle. Chaque demande compte comme un coût, donc les économies de 21% sont répétées maintes et maintes fois, créant une économie de boule de neige pour le coût de la bande passante.
  • Nous ne mettons en cache que les fichiers chauds en mémoire sur les serveurs Edge. En raison de la large prise en charge des navigateurs pour Brotli, ces fichiers chauds sont principalement encodés par Brotli et leur petite taille nous permet d'en stocker davantage dans la mémoire disponible.
  • Les visiteurs, en particulier ceux sur les appareils mobiles, bénéficient d'un transfert de données réduit. Cela se traduit par moins d'utilisation de la batterie et des économies sur les frais de données. C’est une énorme victoire qui est transmise aux utilisateurs de nos clients!

C'est tellement bon. Le coût que nous économisons par demande n'est pas significatif, mais étant donné que nous avons un taux d'échec de cache proche de zéro pour les ressources publiques, nous pouvons facilement amortir le coût initial élevé de la compression dans plusieurs centaines de demandes. Après cela, nous envisageons un avantage à vie de réduction des frais généraux.

Ça ne s'arrête pas là

Avec la combinaison de CDN publics et privés que nous avons introduits dans le cadre de notre service d'optimisation des performances, nous voulions nous assurer que les clients pouvaient définir des niveaux de compression inférieurs pour les ressources qui changent fréquemment au fil du temps (comme CSS et JavaScript personnalisés) sur le CDN privé et basculer automatiquement vers le CDN public pour les ressources open-source qui changent moins souvent et qui ont préconfiguré Brotli: 11. De cette façon, nos clients peuvent toujours obtenir un taux de compression élevé sur les ressources qui changent moins souvent tout en bénéficiant de bons taux de compression avec purge instantanée et mises à jour pour les ressources compressibles.

Tout cela se fait de manière fluide et transparente à l'aide de nos outils d'intégration. L'avantage supplémentaire de cette approche pour les clients est que la bande passante sur le CDN public est totalement gratuite avec des niveaux de performance sans précédent.

Essayez-le vous-même!

Tester sur un site Web commun, utiliser une compression agressive peut facilement raser environ 50 Ko sur le chargement de la page. Si vous voulez jouer avec le CDN public gratuit et profiter de CSS et JavaScript plus petits, vous êtes invités à utiliser notre service PageCDN. Voici quelques-unes des bibliothèques les plus utilisées pour votre usage:












Notre bibliothèque PHP bascule automatiquement entre CDN privé et public si vous en avez besoin. La même fonctionnalité est implémentée de manière transparente dans notre plugin WordPress qui charge automatiquement les ressources publiques sur le CDN public. Ces deux outils permettent un accès complet au CDN public gratuit. Bibliothèques pour JavaScript, Python. et Ruby ne sont pas encore disponibles. Si vous apportez une telle bibliothèque à notre CDN public, je serai heureux de la répertorier dans nos documents.

De plus, vous pouvez utiliser notre outil de recherche pour trouver immédiatement une ressource correspondante sur le CDN public en fournissant l'URL d'une ressource sur votre site Web. Si aucun de ces outils ne fonctionne pour vous, vous pouvez vérifier la page de bibliothèque appropriée et choisir les URL que vous souhaitez.

Regard vers l'avenir

Nous avons commencé par héberger uniquement les bibliothèques les plus populaires afin de prévenir la propagation des logiciels malveillants. Cependant, les choses évoluent rapidement et nous ajoutons de nouvelles bibliothèques selon les suggestions de nos utilisateurs. Vous pouvez également suggérer vos préférés. Si vous souhaitez toujours créer un lien vers un référentiel Github public ou privé qui n'est pas encore disponible sur notre CDN public, vous pouvez utiliser notre CDN privé pour vous connecter à un référentiel et importer toutes les nouvelles versions telles qu'elles apparaissent sur GitHub, puis appliquer votre propre agressif optimisations avant livraison.

Qu'est-ce que tu penses?

Tout ce que nous avons couvert ici est uniquement basé sur mon expérience personnelle de travail avec la compression Brotli à l'échelle CDN. Il se trouve que c'est aussi une introduction à mon CDN public. Nous sommes toujours un petit service et nos sites Web clients ne sont que des centaines. Pourtant, à cette échelle, la compression agressive semble porter ses fruits.

J'ai obtenu des résultats de haute qualité pour mes clients et maintenant vous pouvez également utiliser ce service gratuit pour vos sites Web. Et, si vous l'aimez, veuillez laisser des commentaires sur mon e-mail et le recommander à d'autres.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *