Menü

HTTP-Requests So erhöhen Sie die Performance ihrer Website

Für die Performance von Websites ist es wichtig, die Anzahl an HTTP-Requests zu reduzieren. Speziell zur Verringerung der Anzahl an zu ladenden Bildern gibt es eine Reihe nützlicher Hilfsmittel. Wir zeigen Ihnen di ebesten Tipps.

So erhöhen Sie die Performance ihrer Website © Internet Magazin
So erhöhen Sie die Performance ihrer Website

Methode 1: CSS-Sprites

Eine der klassischsten Methoden zur Reduktion von HTTP-Requests für Bilder sind die CSS-Sprites. Eingesetzt werden Sprites typischerweise bei CSS-Hintergrundbildern: Statt mehrere Bilder einzeln abzuspeichern, werden die Bildern in einem größeren Bild zusammengefasst. Angezeigt wird dann jeweils nur ein Bildausschnitt und welcher genau, bestimmt die Eigenschaft background-position.

Sprites lassen sich unterschiedlich realisieren. Einen guten Weg wählt beispielsweise jQuery UI. Für die Icons der Benutzeroberfläche wird ein span-Element mit passenden Klassen reserviert.

<span class="ui-icon ui-icon-alert"> </span>

Tipp 1: Arbeiten Sie mit zwei Klassen

Die allgemeinen Formatierungen, die alle Icons betreffen, können über ui-icon zugewiesen werden, die besonderen Formatierungen für das Warn-Icon über die Klasse ui-icon-alert. Per CSS sind mehrere Dinge durchzuführen. Zuerst müssen Sie dem Element das Hintergrundbild zuweisen. Da nur ein Hintergrundbild eingesetzt wird, geschieht das für alle Icons über die Klasse ui-icon:

.ui-icon { background-image: url(icons.png); }

Tipp 2: Achten Sie auf den Bildausschnitt

Wichtig ist, dafür zu sorgen, dass der Bildausschnitt nicht zu groß ist, damit wirklich nur ein Icon und nicht mehr dargestellt ist. Ein einzelnes Icon hat bei jQuery UI eine Größe von 16 mal 16 Pixel:

.ui-icon { height: 16px; width: 16px; display: block; }

Wenn das Element aber ein Inline-Element ist - wie etwa span -, so haben Größenangaben keine Auswirkung. Deswegen muss das Element zu einem Blockelement gemacht werden, was display: block erledigt. Der passende Bildausschnitt wird über background-position ausgewählt. Da für jedes Icon ein anderes Bild angezeigt werden soll, geschieht diese Formatierung bei der individuellen Klasse ui-icon-alert:

.ui-icon-alert { background-position: 0 -144px; }

Bei den zwei Werten hinter background-position bestimmt der erste die Verschiebung von links, der zweite die von oben. Ein negativer Wert bedeutet hier eine Verschiebung in die entgegengesetzte Richtung. Zum Schluss fehlt noch die Positionierung des Icons zum Text. Das Icon soll vor einem Text angezeigt werden. Da es aber jetzt ein Blockelement ist - das war ja notwendig, um die Größe definieren zu können -, wird es oberhalb des Textes dargestellt. Eine Anordnung daneben gelingt über float, was bei jQuery UI über eine Inline-Stilangabe realisiert wird.

<span style="float: left; margin- right: .3em;" class="ui-icon ui-icon-alert"></span>

Alternativ zum Floating lässt sich das Element auch per display:inline-block anordnen und die Position über vertical-align: middle bestimmen - so macht es beispielsweise Yahoo bei seinen Icons.

Tipp 3: Icons haben unterschiedliche Funktionen

Bei Hinweisen kann ein Ausrufezeichen den Charakter der Hinweisbox verdeutlichen. An anderen Stellen kann ein Icon wiederum für die Navigation verwendet werden. So beim Datumsauswahlfeld von jQuery UI, bei dem Sie über kleine Dreiecke durch die Monate klicken können.

