Home » Ein kleiner Fehler bei der CSS-Komprimierung, der mich eine Stunde Arbeit kostete

Ein kleiner Fehler bei der CSS-Komprimierung, der mich eine Stunde Arbeit kostete

Nutzt man eine der vielen Tools zur Messung der Ladegeschwindigkeit einer WordPress Seite, erhält man immer den Vorschlag CSS und JavaScript Dateien zu kombinieren (in einer Datei zusammen zu fassen) und zu minifizieren (komprimieren).

Das Kombinieren von CSS oder JavaScript Dateien ist praktisch nicht durchführbar, weil schon jedes WordPress Plugin seine eigenen CSS oder JavaScript Datei hat. Würde man alle kombiniere, müsste man bei jedem Update eines Plugins wieder von vorne anfangen.

Einfacher ist es, die Größe einer CSS oder JavaScript Datei zu reduzieren.

Das geht durch das Entfernen aller unnötigen Zeichen, Leerzeilen, Zeilenumbrüchen und Kommentaren.

Einige Plugins bieten die Möglichkeit der Komprimierung. Die Stärke der Komprimierung ist je nach Tool unterschiedlich ausgeprägt. Einige Tools entfernen nur die Leerzeichen, andere ordnen das CSS komplett neu um.

In einigen Fällen, kann dies die Logik aber so umändern, dass es auf Deine Webseite designtechnisch große Auswirkungen hat.
Hier auf WPard war ich genau mit diesem Problem konfrontiert.

Nachdem ich das Design vom Entrance-Theme auf das Deck-Theme geändert habe, habe ich alle Optimierungsschritte aus meinem E-Book WordPress schneller machen durchlaufen. Das Ergebnis konnte sich sehen lassen.

Pagespeed Ergebnis nach Optimierung WordPress

Nicht sehen lassen konnte sich die jedoch die mobile Version meiner Seite, die nach der Komprimierung aller CSS-Dateien total verschoben aussah. Auch die Navigation schaltete nicht auf mobile Version um.

Ergebnis nach Komprimierung der CSS Dateien

Mein Fehler war, dass ich  alle CSS-Dateien auf einmal komprimiert und hochgeladen habe. So wusste ich nicht mehr, welche der einzelnen Komprimierungen dafür verantwortlich war und musste alle wieder zurücksetzen und von vorne anfangen.

Damit bei Dir ein solches Problem nicht auftritt,empfehle ich folgende Vorgehensweise:

Nutze Offline Komprimierungstool zum Verkleinern von CSS-Dateien, wie zum Beispiel FreeFormatter, CSS Tidy oder YUI Compressor. Diese können den CSS-Code auf verschiedene Arten optimieren.

Die schonenendste Methode ist das Entfernen von unnötigen Leerzeichen und Zeilenumbrüchen. Zusätzlich können aber auch noch darüberhinaus gehende Techniken angewandt werden.

Wichtig dabei ist, dass man immer eine Datei nach der anderen komprimiert und dann die Funktionsfähigkeit bzw. das Design zu testen. Ebenso wichtig ist es, immer eine Original Datei zu behalten.

Nicht nur, weil es nach der Komprimierung praktisch unleserlich ist, was zukünftige Änderungen am Code etwas schwieriger macht, sondern weil man die fehlerhaft komprimierte Datei wieder ersetzen kann.