Brotli

Article Wikipedia : https://en.wikipedia.org/wiki/Brotli

Voir aussi : NGINX module for Brotli compression

Journaux liées à cette note :

Quel impact Tailwind CSS a-t-il sur la taille des pages d'un site de contenu ? #WebDev, #css, #tailwindcss, #JaimeraisUnJour

En février 2023, j'écrivais ceci :

Par ailleurs, je m'interroge sur l'impact du paradigme Tailwind CSS (utility CSS) concernant l'empreinte mémoire des pages.
J'ai le sentiment que la profusion d'attributs class="..." va probablement augmenter considérablement la taille des pages.
#JaimeraisUnJour prendre le temps de mesurer cet aspect.

source

Cette question continue de me trotter dans la tête et mon intuition a évolué au fil du temps. J'ai maintenant l'intuition qu'une compression Brotli fonctionnerait efficacement avec le code Tailwind CSS.

Ce matin j'ai enfin pris le temps de faire des mesures.

J'ai choisi d'effectuer mes mesures sur le site de Blast qui est un site de contenu implémenté en Tailwind CSS.

Voici les mesures que j'ai effectuées :

  • Home page https://www.blast-info.fr
    • Taille mémoire brute (non compressée) de la page complète sans dépendances : 453 Ko
    • Taille mémoire du HTML du body, récupéré avec l'inspecteur Firefox via "copier l'intérieur du HTML" : 178Ko
    • En supprimant tous les attributs class="...", je passe à 145Ko, soit une empreinte brute des attributs class de 33Ko (environ 18% du body)
    • Taille mémoire du texte seul : 5ko (2%)
    • Taille du body compressé Brotli : 25Ko
    • Taille du body sans attributs class="..." compressé Brotli : 23Ko, soit 2Ko pour les attributs classe (environ 8%)
  • Page intérieure https://www.blast-info.fr/articles/2025/macron-bayrou-vers-un-jour-sans-fin-I0AwyT5KTf6_0ywKmLShVQ
    • Taille mémoire brute (non compressée) de la page complète sans dépendances : 404 Ko
    • Taille mémoire brute du HTML du body, récupéré avec l'inspecteur Firefox via "copier l'intérieur du HTML" : 281ko
    • En supprimant tous les attributs class="...", je passe à 251Ko, soit une empreinte brute des attributs class de 30Ko (environ 10% du body)
    • Taille mémoire du texte seul : 34ko (environ 12%)
    • Taille du body compressé Brotli : 43Ko
    • Taille du body sans attributs class="..." compressé Brotli : 40Ko, soit 3Ko pour les attributs classe (environ 6%)

Une fois compressé, la partie Tailwind CSS représente 2Ko à 3Ko par page. Il faut noter que ces valeurs constituent probablement une estimation haute, car un site utilisant le paradigme CSS traditionnel emploie généralement aussi des class="…" dans ses pages HTML.

Mon constat : je pense que le surcout de Tailwind CSS sur la taille des pages d'un site de contenu demeure négligeable après compression.

Une autre question que je me pose : quel est l'impact de Tailwind CSS sur l'utilisation mémoire du navigateur ?

Je découvre la compression Zstandard #OnMaPartagé, #JaiDécouvert, #WebDev, #DevOps, #compression, #brotli, #zstandard, #JeMeDemande, #JaimeraisUnJour

Un ami m'a partagé Zstandard (zstd), un algorithme de compression.

Il y a 2 ans, j'ai étudié et activé Brotli dans mes containers nginx, voir la note : Mise en œuvre du module Nginx Brotli.

Je viens de trouver un module zstd pour nginx : https://github.com/tokers/zstd-nginx-module

Mon ami m'a partagé cet excellent article : Choosing Between gzip, Brotli and zStandard Compression. Très complet, il explique tout, contient des benchmarks…

Voici ce que je retiens.

Brotli a été créé par Google, Zstandard par Facebook :

Zstandard is a newer compression method developed by Facebook.

source

Je lis sur canIuse, le support Zstandard a été ajouté à Chrome en mars 2024 et à Firefox en mai 2024, c'est donc une technologie très jeune coté browser.

Benchmark sur le dépôt officiel de Zstandard :

J'ai trouvé ces threads Hacker News :

Zstandard semble être fortement adopté au niveau de l'écosystème des OS Linux :

The Linux kernel has included Zstandard since November 2017 (version 4.14) as a compression method for the btrfs and squashfs filesystems.

source

Packages Ubuntu et Debian :

In March 2018, Canonical tested the use of zstd as a deb package compression method by default for the Ubuntu Linux distribution. Compared with xz compression of deb packages, zstd at level 19 decompresses significantly faster, but at the cost of 6% larger package files. Support was added to Debian in April 2018

source

Packages Fedora :

Fedora added ZStandard support to rpm in May 2018 (Fedora release 28) and used it for packaging the release in October 2019 (Fedora 31). In Fedora 33, the filesystem is compressed by default with zstd.

source

#JeMeDemande si dans mes projets de doit utiliser Zstandard plutôt que Brotli 🤔.

Je pense avoir trouver une réponse ici :

The research I’ve shared in this article also shows that for many sites Brotli will provide better compression for static content. Zstandard could potentially provide some benefits for dynamic content due to its faster compression speeds. Additionally:

  • ...
  • For dynamic content
    • Brotli level 5 usually result in smaller payloads, at similar or slightly slower compression times.
    • zStandard level 12 often produces similar payloads to Brotli level 5, with compression times faster than gzip and Brotli.
  • For static content
    • Brotli level 11 produces the smallest payloads
    • zStandard is able to apply their highest compression levels much faster than Brotli, but the payloads are still smaller with Brotli.

source

#JaimeraisUnJour prendre le temps d'installer zstd-nginx-module à mon image Docker nginx-brotli-docker (ou alors d'en trouver une déjà existante).

Mise en œuvre du module Nginx Brotli #WebDev, #devlog, #nginx, #compression, #brotli

Pour accélérer un peu la vitesse de chargement de https://sklein.xyz et améliorer mon score Lighthouse, j'ai activé la compression Brotli dans nginx.

Voici le dépôt GitHub qui convient le Dockerfile de l'image Docker qui j'utilise : nginx-brotli-docker.

Cette image contient nginx + le module ngx_brotli.

J'en ai profité pour étudier un peu l'histoire de Brotli.

Je découvre que Brotli a été créé par un employé de Google pour accélérer le chargement fontes de caractères :

Google employees Jyrki Alakuijala and Zoltán Szabadka initially developed Brotli in 2013 to decrease the size of transmissions of WOFF web font.

source

Le support de Brotli semble avoir été ajouté à Firefox en janvier 2016 et à Chrome en avril 2016.

Au sujet de son nom :

Comme pour zopfli, un autre algorithme de compression de Google, Brotli porte le nom d'une viennoiserie suisse. C'est la transcription de Brötli (petit pain en suisse allemand).

source

Concernant les performances, je lis :

Compared to gzip compression, JavaScript files compressed with Brotli are roughly 15% smaller, HTML files are around 20% smaller, and CSS files are around 16% smaller.

source

Le changement n'est pas "exceptionnel", mais comment c'est simple à activer, autant en profiter 😉.

Voici ce que cela donne pour le téléchargement de la page https://sklein.xyz/fr/ :

$ curl -s -H "Accept-Encoding: gzip" -o /dev/null -w "%{size_download}\n" https://sklein.xyz/fr/
5566

$ curl -s -H "Accept-Encoding: br" -o /dev/null -w "%{size_download}\n" https://sklein.xyz/fr/
4846