In diesem Fall ist es wichtig, dass ein Text zu sehen ist, falls das Icon nicht angezeigt wird, etwa weil Bilder deaktiviert sind. Diesen Text platzieren Sie am besten innerhalb des span-Elements:

<span class="ui-icon ui-icon-circle- triangle-e">Next</span>

Mit CSS müssen Sie dafür sorgen, dass dieser Text barrierefrei ausgeblendet wird. display: hidden, das von Screenreadern ausgelesen wird, wäre deswegen eine schlechte Wahl. Besser ist text-indent mit einem hohen negativen Wert, der den Text aus dem sichtbaren Bereich schiebt:

overflow: hidden; text-indent: -99999px;

Tipp 4: Verwenden Sie Sprite-Tools

Unabhängig von den Details der benutzten Technik ist die händische Erstellung von Sprites etwas mühsam. Glücklicherweise gibt es dafür hilfreiche Tools: Sehr praktisch ist beispielsweise Spritecow. Hier können Sie Ihr Sprite-Bild laden und dann - nachdem Sie die Hintergrundfarbe auf die Hintergrundfarbe des Bildes eingestellt haben - ein Einzelbild auswählen und Sie erhalten direkt Ausmaße und Position als CSS-Werte ausgelesen. Beachten Sie allerdings, dass das Tool einen neueren Browser voraussetzt, der die HTML5 File API und canvas versteht.

Trotz mehrerer Tools, die bei der Erstellung von Sprites helfen, bleibt die Wartung aufwändiger, das Austauschen eines einzelnen Icons geht nicht so einfach wie bei Einzelbildern. Außerdem gibt es Grenzen für die Größe der Dateien. So werden Dateien ab einer gewissen Größe in mobilen Geräten nicht mehr im Cache abgelegt. Das Team von YUI nennt hier den Wert von 1 MByte - wenn sich eine Datei dieser Grenze nähert, ist es besser, die Komponenten wieder auf mehrere Dateien aufzuteilen.

Methode 2: CSS3

Wesentlich weiter als die Einsparungen über CSS-Sprites, die nur die Zusammenfassung mehrerer Bilder zu erlauben, gehen die Möglichkeiten von CSS3: In vielen Fällen können Sie dekorative Grafiken komplett durch CSS3-Code ersetzen. Einsparmöglichkeiten ergeben sich besonders durch die Eigenschaften border-radius und box-shadow, durch die Definition von Farbverläufen und die Farbangabe über rgba().

Für eine flexible Box mit abgerundeten Ecken braucht man vier Bilder, die CSS3-Alternative besteht aus ein paar Zeilen Code. Durch die folgenden Angaben werden alle Ecken mit einem Radius von 10 Pixeln abgerundet:

.abgerundet { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }

Tipp 1: Achten Sie auf die Browser-Kompatibilität

Die Variante mit -webkit- und -moz- wird für ältere Safari-Browser vor Version 5 beziehungsweise Mozilla-Browser wie Firefox vor Version 4 benötigt. Auch für schön verlaufende Schatten hat man früher gerne zu Hintergrundbildern gegriffen - je nach Variante konnten dafür auch mehrere Bilder benötigt werden. In CSS3 erledigen das wieder ein paar Zeilen Code:

