Na een lange tijd ben ik weer terug met een interessant experimentresultaat op mijn ontwikkelingsblog. Als iemand die van Django houdt, begon ik me af te vragen over een aspect van webfrontendoptimalisatie, namelijk CSS-minificatie, en heb ik het zelf getest. De resultaten waren behoorlijk fascinerend, en ik wil ze graag met jullie delen. Vooral voor ontwikkelaars die, net als ik, voornamelijk met Python werken, denk ik dat dit een betekenisvolle inhoud zal zijn.

De aanleiding voor dit experiment: een plotselinge vraag❓

Wanneer ik normaal gesproken een webservice ontwikkel, dacht ik stiekem: "Frontendoptimalisatie wordt het beste gedaan met tools die gebaseerd zijn op JavaScript (Node.js)!" Het is een vanzelfsprekende vooringenomenheid, gezien het feit dat het Node.js-ecosysteem de frontend-build- en optimalisatietools in handen heeft. CSS-minificatie was ook hetzelfde. webpack, gulp en de zoals css-minimizer-webpack-plugin, of Node.js gebaseerde bibliotheken zoals clean-css voelden als de standaard.

Wanneer je AI zoals ChatGPT of Gemini vraagt om een css-minifier aan te bevelen, wordt vaak als eerste npm's clean-css-cli aanbevolen, vergezeld van de opmerking: "Dit is de snelste en krachtigste tool."

Maar toen kwam plotseling deze vraag in me op.

"Is het echt zo dat Node.js-gebaseerde tools qua snelheid of efficiëntie veel beter zijn dan Python-gebaseerde tools, zelfs voor iets dat gewoon een tekstcompressie is zoals CSS-minificatie? Moet ik daadwerkelijk een Node.js-omgeving instellen voor frontendoptimalisatie?"

Om een antwoord op deze vraag te vinden, begon ik met een klein experiment.

Inhoud en proces van het experiment

Het experiment was eenvoudig. Ik nam een van de hoofd-CSS-bestanden van mijn huidige blog, style.css (ongeveer 67KB) en gebruikte twee tools: clean-css-cli op basis van Node.js en csscompressor op basis van Python, om deze te comprimeren, en vergeleek daarna de grootte en inhoud van de resultaten.

1. Controleer het originele bestand

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

Het originele bestand style.css was 67.325 bytes. (Voor de leesbaarheid zijn spaties, nieuwe regels, opmerkingen, etc. inbegrepen.)

2. Comprimeren met Node.js clean-css-cli

Ik installeerde clean-css-cli globaal via npm en compresseerde style.css naar 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. Comprimeren met Python csscompressor

Met de csscompressor module in de Python-omgeving heb ik style.css gecomprimeerd naar python_style.min.css.

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

4. Vergelijkings van bestandsgroottes

Ik vergeleek de groottes van de gemaakte bestanden met het ll-commando.

jesse@laptop:~/my/path/to/css$ ll style*
-rw-rw-r-- 1 jesse jesse 67325  23 mei 19:10 style.css         # origineel
-rw-rw-r-- 1 jesse jesse 46740  23 jun 22:39 style.min.css     # npm clean-css resultaat
-rw-rw-r-- 1 jesse jesse 46828  23 jun 23:47 python_style.min.css # Python csscompressor resultaat

5. Visuele vergelijking van de inhoud van de gecomprimeerde bestanden

CSS compressievergelijking resultaat screenshot

Ik opende beide gecomprimeerde bestanden in nvim en vergeleek visueel hun inhoud. (Zie de screenshot bovenin deze post)

Analyse van de experimentresultaten

  • Origineel style.css (67.325 bytes)
  • clean-css-cli (style.min.css) (46.740 bytes): Ongeveer 30,58% vermindering in grootte!
  • csscompressor (python_style.min.css) (46.828 bytes): Ongeveer 30,45% vermindering in grootte!

