Keyser Soze's Blog
"Meine Stadt, mein Ghetto, mein Blog"
"Meine Stadt, mein Ghetto, mein Blog"
Und wieder ein bisschen Traffic gespart...
Posted 05.01.2008 at 17:34 by Keyser Soze
Heute habe ich mal wieder eine sehr interessante Möglichkeit entdeckt, den Traffic weiter zu senken, der mit diesem Forum und der dazugehörigen Themes-Seite entsteht.
Und zwar geht es darum, die Stylesheet-Dateien (.css) und Javascript-Dateien (.js) zu komprimieren, die im Header jeder Seite stehen.
CSS Komprimierung
Die Größe von CSS-Dateien mit Stylesheet-Definitionen kann man sehr einfach dadurch verringern, indem man alle Kommentare, Leerzeichen und Zeilenumbrüche entfernt, Farbdefinitionen in Hexadezimalschreibweise abkürzt, identische Definitionen zusammenfast und vieles mehr.
Glücklicherweise gibt es hierfür ein sehr praktisches Online-Tool namens Icey CSS Compressor, das einem diese Arbeit abnimmt und die Stylesheet-Datei mit nur einem Klick optimiert. Dabei sind Verringerungen der Dateigröße von mehr als 50% möglich.
Der Besucher merkt von dieser Maßnahme überhaupt nichts (solange er sich den Quelltext nicht anschaut) und freut sich über eine doppelt so schnelle Ladezeit.
Natürlich werden CSS-Dateien im Browser in einem Cache abgelegt, aber irgendwann muss jeder Besucher dies CSS-Dateien mindestens 1x abrufen (beim ersten Besuch und wenn sie nicht mehr im Cache enthalten sind). Und gerade beim ersten Abruf einer Seite ist es wichtig, einen neuen Besucher nicht all zu lange warten zu lassen.
Javascript Komprimierung
Das gleiche wie mit den CSS-Dateien kann man auch mit Javascript-Dateien (.js) machen, von denen es seit dem Aufkommen von immer mehr AJAX-Funktionen in Web-Anwendungen nur so wimmelt und deren Dateigröße immer mehr zunimmt.
Auch hierfür gibt es unter http://javascriptcompressor.com/ ein praktisches Online-Tool, das einem die komplette Kompression abnimmt und mit einem einzigen Klick funktioniert. Hier werden nicht nur Leerzeichen entfernt, sondern noch weitere Tricks angewendet, um die Dateigröße zu verringern.
Jetzt mag sich der eine oder andere Leser fragen, was dieser ganze Aufwand denn bringt. Als Nachteil hat man sicherlich, dass man die CSS- und Javascript-Dateien bei jeder Änderung vor dem Upload auf den Webserver neu durch eines der beiden Online-Tools jagen muss.
Der Vorteil liegt aber sowohl für den Webmaster, als auch für die Besucher auf der Hand: schnellere Seiten-Ladezeiten und weniger Traffic-Verbrauch:
Ich konnte beispielsweise auf der Themes-Seite die Dateigröße aller benutzten CSS- und Javascript-Dateien von 80KB auf nur noch 41KB senken, also eine Reduktion um knapp 40KB bzw. 50%.
Im Forum sieht die Rechnung auf Grund der noch stärkeren Verwendung von Javascript noch besser aus. Hier kann das Datenvolumen der CSS und JS-Dateien von ca. 150KB auf nur noch 60KB reduziert werden.
Fazit
90KB weniger Daten bei einem Seitenaufruf zu übertragen (und insbesondere beim ersten Besuch eines neuen Besuchers) ist schon eine ganze Menge, wenn man bedenkt, dass die eigentliche HTML-Webseite (ohne CSS, Javascript und Bilder) weniger als 90KB groß ist.
Und wenn man als Webmaster in anderen Dimensionen denkt und es nicht nur um einen Seitenaufruf, sondern um Millionen Seitenaufrufe pro Monat geht, sieht die Rechnung noch mal anders aus:
Natürlich werden die Javascript- und CSS-Dateien nicht bei jedem Seitenaufruf geladen, sondern nur wenn die Datei nicht im Browser-Cache vorhanden ist (also mindestens für jeden Besucher 1x). Der oben genannte Wert ist aber für modopo.com realistisch, wenn man diese Tatsache bereits eingerechnet hat.
Das bedeutet also für mich als Fazit: Es werden ab sofort jeden Monat ~85 Gigabyte weniger Daten sinnlos durch das Internet gejagt und es gibt weniger "World Wide Wait".
Ich hoffe, dass diese Tipps dem einen oder anderen Webmaster weiterhelfen können, der auch nach Wegen sucht, wie er das Datenübertragungsvolumen seines Webservers verringern kann.
Und zwar geht es darum, die Stylesheet-Dateien (.css) und Javascript-Dateien (.js) zu komprimieren, die im Header jeder Seite stehen.
CSS Komprimierung
Die Größe von CSS-Dateien mit Stylesheet-Definitionen kann man sehr einfach dadurch verringern, indem man alle Kommentare, Leerzeichen und Zeilenumbrüche entfernt, Farbdefinitionen in Hexadezimalschreibweise abkürzt, identische Definitionen zusammenfast und vieles mehr.
Glücklicherweise gibt es hierfür ein sehr praktisches Online-Tool namens Icey CSS Compressor, das einem diese Arbeit abnimmt und die Stylesheet-Datei mit nur einem Klick optimiert. Dabei sind Verringerungen der Dateigröße von mehr als 50% möglich.
Der Besucher merkt von dieser Maßnahme überhaupt nichts (solange er sich den Quelltext nicht anschaut) und freut sich über eine doppelt so schnelle Ladezeit.
Natürlich werden CSS-Dateien im Browser in einem Cache abgelegt, aber irgendwann muss jeder Besucher dies CSS-Dateien mindestens 1x abrufen (beim ersten Besuch und wenn sie nicht mehr im Cache enthalten sind). Und gerade beim ersten Abruf einer Seite ist es wichtig, einen neuen Besucher nicht all zu lange warten zu lassen.
Javascript Komprimierung
Das gleiche wie mit den CSS-Dateien kann man auch mit Javascript-Dateien (.js) machen, von denen es seit dem Aufkommen von immer mehr AJAX-Funktionen in Web-Anwendungen nur so wimmelt und deren Dateigröße immer mehr zunimmt.
Auch hierfür gibt es unter http://javascriptcompressor.com/ ein praktisches Online-Tool, das einem die komplette Kompression abnimmt und mit einem einzigen Klick funktioniert. Hier werden nicht nur Leerzeichen entfernt, sondern noch weitere Tricks angewendet, um die Dateigröße zu verringern.
Jetzt mag sich der eine oder andere Leser fragen, was dieser ganze Aufwand denn bringt. Als Nachteil hat man sicherlich, dass man die CSS- und Javascript-Dateien bei jeder Änderung vor dem Upload auf den Webserver neu durch eines der beiden Online-Tools jagen muss.
Der Vorteil liegt aber sowohl für den Webmaster, als auch für die Besucher auf der Hand: schnellere Seiten-Ladezeiten und weniger Traffic-Verbrauch:
Ich konnte beispielsweise auf der Themes-Seite die Dateigröße aller benutzten CSS- und Javascript-Dateien von 80KB auf nur noch 41KB senken, also eine Reduktion um knapp 40KB bzw. 50%.
Im Forum sieht die Rechnung auf Grund der noch stärkeren Verwendung von Javascript noch besser aus. Hier kann das Datenvolumen der CSS und JS-Dateien von ca. 150KB auf nur noch 60KB reduziert werden.
Fazit
90KB weniger Daten bei einem Seitenaufruf zu übertragen (und insbesondere beim ersten Besuch eines neuen Besuchers) ist schon eine ganze Menge, wenn man bedenkt, dass die eigentliche HTML-Webseite (ohne CSS, Javascript und Bilder) weniger als 90KB groß ist.
Und wenn man als Webmaster in anderen Dimensionen denkt und es nicht nur um einen Seitenaufruf, sondern um Millionen Seitenaufrufe pro Monat geht, sieht die Rechnung noch mal anders aus:
Quote:
90KB * 1.000.000 Seitenaufrufe = 85 GB Ersparnis pro Monat
Das bedeutet also für mich als Fazit: Es werden ab sofort jeden Monat ~85 Gigabyte weniger Daten sinnlos durch das Internet gejagt und es gibt weniger "World Wide Wait".
Ich hoffe, dass diese Tipps dem einen oder anderen Webmaster weiterhelfen können, der auch nach Wegen sucht, wie er das Datenübertragungsvolumen seines Webservers verringern kann.
Total Comments 0
Comments
Total Trackbacks 0
Trackbacks
Recent Blog Entries by Keyser Soze
- Schlecht geklont (21.07.2008)
- Facebook verwendet Nutzerdaten für AdWords-Anzeigen (21.04.2008)
- Und wieder ein bisschen Traffic gespart... (05.01.2008)
- Plus ist Minus und Rot ist Blau (19.10.2007)
- Abmahnr - bequem online abmahnen (18.09.2007)




