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!

Ähnliche Artikel

4 Kommentare zu “CSS Optimizer: Stylesheets per Mausklick verkleinern”

  • Frank

    Alternative: CleanCSS hat kein dubioses Headerimage, dafür aber eine Option, um Kommentare beizubehalten. :)

  • Simon

    Danke für den Hinweis! Hab den Artikel ergänzt.

  • matthias

    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

  • Simon

    Danke für die Links.
    Ich weiß dank der CSS-Optimierer jetzt überhaupt erst, was “Shorthand” ist. Ziemlich praktisch und zeitsparend.

    Ich nutze den “ewigen” phase 5-Editor. Komme gut zurecht damit. http://www.phase5.info/


Schreibe einen Kommentar



© 2006-2014 1000ff  •  Kontakt  •  Impressum  •  RSS-Feed  •  Theme by Just Skins  •  Powered by Wordpress  •  Ein Projekt von Simon Stich