Ik was verrast toen ik de resultaten zag.

  1. Indrukwekkende grootte vermindering: Beide tools verminderden de grootte van het originele CSS-bestand met ongeveer meer dan 30%. Dit toont duidelijk aan dat alle overbodige tekens zoals spaties, nieuwe regels en opmerkingen die we voor de leesbaarheid hebben toegevoegd, daadwerkelijk bytes in beslag nemen, en het verwijderen daarvan maakt het mogelijk om aanzienlijk wat bestandsgrootte te besparen, wat direct bijdraagt aan de laadsnelheid van de webservice. Bij het uitrollen van je applicatie, beschouw het alstublieft niet als een ongemak, maar zorg ervoor dat je minifies. De impact is groter dan je zou denken.
  2. Bijna geen verschil in compressie-effectiviteit: clean-css-cli was slechts 88 bytes kleiner dan csscompressor, maar op het gebied van compressie-effectiviteit zijn ze praktisch gelijk in prestatie.
  3. Gelijke inhoud van de resultaten: Bij vergelijking met nvim bleek dat de inhoud van de twee gecomprimeerde bestanden bijna perfect gelijk was. Het is moeilijk te begrijpen waarom er een verschil van 88 bytes is; het lijkt erop dat dit komt door kleine verschillen in de algoritmen of optimalisatiewijzen die door elk gereedschap intern worden gebruikt, maar dit is verwaarloosbaar, en in feite werd het doel om overbodige elementen te verwijderen door beide bereikt.

De betekenis van dit experiment en wat het ons leert: doorbreek de vooroordelen!

De belangrijkste boodschap die de resultaten van mijn experiment geven is dat "voor frontendoptimalisatie hoeft het niet altijd een tool te zijn die gebaseerd is op JavaScript (Node.js)."

Veel Python-achterkantontwikkelaars hebben, net als ik, een lastige gedachten gehad als er frontendoptimalisatie aan de orde is: "Moet ik een Node.js-omgeving opzetten? Wat moet ik met npm installeren?" Maar dit experiment toont aan dat voor optimalisatiewerkzaamheden zoals CSS-minificatie de prestatieverschillen tussen lenguages of runtimes minimaal kunnen zijn.

Wat dit ons leert is duidelijk.

  • Vrijheid in technologische keuze: Voor ontwikkelaars die voornamelijk met Python backend werken, kunnen ze zonder een aparte Node.js-omgeving te hoeven opzetten, tools zoals csscompressor gebruiken, een goed geconstrueerde Python-bibliotheek voor de optimalisatie van frontend-CSS.

  • Versimpelde ontwikkelworkflow: In plaats van vast te zitten in vrachten complexiteit zoals webpack configuraties of npm scripts, kunnen ze eenvoudig de optimalisatiefase voor CSS integreren in hun build- en deploypijplijn via Python-scripts of eenvoudige shell-commando's. Dit kan bijzonder voordelig zijn voor kleine projecten of teams die zich richten op efficiëntie.

  • Focus op de kern: Wat belangrijk is, is niet "welke tools gebruikt zijn", maar "hoe effectief ze geoptimaliseerd zijn". Aangezien het experiment met succes resulteerde in een vermindering van de CSS-bestandsgrootte met ongeveer 30%, is het doel van het verbeteren van de gebruikerservaring en de prestaties van de webservice dus volledig bereikt.

Uiteraard zijn de functies die frontend-tools in het JavaScript-ecosysteem bieden (bundelen, transpileren, tree-shaking, enz.) veel groter en krachtiger. Maar dit experiment heeft aangetoond dat het misschien efficiënter kan zijn om vertrouwde ontwikkelingsomgevingen te gebruiken voor specifieke optimalisatietaken zoals CSS-minificatie.

Ik ben van plan om in de toekomst de CSS-minificatie voor mijn Python-gebaseerde webservices actief met Python-tools te doen, zonder onnodige Node.js-afhankelijkheden toe te voegen.

Wat denken jullie? Hadden jullie misschien ook soortgelijke vooroordelen en wat zijn jullie gedachten over de resultaten van dit experiment? Deel het alsjeblieft in de reacties!