CSS-Dateien minimieren

CSS-Dateien minimieren

CSS-Dateien lassen sich gut minimieren. Dazu werden unnötige Zeichen herausgelöscht und die Datei wird im Prinzip komprimiert.

Es muss aber aufgepasst werden, ob das Design noch so passt und auch alle Funktionen, da manche Funktionen, wie Animationen, auch über css gesteuert werden können und so das CSS-minimieren manchmal Probleme verursachen kann.

Wozu der Aufand der CSS-Optimierung?

Es wirkt vielleicht sehr aufwendig, die CSS-Files zu optimieren und es stellt sich die Frage, ob sich das wirklich lohnt css zu minimieren. Letztlich lohnen sich alle SEO-Maßnahmen – vor allem, wenn man diese mit wenig Aufwand direkt durchführt und in den Arbeitsprozess einbezieht – dazu gehört auch css minify. Jedes Byte weniger sorgt für bessere Ladezeiten und dafür, dass man die Suchmaschinen beeindrucken kann. Das gilt auch für CSS-Optimierung.

In WordPress einbauen

In WordPress werden die css-Dateien in den themes eingebaut. Somit ist es nicht ganz so trivial, diese zu tauschen. Aber das ist auch kein Hexenwerk.

GANZ WICHTIG: Da Du hier in Deine Quelldateien eingreifst, solltest Du das theme-Verzeichnis über Dein FTP-Programm sichern.

Theme anpassen für das minimierte CSS

In WordPress werden die CSS-Dateien über eine Funktion geladen, die meistens in der functions.php zu finden ist, oder wenn nicht da, gibt es eine Datei, die dort eingebunden wird, die die Dateien nachlädt. Es ist meist etwas mit enqueue und die Funktion heißt wp_enqueue_style.

Hier findest Du dann auch Deine CSS-Datei, die Du geändert hast. In den dort angegebenen Pfad lädst Du die Datei per FTP hoch und änderst den Namen entsprechend ab. In dem Beispiel würde aus der custom.css die custom.min.css.

Folgendes kann bei der Komprimierung mit einem css minifier vorgenommen werden:

• Leerzeilen: Entfernen von unnötigen Leerzeilen
• Kommentare: Die können sehr lang sein und sind nur für den Bearbeiter notwendig
• Leerzeichen: Auch Leerzeichen können genutzt werden um css zu minimieren
• Unnötige Zeichen: Nach jedem Eintrag wird in css ein ; gepackt. Vor dem abschließenden } ist das aber nicht notwendig.