CSS für WordPress minifizieren

Ein typisches WordPress-Projekt lädt selten nur ein Stylesheet. Das aktive Theme bringt seine style.css mit, hinzu kommen die CSS-Dateien mehrerer Plugins, oft ein Seiten-Builder wie Elementor und schließlich Ihr eigenes CSS aus dem Customizer. Jede dieser Dateien ist eine renderblockierende Ressource: Der Browser muss sie vollständig laden und verarbeiten, bevor er die erste Seite zeichnet. Viele dieser Stylesheets werden mit reichlich Kommentaren und großzügigen Einrückungen ausgeliefert, weil sie für die Wartung durch Entwickler gedacht sind. Für Ihre Besucher bedeutet das unnötige Bytes bei jedem Aufruf. Minifiziertes CSS entfernt genau diesen Ballast. Ein Theme-Stylesheet von 110 KB kann so auf rund 74 KB schrumpfen, ohne dass sich am Layout oder an den Farben Ihrer Seite das Geringste ändert.

Die Minifizierung arbeitet verlustfrei und verändert die Darstellung nicht. Das Werkzeug entfernt nur Zeichen, die der Browser beim Verarbeiten von CSS ohnehin überspringt: Leerzeichen und Zeilenumbrüche zwischen den Tokens, Kommentarblöcke der Form /* */ und das optionale Semikolon vor der schließenden Klammer. Alle Selektoren, Eigenschaften, Werte und At-Regeln wie @media oder @font-face bleiben in unveränderter Reihenfolge erhalten. Gleichwertige Werte werden zusätzlich gekürzt, etwa #ffffff zu #fff oder 0px zu 0, weil der Browser diese Schreibweisen identisch auswertet. Kaskade und Spezifität, auf die WordPress-Themes mit ihren tief verschachtelten Selektoren besonders angewiesen sind, bleiben exakt gleich. Das Ergebnis ist pixelgenau dasselbe. Sie können Ihre Seite mit der minifizierten Datei laden und mit der Originalfassung vergleichen, es gibt keinen sichtbaren Unterschied.

Ein Online-Minifizierer und ein Caching- oder Optimierungs-Plugin schließen sich nicht aus, sie ergänzen einander. Plugins wie WP Rocket, Autoptimize oder LiteSpeed Cache bündeln und minifizieren CSS automatisch beim Ausliefern und kümmern sich um Zwischenspeicherung und Cache-Invalidierung. Für Stylesheets, die Sie selbst schreiben, etwa im Feld Zusätzliches CSS des Customizers oder in der style.css eines Child-Themes, lohnt sich dennoch eine vorgelagerte Minifizierung von Hand. Sie sehen sofort, wie stark sich eine Datei verkleinern lässt, und liefern von vornherein schlankeren Code aus. Wenn ein Plugin ein bestimmtes Stylesheet aus der automatischen Optimierung ausschließt, weil es Konflikte verursacht, können Sie genau diese Datei manuell minifizieren und trotzdem von der Ersparnis profitieren. Fügen Sie das Ergebnis einfach dort ein, wo Sie sonst das unkomprimierte CSS eingetragen hätten.

Auch bei WordPress ergänzen sich Minifizierung und Transportkomprimierung. Die Minifizierung verringert die Zeichenzahl in der Datei, gzip oder Brotli auf dem Server verkleinern zusätzlich die tatsächlich übertragene Datenmenge, indem sie wiederkehrende Bytefolgen durch kurze Verweise ersetzen. Die meisten Hoster und viele Caching-Plugins aktivieren gzip bereits standardmäßig, doch das ersetzt die Minifizierung nicht, denn beide Stufen wirken an unterschiedlicher Stelle und ihre Effekte addieren sich. Minifiziertes CSS lässt sich sogar besser komprimieren, weil die Token nach dem Entfernen der Leerzeichen dichter beieinanderliegen. Ein Stylesheet von 80 KB, das minifiziert auf 52 KB sinkt, wird mit aktivem gzip häufig als nur rund 11 KB übertragen. Prüfen Sie im Netzwerk-Tab der Entwicklerwerkzeuge, ob Ihr Server bereits komprimiert, und nutzen Sie die Minifizierung als vorgelagerten Schritt.

Die gesamte Verarbeitung läuft lokal in Ihrem Browser. Ihr CSS wird nicht hochgeladen, es geht weder an einen Server von FixTools noch an einen Dritten und verlässt Ihr Gerät nicht. Das ist gerade dann angenehm, wenn ein Stylesheet interne Klassennamen oder Kommentare zu noch nicht veröffentlichten Bereichen Ihrer Website enthält. Überprüfen können Sie es im Netzwerk-Tab der Entwicklerwerkzeuge: Während der Minifizierung wird keine ausgehende Anfrage für Ihren Code gestellt. Bewahren Sie außerdem stets die lesbare Originalfassung auf, denn die minifizierte, einzeilige Datei lässt sich kaum bearbeiten. Ändern Sie das CSS künftig, passen Sie die Quelle an und minifizieren erneut. Das Werkzeug ist kostenlos, verlangt keine Anmeldung, setzt kein Wasserzeichen und kennt kein Tageslimit, sodass Sie so oft minifizieren können, wie Ihr Projekt es braucht.