Journal du lundi 01 septembre 2025 à 15:49
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'attributsclass="..."
va probablement augmenter considérablement la taille des pages.
#JaimeraisUnJour prendre le temps de mesurer cet aspect.
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 :
453 Ko
body
, récupéré avec l'inspecteur Firefox via "copier l'intérieur du HTML" : 178Ko
class="..."
, je passe à 145Ko
, soit une empreinte brute des attributs class
de 33Ko
(environ 18% du body)5ko
(2%)25Ko
class="..."
compressé Brotli : 23Ko
, soit 2Ko
pour les attributs classe (environ 8%
)404 Ko
body
, récupéré avec l'inspecteur Firefox via "copier l'intérieur du HTML" : 281ko
class="..."
, je passe à 251Ko
, soit une empreinte brute des attributs class
de 30Ko
(environ 10% du body)34ko
(environ 12%)43Ko
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 ?