WordPress schneller machen: CSS 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…

Teilen: Facebook - twitter - LinkedIn - XING - WhatsApp - E-Mail
RSS-Feed aller Blogbeiträge

Über den Autor

Ich bin gelernter Mediengestalter, studierter Druck- und Medientechniker und leidenschaftlicher Tüftler und Bastler.

Beruflich beschäftige ich mich mit der digitalen Transformation von Unternehmen, sowie der Automatisierung von Unternehmensprozessen, in der Druck- und Medienbranche. Mehr dazu findet sich im Lebenslauf.

Privat interessieren mich Kaffee(maschinen), Themen rund um Webentwicklung, das Internet im Allgemeinen und Speziellen und vieles, vieles mehr.

Ich freue mich auf Feedback per E-Mail unter kontakt@flomei.de, einen Euro für die Kaffeekasse oder etwas von meiner Amazon Wunschliste.