Ich bin zurück mit einem interessanten Experiment in meinem Entwicklungsblog! Als Django-Liebhaber hatte ich plötzlich Fragen zur CSS-Minimierung, einem Teil der Optimierung im Web-Frontend, und habe es selbst ausprobiert. Die Ergebnisse sind ziemlich spannend, und ich möchte sie mit euch teilen. Besonders für Entwickler, die wie ich hauptsächlich Python verwenden, könnte das von Bedeutung sein.

Der Anlass für dieses Experiment: Eine plötzliche Frage❓

Wenn ich normalerweise Web-Dienste entwickle, hatte ich unwillkürlich den Gedanken: "Optimierung des Frontends? Natürlich sind JavaScript (Node.js)-basierte Werkzeuge die besten!" Das liegt daran, dass das Node.js-Ökosystem die Werkzeuge für die Frontend-Bereitstellung und -Optimierung dominiert. Das gilt auch für die CSS-Minimierung. webpack, gulp und ähnliche Build-Werkzeuge beinhalten css-minimizer-webpack-plugin und Bibliotheken wie clean-css, die alle auf Node.js basieren und gefühlt der Standard sind.

Wenn ich sogar KI wie ChatGPT oder Gemini bitte, mir einen CSS-Minifier zu empfehlen, wird fast immer clean-css-cli von npm an erster Stelle genannt. "Dieses Werkzeug ist am schnellsten und leistungsfähigsten." Das wird dann oft zusätzlich bemerkt.

Doch plötzlich kam mir dieser Gedanke.

"Sind die Node.js-basierten Werkzeuge bei der CSS-Minimierung, die scheinbar nur eine Textkompression ist, wirklich so viel schneller oder effektiver als die Python-basierten Werkzeuge? Muss ich wirklich eine Node.js-Umgebung einrichten, nur für die Frontend-Optimierung?"

Um eine Antwort auf diese Frage zu finden, habe ich ein kleines Experiment gestartet.

Experimentinhalt und -verlauf

Das Experiment war einfach. Ich habe die Haupt-CSS-Datei meiner aktuellen Blog-Seite, style.css, die etwa 67 KB groß ist, genommen und zwei Tools verwendet: clean-css-cli auf Basis von Node.js und csscompressor, das auf Python basiert. Danach habe ich die Größe und den Inhalt der Ergebnisse verglichen.

1. Überprüfung der Originaldatei

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

Die Originaldatei style.css hatte 67.325 Bytes. (Zur Lesbarkeit sind Leerzeichen, Zeilenumbrüche und Kommentare enthalten.)

2. Kompression mit Node.js clean-css-cli

Ich habe clean-css-cli über npm global installiert und style.css in style.min.css komprimiert.

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. Kompression mit Python csscompressor

Ich habe das Modul csscompressor in der Python-Umgebung verwendet, um style.css in python_style.min.css zu komprimieren.

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

4. Vergleich der Dateigrößen der Ergebnisse

Ich habe die Größen der nach der Kompression erzeugten Dateien mit dem ll-Befehl verglichen.

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

5. Menschlicher Vergleich der Inhalte der komprimierten Dateien

Screenshot der CSS-Kompressionsvergleichsergebnisse

Ich habe die beiden komprimierten Dateien mit nvim geöffnet und die Inhalte visuell verglichen. (Siehe Screenshot im obigen Beitrag)

Analyse der Versuchsergebnisse

  • Originale style.css (67.325 Bytes)
  • clean-css-cli (style.min.css) (46.740 Bytes): Etwa 30,58 % Größenreduktion!
  • csscompressor (python_style.min.css) (46.828 Bytes): Etwa 30,45 % Größenreduktion!

