Bernhard Häussner

Weniger Traffic durch JS, PNG und CSS optimierung

01.02.2009, 18:46
Web Compression

Web Compression

Wie erreiche ich schnellere Ladezeiten für meine Webseiten ohne ein riesiges Rechenzentrum anzumieten? Man kann mit einigen Details schon unglaublich viel sparen, denn schon kleine Veränderungen an häufig angeforderten Dateien machen viel aus. Das Aktivieren von gzip, das Komprimieren von HTML, CSS und Javascript, die Optimierung von PNG-Bildern und das Verwenden von CSS-Sprites und CDNs.

CSS-Sprites

Anstatt jedes Icon und jedes Hintergrundbildchen in einer eigenen Datei zu laden, werden alle in ein Bild gepackt. Da die meisten Besucher ohnehin einen Breitbandanschluss haben, machen für sie wenige KB Dateigrößen-Unterschied kaum etwas aus. Doch viele Requests brauchen bei jeder Verbindung viel Zeit. Für jedes Bild, dass man mit einem anderen Kombinieren kann, spart man ein Request.

Damit man nicht viele Container-Elemente ins HTML einbauen muss, lohnt es sich die Bilder geschickt zu kombinieren. Ich habe so auf meiner Homepage das Markup kein bisschen verändert, als ich vor kurzem CSS-Sprites implementiert habe. Um die Bilder zu packen, setzt man z.B. solche Muster und Verläufe, die horizontal wiederholt werden, zusammen untereinander in ein Bild und solche, die vertikal wiederholt werden, nebeneinander in ein anderes. Buttons und Ähnliches, was ohne Wiederholung gerendert wird, kann man entweder in ein einzelnes Bild geben oder sie in eines der beiden anderen einbauen.

Auf dieser Seite habe ich z.B. die kleinen Icons ganz rechts in die Kombinierte Graphik gestellt, damit links davon noch ein Bild mit fester Größe Platz findet. Außerdem sind unter dem Sprechblasen-Icon für Kommentare nur transparente Pixel, sodass in längeren Kommentaren keine anderen Hintergrundbilder auftauchen. Der Webseitenhintergrund ist gesondert als JPEG abgespeichert, da er keine Transparenz benötigt und so viel kleiner ist.

Komprimieren von Javascript, CSS und HTML

Das Komprimieren der eigentlichen Webseite ist auch nicht schwer. Da die Webseite sowieso dynamisch erstellt wird, lasse ich einfach sämtlichen zusätzlichen Whitespace im HTML weg. In den Templates bleibt alles schön übersichtlich, aber was gesendet wird, ist rund 10% kleiner.

Deutlich interessanter wird das ganze bei Javascript: Da Javascripts meistens statisch sind, habe ich mit ein einfaches Shell-Script geschrieben, welches alle Javascript-Dateien in eine Datei zusammenhängt um Reqests zu sparen und mit JSMin den Whitespace und Kommentare entfernt. So wird bei mir aus 19 kommentierten und nach Zweck getrennten Dateien mit rund 90 KB eine einzige mit 56 KB, also mit 30% Einsparung eine effektive Methode. Am einfachsten lässt es sich natürlich sparen, wenn man auf einiges an Javascript verzichtet.

#!/bin/sh
# Sammle alle js
for file in js/*; do
 cat "$file" >> javascript.js
 echo >> javascript.js # Leerzeile zwischen Scripts
done
./jsmin <javascript.js >>javascript.min.nocp.js # komprimieren
cat jslicences.txt javascript.min.nocp.js > javascript.min.js # Lizenzen hinzufügen
rm javascript.min.nocp.js

Beim CSS gilt ähnliches: Man kann alles in eine Datei packen und Whitespaces entfernen, jedoch habe ich keine automatische Komprimierung gefunden. Was man auf diversen Webseiten findet, spart normalerweise 10-20%.

PNG-Optimierung

Mit verlustfreier Komprimierung und trotzdem großer Farbpalette hat das PNG-Format Vorteile, wenn es um Icons und Graphiken geht. Doch aus der verlustfreien Komprimierung lässt sich noch mehr heraus kitzeln, indem man brute-force-mäßig die besten Kompressionsparameter verwendet. Das macht z.B. das einfach zu bedienende optipng und spart damit auch nochmal bis zu 15%.

CDN

Ein Content Delivery Network wird eher für besondere Seiten rentabel: Für Seiten mit viel statischem Content, also Bildern oder Videos. So entlastet man nicht nur den eigenen Server mit dem dynamischen Inhalt, sondern verteilt den Content über den ganzen Globus, sodass er dann nicht mehr so weit verschickt werden muss.

Für alle Seiten, die jQuery verwenden, ist es möglich sich dieses von Googles CDN hosten zu lassen. Dazu verwendet man einfach statt der URL der Javascript-Datei auf dem eigenen Server folgende: http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js und schon spart man sich wieder einige KB pro Seitenaufruf. Und auch die User sparen sich diese meistens. Da nämlich inzwischen sehr viele Seiten jQuery bei Google hosten, haben die meisten Surfer diese Datei schon im Cache des Browsers, müssen sie also nicht mehr herunterladen.

Kurze URL http://1-co.de/b/i. Post to twitter

Kommentare

Julian Schrader meint: (#162)
04.02.2009, 23:06

Ich setze für Downloads u.ä. mittlerweile teilweise Amazons CloudFront ein — ein CDN auf der Basis des S3 Services.

Bei Projekten deren Server nicht im „Zielgebiet“ sondern beispielsweise in Übersee stehen oder auch internationalen Projekten ist das sehr praktisch — schnellere Responsezeiten und Downloads durch die weltweit angesiedelten Amazon-Rechenzentren sind die Folge, und bezahlbar bleibt das Ganze durch eine sehr günstige und transparente Preisstruktur auch. :-)

Bernhard H. meint: (#163)
05.02.2009, 00:44

Ah, genau, danke, das hat noch gefehlt...

Horst meint: (#220)
25.02.2010, 15:41

Ich bin jetzt von amazon zu www.easycdn.net gewechselt und muss sagen ein super CDN mit einem super Support (Deutsche APs)






 
Χρόνογραφ
© 2008-2017 by Bernhard Häussner - Impressum - Login
Kurz-Link zu dieser Seite: http://1-co.de/b/i