I'm back with some interesting experiment results for my development blog after a while. As a fan of Django, I suddenly became curious about CSS Minification, which is part of web frontend optimization, so I conducted an experiment myself. The results are quite intriguing, and I want to share them with you. I believe this will be particularly meaningful for developers like me who primarily use Python.

The Reason for This Experiment: A Sudden Question❓

While developing web services, I found myself thinking, "Frontend optimization is best done with JavaScript (Node.js) based tools!" without even realizing it. Considering how the Node.js ecosystem dominates frontend build and optimization tools, I think it was a natural bias. The same applied to CSS Minification. Libraries like css-minimizer-webpack-plugin or clean-css, which are included in build tools like webpack and gulp, felt like the standard.

Even when I asked AI models like ChatGPT and Gemini to recommend a CSS minifier, they almost always suggested clean-css-cli from npm as the top choice, along with an explanation that described it as the "fastest and most powerful tool".

However, I suddenly had this question.

"Are Node.js based tools really so much faster or more efficient than Python based ones, even for something as simple as CSS Minification? Do I really have to set up a Node.js environment just for frontend optimization?"

To find the answer to this question, I started a small experiment.

Experiment Details and Process

The experiment was simple. I used one of the main CSS files of my currently operating blog, style.css (about 67KB), and compared the size and content of the compressed results using two tools: clean-css-cli based on Node.js and csscompressor based on Python.

1. Checking the Original File

jesse@laptop:~/my/path/to/css$ ll style.css
-rw-rw-r-- 1 jesse jesse 67325  5월 23 19:10 style.css

The original style.css file was 67,325 bytes. (For readability, it includes whitespace, line breaks, and comments.)

2. Compressing with Node.js clean-css-cli

Installed clean-css-cli globally via npm and compressed style.css to style.min.css.

jesse@laptop:~/my/path/to/css$ npm install -g clean-css-cli
jesse@laptop:~/my/path/to/css$ cleancss -o ./style.min.css ./style.css

3. Compressing with Python csscompressor

Used the csscompressor module in a Python environment to compress style.css to python_style.min.css.

(venv)jesse@laptop:~/my/path/to/css$ python -m csscompressor style.css > python_style.min.css

4. Comparing the Sizes of the Resulting Files

Compared the sizes of the generated files using the ll command.

jesse@laptop:~/my/path/to/css$ ll style*
-rw-rw-r-- 1 jesse jesse 67325  5월 23 19:10 style.css         # Original
-rw-rw-r-- 1 jesse jesse 46740  6월 23 22:39 style.min.css     # npm clean-css result
-rw-rw-r-- 1 jesse jesse 46828  6월 23 23:47 python_style.min.css # Python csscompressor result

5. Visually Comparing the Contents of the Compressed Files

CSS Compression Comparison Result Screenshot

I opened both compressed files with nvim and visually compared their contents. (See the screenshot above for reference)

Analysis of Experiment Results

  • Original style.css (67,325 bytes)
  • clean-css-cli (style.min.css) (46,740 bytes): approximately 30.58% size reduction!
  • csscompressor (python_style.min.css) (46,828 bytes): approximately 30.45% size reduction!

I was quite surprised by the results.

  1. Overwhelming size reduction effect: Both tools reduced the size of the original CSS file by over 30%. This clearly shows that all unnecessary characters we added for readability, such as whitespace, line breaks, and comments, take up actual bytes. By removing them, we can see a significant reduction in file size, which directly contributes to improved web service loading speed. When deploying your app, don’t overlook this; ensuring minification has a substantial effect.
  2. Almost identical compression efficiency: The clean-css-cli was only 88 bytes smaller than csscompressor, showing that in terms of compression efficiency, they performed at a virtually identical level.
  3. Identical content of results: Comparing with nvim, the contents of the two compressed files were almost perfectly identical. The fact that there was only an 88-byte difference is perplexing as they matched so closely. This likely indicates slight differences in the algorithms or optimization methods used internally by each tool, but the importance is that they achieved the same goal of eliminating unnecessary elements.

Significance of This Experiment and Its Implications: Breaking Preconceptions!

The biggest message from my experiment results is that "the preconception that frontend optimization must be done with JavaScript (Node.js) based tools can be discarded".

Many Python backend developers, like me, might feel burdened thinking, "Do I really need to set up a Node.js environment? What should I install with npm?" when frontend optimization tasks come up. However, this experiment shows that performance differences may be minimal for text processing-based optimization tasks like CSS Minification.

The implications are clear.

  • Freedom of technology stack selection: Developers primarily using Python backend do not need to build a separate Node.js environment to effectively optimize frontend CSS using well-designed Python libraries, like csscompressor.

  • Simplified development workflow: One can easily integrate CSS optimization into their build and deployment pipeline through Python scripts or simple shell commands, without being tied to complex webpack setups or npm scripts. This can be a significant advantage, especially for small projects or teams prioritizing efficiency.

  • Focusing on the essence: What matters is not "which tool was used" but rather "how effectively it was optimized". Having successfully reduced the size of the CSS file by around 30% through this experiment, I achieved the essential goals of improving user experience and enhancing web service performance.

Of course, the features provided by frontend tools in the JavaScript ecosystem (bundling, transpiling, tree shaking, etc.) are more extensive and powerful. But this experiment illustrated that in certain optimization tasks, like CSS Minification, leveraging a familiar development environment can be more efficient.

Going forward, I plan to actively utilize Python tools for CSS Minification in my Python-based web services without adding unnecessary Node.js dependencies.

What about you? Did you have similar preconceptions, and what do you think about the results of this experiment? Please share your thoughts in the comments!