This experiment aims at demonstrating how using utility classes doesn't affect HTML file size, thanks to data compression. It compares the size of similar HTML pages (one with utility classes, the other without) without compression, with GZip compression, and with Brotli compression.
To run the benchmark, execute the following command:
npm run benchmark
# or
yarn benchmarkNOTE: don't forget to run
npm installoryarnbeforehand to install dependencies.
Here's a break down of what happens.
The source file is the full content of the body tag of an HTML page, which uses utility classes. The goal is to compare it to a version of itself that would be using semantic classes. To do this, a script first generates this version to get a result that would be as close to real life.
To do this, we collect the content of all class attributes, turn them into hashes (using SHA-1) and replace them. To ensure that similar sets of utility classes would yield the same hashes, we first sort the classes alphabetically.
Semantic classes are usually shorter, but they also sometimes are longer or split into several classes (as with modifiers). To account for both and get an average, we truncate the classes to 10 characters.
So, for example, the following class attribute:
<div class="flex flex-col min-h-screen text-base font-sans">Always yields the same class:
<div class="ec1dec286d">NOTE: the goal isn't to generate actual semantic classes, but what it would look like in terms of output (as in, short and less numerous).
If you disagree with the method or want to improve it, please PR directly.
Once both files are available, they're compressed with Gzip and Brotli, using respectively gzip-cli and brotli-cli.
File sizes are compared for each version (uncompressed, Gzip, and Brotli) and outputted to the console.