Startseite > Blog > Webseiten > Größe der CSS-Dateien minimieren

Größe der CSS-Dateien minimieren

Mich hatte es schon lange angenervt, dass die CSS-Dateien meines WordPress-Blogs mit YAML durch hilfreiche, aber auch umfangreiche Kommentare aufgebläht sind. Die Größe der Blog-Startseite betrug vor diesem Beitrag insgesamt 71005 Bytes und die CSS-Dateien hatte daran einen Anteil von 30389 Bytes. Die Ladezeit mit einem 56K-Modem, das entspricht fast ISDN-Geschwindigkeit, hätte 20,15 Sekunden betragen! Dabei sollte man nicht vergessen, dass auch heute noch nicht überall DSL verfügbar ist und immer noch viele Surfer nur mit Modem- oder ISDN-Geschwindigkeit im Web unterwegs sind.

Die Werte habe ich übrigens mit Hilfe des Geschwindigkeitsreports von www.websiteoptimization.com ermittelt. Die automatische Übermittlung der im Firefox geöffneten Website an diesen Dienst nehme ich über die Erweiterung Web Developer von Chris Pederick vor. Auf diese nützliche Firefox-Erweiterung hatte ich bereits in meinem letzten Blogbeitrag “Browsererweiterungen für Webdesigner” hingewiesen. Zudem habe ich auf meiner Webseite unter www.dieter-welzel.de/homepage-tools.php bereits lange auf diese nützliche Extension für den Firefox aufmerksam gemacht.

Dirk Jesse, der Autor des genialen und hervorragend dokumentierten CSS-Frameworks YAML, hat im Adventskalender 2007 der Webkrauts einen Beitrag zum Thema Stylesheets kommentieren mit CSSDOC beigesteuert. Interessant ist aus meiner Sicht auch die Diskussion mit den Lesern in den dazu erfolgten Kommentaren. Folgende Aussage von Dirk möchte ich dabei zitieren:

Natürlich wächst die Dateigröße. Ich empfehle daher bei größeren Projekten generell eine Unterscheidung zwischen einer Entwicklerfassung und optimierten Stylesheets für die Produktivumgebung. Mit Tools wie CSSTidy geht die Optimierung leicht von der Hand. Auf diese Weise lassen sich beide Wünsche – Kommentare und kleine Dateigröße im Live-Betrieb – bei geringfügigem Mehraufwand erreichen.

Ich habe erst mal meine im Einsatz befindlichen CSS-Dateien aus dem CSS-Framework YAML händisch um die Kommentare bereinigt. Die alten Dateien habe ich mir dabei zuvor auf meinem Rechner mit der Namensergänzung -doku gesichert. Auch wenn ich jetzt CSSTidy (Online-Version von CSSTidy) nicht einsetzte, werde ich dieses Tool auf jedem Fall noch genauer unter die Lupe nehmen.

Das Ergebnis konnte sich jedenfalls sehen lassen. So beträgt nun die Dateigröße insgesamt nur noch 53836 Bytes und die CSS-Dateien sind nun insgesamt lediglich 13567 Bytes groß. Die Ladegeschwindigkeit mit einem 56K-Modem hat sich zudem auf 16,53 Sekunden verkürzt.

Bei den Ergebnissen (CSS-Dateien um über die Hälfte “eingedampft” und Ladezeit der Blogseite merklich verkürzt) denke ich, dass sich der Aufwand von etwa einer Stunde gelohnt hat. Oder wie seht Ihr das?


Lesezeichen hinzufügen

Diese Icons verlinken auf Bookmark Dienste bei denen Nutzer neue Inhalte finden und mit anderen teilen können.
  • del.icio.us
  • Linkarena
  • MisterWong
  • Y!GG

Hinterlasse eine Antwort

Deine Mailadresse bleibt geheim. Pflichtfelder sind mit * gekennzeichnet.

Kommentare prüfe ich grundsätzlich vor einem Freischalten!
Ich bitte um Verständnis für diese Spamschutz-Maßnahme.

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Webseite veröffentlicht am Freitag, den 28. Dezember 2007, um 00:10 Uhr,
zuletzt geändert am Sonntag, den 30. Dezember 2012, um 23:28 Uhr.
Schlagworte: , , , , ,


Statistik: 72 Seiten, 346 Blogartikel, 1.068 Schlagworte, 1.288 Kommentare, 142 Feedleser.
© 2002 - 2014 | WordPress - Mein Layout basiert auf YAML und wird durch Xtreme One angetrieben.