.schattig { -moz-box-shadow: 10px 20px 15px #333; -webkit-box-shadow: 10px 20px 15px #333; box-shadow: 10px 20px 15px #333; }

Dadurch wird ein grauer Schatten definiert, der um 10 Pixel von links und um 20 Pixel von oben verschoben ist. Als Grad der Verschwommenheit sind 15 Pixel gewählt.

Die Einsparung der CSS3-Variante betrifft nicht nur die Performance, sie kann zusätzlich in Hinblick auf Flexibilität und Wartungsfreundlichkeit punkten. Ein Nachteil ist allerdings, dass Benutzer von IE 8 und älter außen vorbleiben. Nachbessern lässt sich über CSS3 PIE, allerdings bedeutet das dann für diese Browser einen zusätzlichen HTTP-Request.

Prinzipiell genauso wie box-shadow funktioniert text-shadow für die Definition von Textschatten, allerdings können Sie hier auf die Angaben mit den herstellerspezifischen Präfixen verzichten.

Tipp 2: Farbverläufe schonen die Performance

Ein weiteres Einsparpotenzial ergibt sich bei Farbverläufen. Diese werden vielerorts im Design eingesetzt, als Hintergrundbilder für die gesamte Website ergeben sie eine größere Tiefe, bei Tabs und Buttons sorgen sie für eine ansprechende Dreidimensionalität. Mit CSS3 funktioniert das Ganze ohne Bilder - im Folgenden wird ein linearer Farbverlauf von oben nach unten definiert, der von Weiß nach Blau verläuft.

background-image: -ms-linear-gradient (white, blue); /* IE ab 10 */ background-image: -moz-linear- gradient(white, blue); /* FF */ background-image: -o-linear-gradient (white, blue); /* Opera ab 11.10 */ background-image: -webkit-gradient (linear, center top, center bottom, from(white), to(blue)); /* Aeltere Safari */ background-image: -webkit-linear- gradient(white, blue); /* Chrome ab 10, Safari ab 5.1 */ background-image: linear-gradient (white, blue); /* Standardsyntax */

Tipp 3: Bessern Die für ältere IE über Filter nach

filter: progid:DXImageTransform.Micro soft.gradient(startColorStr='white', EndColorStr='blue'); /* IE6-IE9 */

Den Code in all den für die einzelnen Browser benötigten Varianten zu schreiben, ist aufwändig. Einfacher geht das mit dem Gradient Generator von Colorzilla. Eine weitere Einsparung ergibt sich, wenn Sie Halbtransparenzen über rgba() realisieren und auf die halbtransparenten PNG-Hintergrundbilder verzichten.

background: rgba(255, 0, 0, 0.5); /* halbtransparentes Rot */

Tipp 4: Nutzen Sie Data URLs

Mit Data URLs können Sie kleinere Bilder kodiert direkt in eine Website integrieren. Das funktioniert für im HTML-Code per img eingebettete Bilder. Hierfür müssen Sie hinter src zuerst den MIME-Typ - im Beispiel data:image/gif - angeben, danach base64. Dann folgt das kodierte Bild, eine Folge von Buchstaben und Zahlen, die im folgenden Beispiel gekürzt ist.

<img width="19" height="19" alt="Stern" src="data:image/gif;base64,R0lGODlhEwATALMAAP" />

Data URLs lassen sich in gleicher Weise auch per CSS nutzen:

background-image: url(data:image/gif; base64,R0lGODlhEwATALMAAP);

Auch hier wurde der Code gekürzt. Kodierte Bilder brauchen ein Drittel mehr Speicherplatz als in der unkodierten Variante. Dieses Problem erledigt sich, wenn der Server die Seiten GZIP-komprimiert ausliefert, dann ist der Größenzuwachs minimal. Die Konvertierung können Sie durch ein Tool durchführen. Alternativ dazu lässt sich das Bild mit PHP konvertieren. Dafür benötigen Sie die Funktion base64_encode(), der Sie über file_get_contents() das zu konvertierende Bild übergeben:

<?php echo base64_encode(file_get_ contents("stern.gif")); ?>">

Dann können Sie sich den erzeugten Code ausgeben lassen, kopieren und in Ihre Website einfügen. Oder Sie schreiben die Ausgabe von PHP an die betreffende Stelle:

<img src="data:image/gif;base64,<?php echo base64_encode(file_get_contents("stern.gif")); ?>">

Data URLs funktionieren im IE ab Version 8, für ältere Versionen könnte man sich über MHTML behelfen. Beachten sollten Sie bei Data URLs, dass Bilder, die auf diese Art in die HTML/CSS-Datei integriert sind, nicht separat von dieser im Cache abgelegt werden können.

Methode 3: Inline-SVG

Eine weitere Möglichkeit der Einsparung von externen Bildern ist Inline-SVG. Den Code für skalierbare Vektorgrafiken können Sie direkt in XHTML-Dateien einbinden, sofern das Dokument als XHTML ausgeliefert wird. Einfacher und zeitgemäßer ist allerdings die Einbindung in HTML5. Dafür benötigen Sie zuerst ein Dokument mit dem HTML-Doctype:

<!DOCTYPE html>

Innerhalb des body-Elements können Sie direkt das SVG-Element einfügen. Im Beispiel werden ein blauer und ein grüner Kreis gezeichnet, die beide halbtransparent sind. Sie überschneiden sich und auf ihnen erscheint der Text "Inline-SVG".

<svg width="230" height="180"> <circle cx="90" cy="90" r="90" fill- opacity=".5" fill="blue"/> <circle cx="140" cy="90" r="90" fill- opacity=".5" fill="green" /> <text x="40" y="100" fill="black" style="font-weight: bold; font-size: 200%">Inline-SVG</text> </svg>

Dabei stehen alle Mittel zur Verfügung, die SVG bietet. Ein großer Vorteil ist, dass die Grafiken an sich skalierbar sind, sich also der Bildschirmgröße anpassen.

Tipp 1: Machen Sie sich schon jetzt mit Inline.SVG vertraut

Das ist ein noch relativ neues Feature, deswegen ist die Browserunterstützung derzeit etwas mager: Der IE kann es ab Version 9, Firefox ab 4, Safari ab 5.1, Chrome ab 7 und Opera ab 11.6. Die Möglichkeiten sind vielfältig - von Farbverläufen über Filter, Masken und Scriptingmöglichkeiten. In nächster Zeit wird diese Technik sicherlich an Bedeutung gewinnen.

Tipp 2: Canvas-Elemente erzeugen

Apropos HTML5 - dieses bietet mit dem canvas-Element ganz neue Techniken, um Grafiken in Dateien einzubetten - indem man etwa über ein Inline-Script-Element die canvas-Grafik erzeugt. Die Möglichkeiten von canvas gehen aber über die von klassischen Bildern weit hinaus, weil sie clientseitig skriptgesteuert erstellt werden und sich auch animieren lassen.

Technik Geeignet für Einsparpotenzial Browserunterstützung Anmerkung
Sprites Hintergrundbilder und mehr nach oben offen keine Einschränkungen Achtung bei zu großen Bildern, da es Cache-Beschränkungen in mobilen Browsern gibt
Data URLs kleinere Bilder und Icons pro DataURL ein Bild alle modernen Browser, IE ab 8; für IE 8 dürfen Bilder nicht größer als 32 KByte sein zu beachten: 1.: kein Caching von Bildern 2.: Bilder sind 1/3 größer als ursprünglich, Abhilfe durch serverseitige GZIP-Komprimierung
CSS3 border-radius ersetzt dekorative Hintergrundbilder bis zu 4 Bilder alle modernen Browser, IE ab 9 Nachbesserung möglich für IE <9 über CSS3 PIE
CSS3 box-shadow ersetzt dekorative Hintergrundbilder 1 Bild oder mehr alle modernen Browser, IE ab 9 Nachbesserung möglich für IE <9 über CSS3 PIE
CSS3 text-shadow ersetzt Schriftgrafiken 1 Bild alle modernen Browser, IE ab 10 -
CSS3 Farbverläufe ersetzt dekorative Hintergrundbilder 1 Bild alle modernen Browser, IE ab 10 Nachbesserung möglich über Filter
CSS3-Farbangabe rgba() ersetzt halbtransparentes PNG-Bild 1 Bild alle modernen Browser, IE ab 9 Nachbesserung möglich über Filter
Inline-SVG mit HTML5 Grafiken und Animationen 1 Bild früheste Versionen: IE 9, Opera 11.6, FF 4, Safari 5.1, Chrome 7 skalierbare Grafiken, die sich verlustfrei an unterschiedliche Größen anpassen; weitreichendere Möglichkeiten als mit klassischen Bildern
Canvas Grafiken und Animationen 1 Bild alle modernen Browser, IE ab 9 weitreichendere Möglichkeiten als mit klassischen Bildern
ganze Tabelle anzeigen

 
Anzeige
Anzeige
x