Ich war selbst überrascht von den Ergebnissen.

  1. Beeindruckende Größenreduzierung: Beide Tools reduzierten die Größe der Original-CSS-Datei um über 30 %. Dies zeigt deutlich, dass alle überflüssigen Zeichen, die wir für die Lesbarkeit hinzugefügt haben, wie Leerzeichen, Zeilenumbrüche und Kommentare, tatsächlich Bytes belegen. Durch deren Entfernung können wir erheblich die Dateigröße reduzieren, was direkt zu einer Verbesserung der Ladegeschwindigkeit des Webdienstes beiträgt. Wenn ihr eure Apps veröffentlicht, denkt nicht, dass es lästig ist, die Dateien zu minimieren, es hat einen größeren Effekt, als man denkt.
  2. Fast identische Kompressionseffizienz: clean-css-cli war nur 88 Bytes kleiner als csscompressor, was bedeutet, dass die Effizienz in der Tat auf einem ähnlichen Niveau war.
  3. Identischer Inhalt der Resultate: Bei dem Vergleich mit nvim stellte sich heraus, dass die Inhalte der beiden komprimierten Dateien nahezu perfekt übereinstimmten. Es ist schwer nachzuvollziehen, warum der Unterschied von 88 Bytes existiert. Es scheint, dass es geringfügige Unterschiede in den Algorithmen oder Optimierungsmethoden gibt, die von jedem Tool genutzt werden, aber diese sind vernachlässigbar, und das Ziel, unnötige Elemente zu entfernen, wurde in jedem Fall erreicht.

Die Bedeutung und Implikationen dieses Experiments: Vorurteile überwinden!

Die wichtigste Botschaft aus meinem Experiment ist: "Vorurteile abzubauen, dass für die Frontend-Optimierung unbedingt JavaScript (Node.js)-basierte Werkzeuge verwendet werden müssen".

Viele Python-Backend-Entwickler, wie ich, haben sich vielleicht gedacht: "Muss ich eine Node.js-Umgebung installieren? Was soll ich mit npm installieren?" Wenn es um Aufgaben der Frontend-Optimierung geht, kann dieses Experiment zeigen, dass die Leistungsunterschiede zwischen Programmiersprachen oder Laufzeiten minimal sein können.

Das ist ganz klar.

  • Freiheit bei der Wahl des Tech-Stacks: Entwickler, die hauptsächlich im Python-Backend arbeiten, können ohne die Notwendigkeit, eine separate Node.js-Umgebung aufzubauen, durch gut entwickelte Bibliotheken wie csscompressor ausreichend effektive Optimierungen für das Frontend-CSS vornehmen.

  • Vereinfachte Entwicklungsabläufe: Anstatt an komplexen webpack-Einstellungen oder npm-Skripten festzuhalten, können wir durch einfache Python-Skripte oder Shell-Befehle leicht Schritte zur CSS-Optimierung in unsere Build- und Deploy-Pipelines integrieren. Dies kann besonders für kleine Projekte oder Teams, die Effizienz schätzen, von großem Vorteil sein.

  • Fokus auf das Wesentliche: Es geht nicht darum, "welches Werkzeug verwendet wurde", sondern "wie effektiv optimiert wurde". Bei diesem Experiment konnte ich die Größe der CSS-Datei um etwa 30 % reduzieren, was bedeutet, dass ich das eigentliche Ziel, die Verbesserung der Benutzererfahrung und der Leistung des Webdienstes, erreicht habe.

Natürlich sind die Funktionen der Frontend-Tools im JavaScript-Ökosystem (Bündelungen, Transpilierungen, Tree-Shaking usw.) deutlich umfangreicher und leistungsfähiger. Aber das Experiment hat gezeigt, dass es für bestimmte Optimierungsaufgaben wie CSS-Minimierung effizienter sein kann, die gewohnte Entwicklungsumgebung zu nutzen.

Ich werde in Zukunft bei der CSS-Minimierung für meinen Python-basierten Webdienst aktiv auf Python-Tools setzen, ohne unnötige Abhängigkeiten von Node.js hinzuzufügen.

Wie sieht es bei euch aus? Hattet ihr ähnliche Vorurteile, und welche Gedanken habt ihr zu den Ergebnissen dieses Experiments? Teilt eure Meinungen in den Kommentaren!