WordPress schneller machen: CSS minifizieren

Ein weiterer Beitrag aus meiner kleinen Reihe „WordPress schneller machen“. CSS kann von Browsern auch verstanden werden, wenn „überflüssige“ Inhalte wie Kommentare, Leerzeichen und Zeilenumbrüche entfernt worden sind. Was die Lesbarkeit für Menschen deutlich erschwert oder unmöglich macht, kann dabei helfen wertvolle Kilobytes an Datenmenge zu sparen. Grund genug, sein CSS zu „minifizieren“.

Beim Minifizieren geht es darum, „überflüssige“ Zeichen, also Zeichen die für die Interpretation des eigentlichen Inhaltes nicht notwendig sind, zu entfernen und so die Dateigröße manchmal entscheidend zu reduzieren. Abhängig von der Umgebung mit der man arbeitet, erledigen einige Teilprozesse diesen Schritt vielleicht automatisch, hier folgt auf jeden Fall die Anleitung um diesen Weg „zu Fuß“ zu gehen.

Zunächst einmal sollte man ein Backup von seiner style.css-Datei machen. Dieses Backup wird nicht minifiziert und bleibt somit menschenlesbar. Es wird genutzt, um Änderungen am CSS durchzuführen (daraus erstellt man dann wieder eine minifizierte CSS-Datei) und natürlich um ein Backup zu haben. Ein Dateiname wie style.css.backup bietet sich an, macht er doch gleich klar, worum es geht.

Den Inhalt der style.css-Datei nimmt man dann und fügt ihn in einen CSS Kompressor/Minifier seiner Wahl ein. Eine Google-Suche nach „CSS Minifier“ spuckt hierbei eine Vielzahl an Ergebnissen aus, die ersten vier Ergebnisse habe ich alle persönlich schon genutzt: cssminifier.com, csscompressor.com, cleancss.com und minifier.org. Ein Klick auf „Minify“ oder etwas Vergleichbares startet dann die Kompression des CSS und man sollte in Kürze eine relativ unleserliche Form seines CSS zurück erhalten.

In diesem „komprimierten“ CSS sind alle unnötigen Zeichen entfernt worden. Das betrifft meistens Kommentare, Leerzeichen und Zeilenumbrüche. Im Falle dieser Webseite hier sind das immerhin 29 KB, die wir jedem Nutzer ersparen, ohne das kleinste bisschen Funktionalität einzubüßen.

Das minifizierte CSS fügen wir schließlich in die style.css ein und speichern diese. Künftig wird damit das komprimierte CSS ausgeliefert, die bearbeitbare Version haben wir in der style.css.backup vorliegen.


Ergebnis:

flomei.de nutzt aktuell ein Child-Theme des Twenty Sixteen Themes von WordPress. Die style.css von Twenty Sixteen ist vor der Minifizierung 69 KB groß und enthält einiges an Kommentaren etc. pp., die jedes Mal mit ausgeliefert werden. cssminifier.com macht daraus immerhin 55 KB ohne das irgendwas verloren geht. Andere Themes haben deutlich größere CSS-Dateien und damit dann natürlich auch mehr Einsparpotenzial…

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.