CSS Komprimierungs tool

Beitrag von **axelm** » 29.09.2008, 17:17

Hi,

ich habe mal ein Cascading Style Sheet (CSS) Komprimierungstool aufgesetzt, wo man seine CSS Datei angeben kann und man angezeigt bekommt wieviel Prozent man sparen könnte wenn man den CSS Code einrücken würde:

https://www.csscruncher.com/de/

Eure Meinung dazu?

von **Anzeige von ABAKUS** »

Hochwertiger Linkaufbau bei ABAKUS:

Google-konformer Linkaufbau
nachhaltiges Ranking
Linkbuilding Angebote zu fairen Preisen
internationale Backlinks

Wir bieten Beratung und Umsetzung.
Jetzt anfragen: 0511 / 300325-0

Beitrag von **TBT** » 29.09.2008, 17:29

Die angegebene URL konnte nicht geladen werden, Bitte versuch es erneut!

dein Tool ohne User-Agenten unterwegs?

Beitrag von **axelm** » 29.09.2008, 17:37

Welche URL denn?
Man muß schon seine CSS URL und nicht die URL der Domain angeben

von **Anzeige von ABAKUS** »

Beitrag von **TBT** » 29.09.2008, 17:46

Habe ich gemacht, aber Zugriffe OHNE Useragenten werden geblockt!
Daher sollte dein Tool einen User-Agenten senden, da es sonst auf einigen Domains
nicht funktionieren wird.

Beitrag von **Loptr** » 29.09.2008, 18:54

schickes tool!
ABER
wenn ich meinen Quelltext so komprimiere, blicke ich bei etwaigen Veränderungen gar nicht mehr durch

Dann doch lieber die 3kb CSS File, die selbst ein 56k Benutzer schnell laden kann

Beitrag von **axelm** » 29.09.2008, 19:29

naja kann man so oder so sehen.
kannst dich ja auch an den Komprimierten bzw. Shorthand code gewöhnen. bzw. 2k hier noch 3 k für ein bild da etc. da summiert sich alles.

Beitrag von **Mork vom Ork** » 29.09.2008, 20:55

axelm hat geschrieben:man angezeigt bekommt wieviel Prozent man sparen könnte wenn man den CSS-Code einrücken würde:

Eure Meinung dazu?

Anstatt die 28,35% zu entfernen, die meinen Code übersichtlich machen, nutze ich lieber gzip, komprimiere um 78% und finde mich auch zukünftig sofort in meinem CSS-Aufbau zurecht.
Das, was du da „einsparst“, geht doppelt und dreifach mit längerer Arbeitszeit wieder drauf. Insofern: Unsinnig. Vielleicht solltest du statt „CSSCruncher.com hat dir 28,35% Code erspart!“ lieber „CSSCruncher.com raubt dir in Zukunft 28,35% mehr Zeit!“ drüberschreiben …

Beitrag von **Andreas I.** » 30.09.2008, 06:18

Naja, so wie jetzt ist es noch nicht der Hit: Einfach nur Whitespaces reduzieren.
Aber wenn das Teil eines Tages mal den CSS-Code so optimiert, dass auch alle CSS-Klassen in die Optimierung mit einbezogen werden, ist es sicher ein Tool, das ich nutzen werde. Also nicht nur lokale Code-Optimierung wie du es in deiner FAQ voschlägt: "padding:0px 10px 0px 10px" in "padding:0 10px", sondern global über das ganze Projekt betrachtet - auch unter Berücksichtigung des HTML-Codes.

Das ist aber nichts, was ich selber gerne programmieren würde: Sehr viel Aufwand für vergleichsweise wenig Nutzwert.
Ich sag mal: Das ist evtl ein gutes Thema für eine Studienarbeit oder wie immer das heute in der Uni heißt.

Beitrag von **axelm** » 30.09.2008, 06:45

Jo, schauen wir mal was wir davon implementiert bekommen erstmal soll mehr CSS Shorthand rein.

Ist halt für die, die selten an den CSS Code müssen bzw. für Agenturen die keinen Server mit mod gzip haben...

Beitrag von **Loptr** » 30.09.2008, 07:35

