Zum Inhalt springen

CSS Optimizer: Stylesheets per Mausklick verkleinern

Da ich gerade selbst an einem neuen WordPress-Design arbeite, aber trotzdem nach wie vor kein absoluter CSS-Experte bin, kommt dieses Tool genau zum richtigen Zeitpunkt:

CSS Optimizer

Der CSS Optimizer (sorry, für das NSFW-Bild im Header kann ich nichts) entfernt automatisch alle Überflüssigkeiten und doppelte Einträge aus Stylesheets. Die Größe der CSS-Datei wird verringert und damit auch Ladezeit und Traffic der Webseite.

Durch die Optimierung hat sich mein gesamtes Stylesheet um sagenhafte 23% verkleinert.

Vorher:

body {
color: #333333;
background-color: #FFFFFF;
margin: 1px 2px 1px 2px;
}

Nachher:

body {
color: #333;
background: #FFF;
margin: 1px 2px;
}

Leider gibt es einen großen Nachteil bei der Optmierungsgeschichte: Sämtliche Kommentare, die normalerweise dem besseren Verständnis des Codes dienen, verschwinden.
Da nun bei WordPress im oberen Teil von style.css-Dateien grundlegende Informationen zum Theme stehen (Name, Autor, Version, Links etc.), sollte man diese gar nicht erst mit “optimieren” lassen und sie stattdessen einfach später wieder einfügen.

Update: Es geht auch besser! Bei Clean CSS kann u.a. eingestellt werden, dass die Kommentare beibehalten werden. (Danke @ fraencko)

Und noch ein letzter Tipp: Auch wenn in diesem Punkt viel Potenzial zur Einsparung besteht, sollte der Haken bei “Pretty Print” gesetzt bleiben, wenn man noch weiter am Stylesheet arbeiten möchte (oder plant das Theme zu veröffentlichen), der Übersichtlichkeit wegen. Die Benutzer des Themes werden es dir danken!

Wenn ihr das Stylesheet eures Blogs optimiert habt: Schreibt eure Ergebnisse hier in die Kommentare!

4 Gedanken zu „CSS Optimizer: Stylesheets per Mausklick verkleinern“

  1. Hallo Simon,
    schau mal hier:
    http://floele.flyspray.org/csstidy//css_optimiser.php

    Der ist ohne Dame…

    Die Komprimierung kann in fünf Stufen gewählt werden. Zur Dekomprimierung empfehle ich: http://www.pspad.com/de/

    Somit kann man später auch wieder im Code schreiben ohne den Überblick zu verlieren.

    Allerdings solltest du dir bei CSS “shorthand” angewöhnen, das spart Zeit. Weiterhin blickst du dann auch weiter bei CSS durch.

    Ja, der Clean CSS ist mir auch bekannt, kam aber später ins Netz.

    Gruß Matthias

Schreibe einen Kommentar

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