Utility-first CSS compression demo
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 benchmark
NOTE: don't forget to run
yarnbeforehand to install dependencies.
How things work
Here's a break down of what happens.
1. Generating "semantic" classes
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:
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.
2. Compressing files
File sizes are compared for each version (uncompressed, Gzip, and Brotli) and outputted to the console.