Andreas I. hat geschrieben:"padding:0px 10px 0px 10px" in "padding:0 10px",

UHA! das wär wirklich der Hammer. und dann noch font und background zusammen fassen. Ich glaub, das könnte mir auch gefallen

Beitrag von **Mork vom Ork** » 30.09.2008, 09:10

axelm hat geschrieben:die keinen Server mit mod gzip haben...

mod_gzip und damit Apache 1 ist eh von vorvorgestern, und [url=file:///D:/http/apache2/manual/mod/mod_deflate.html]mod_deflate[/url] gehört zum Lieferumfang von Apache 2; andere Webserver sind ebenfalls von Haus aus in der Lage, HTTP-Komprimierung umzusetzen.
Möglicherweise sorgt der Server/Browser-Automatismus also bereits dafür, dass eine ganze Menge Leute überhaupt nicht wissen, dass die x KByte, die sich per FTP durch die Leitung zum Server gequält haben, per HTTP übertragen wegen der eingebauten Komprimierung nur einen Bruchteil benötigen.

Und selbst wer keines von beidem hat, kann sich mit gzip (oder Packern wie 7zip) und einer einzigen Zeile in der .htaccess helfen: „Options +multiviews“ in die betreffende .htaccess eintragen und zukünftig das unkomprimierte Original unter bla.css.css speichern sowie die komprimierte Kopie davon unter bla.css.gz. Mehr braucht es nicht, Aufruf wie gehabt über die URL basis.css, den Rest handeln Server und Browser von alleine aus.

Natürlich kann man die Sachen erst bei dir stauchen und dann noch obendrein gzip-komprimieren, aber das grenzt ja an eine Paranoia :>

Beitrag von **axelm** » 30.09.2008, 09:24

Man, warst noch nie in einer Agentur? Die schauen dich bei dem Wort htaccess erstmal krum an und dann brauchen die Wochen um 2 Zeilen in ne datei zu schreiben...

Beitrag von **axelm** » 30.09.2008, 14:32

TBT hat geschrieben:dein Tool ohne User-Agenten unterwegs?

Wir haben jetzt einen User Agent nachgetragen.
Man kann jetzt auch die URL angeben und das Tool versucht aus dem Code die erste CSS Datei zu fischen und zu optimieren.

Beitrag von **Andreas I.** » 30.09.2008, 18:58

Wenn man so eine CSS-Datei nicht nur whitespacereduzierend und lokal optimiert (Einfach nur ersetzen von z.B. "padding:0px 10px 0px 10px" durch "padding:0 10px"), sondern global optimiert, dann könnte man evtl. die eine oder andere Webseite und Ajax-Anwendung einen Tick beschleunigen:

Schauen:
- Welches Resultat liefert mir eigentlich die CSS-Datei?
- Kann ich das gleiche Resultat auch einfacher erreichen?
- Kann man CSS-Klassen evtl. so gestalten, dass sie aufeinander aufbauen anstatt für jede Klasse eine Neudefinition zu schreiben?
- ...

Machen Browser eigentlich von Haus aus solche Optimierungen, wenn sie eine CSS-Datei einlesen? Wenn Browser solche Optimierungen schon von selber machen, wäre das Projekt nicht so nützlich. Wenn nicht, dann wäre das Projekt eine wichtige Sache...

Beitrag von **Thorny** » 06.10.2008, 09:04

Das töten von Whitespaces kann man machen, wenn man viele Anfragen hat. Vorher ist denken einfacher:
Original:

Code: Alles auswählen

.test &#123;padding&#58;0px 0px 0px 10px&#125;

Cruncer:

Code: Alles auswählen

.test&#123;padding&#58;0px 0px 0px 10px&#125;

Ich:

Code: Alles auswählen

.test&#123;padding-left&#58;10px&#125;

Ersparnis Cruncher: 3,13%
Ersparnis Mensch: 25%

Abgesehen davon ist selbst diese Optimierung weit vom Optimum entfernt. Das läßt sich nur durch eine Optimierung der Klassen untereinander erreichen - dann fängt es an haarig zu werden.