Ladezeiten verkürzen
Reduzierung von HTTP-Requests
- Mehr Speed für Ihre Site
- Kompression
- Reduzierung von HTTP-Requests
- Caching
Mit nahezu der Hälfte an Zeichen wird so dasselbe ausgedrückt. Wer seine CSS-Definitionen so aufbaut, der kann eine Menge an Daten einsparen, die nicht an den Browser übertragen werden müssen. Minifier für Javascript und CSS gibt es mittlerweile viele. Die Entwickler dieser Tools überbieten sich regelmäßig mit neuen Ideen und verbesserten Algorithmen.Die Verkleinerung von Javascript und CSS durch Minifier lohnt sich auch in Fällen, in denen bereits zur Komprimierung per GZIP komprimiert wurde. Sie sollten nicht darauf verzichten. Wenn Ihnen der Aufwand zu hoch ist, die Skripte selbst über die verschiedenen Tools zu verkleinern, dann greifen Sie zumindest zu den meist vorhandenen komprimierten Versionen der populären Javascript-Bibliotheken wie jQuery, ExtJS, mootools oder anderen.Natürlich ist auch klar, dass es während des Entwicklungszeitraumes keinen Sinn macht, mit verkleinerten Javascript-Dateien zu arbeiten. Hier ist es wichtig, dass die Dateien sauber formatiert sind und Variablen sprechende Namen besitzen. Daher sollte ein Minifier erst dann zum Einsatz kommen, wenn die Version für das Live-System erstellt wird.
Reduzierung von HTTP-Requests
Jede Anfrage an den Server dauert eine gewisse Zeit. Je nach Netzgeschwindigkeit und Serverauslastung muss der Browser mehr oder weniger lange warten, bis das Ergebnis vom Server geliefert wird. Jeder Zugriff liefert zudem nicht nur die eigentlichen Daten sondern auch alle Informationen, die zur Kommunikation mittels HTTP benötigt werden (beispielsweise Header-Informationen).
Dadurch erhöht sich die Datenmenge im Vergleich zu einer einzigen Anfrage an den Server. Generell gilt: je weniger Anfragen an den Server, desto besser und schneller ist die Ladezeit einer Seite. Auch hier gibt es viele Ansatzpunkte, wie dies erreicht werden kann. Allen gemeinsam ist, dass versucht wird, Daten in gemeinsamen Dateien zusammenzufassen. Bereits nach kurzem Nachdenken fallen hier wieder die üblichen Verdächtigen Javascript und CSS ein.Da beide vom Browser gecached werden macht es immer Sinn, diese zusammen zu fassen. Javascript-Frameworks für Web 2.0-Seiten bestehen oft aus vielen Einzeldateien. Diese lassen sich problemlos zu einem File zusammenfassen. Auch hier gilt wieder dasselbe für CSS. Fassen Sie die verschiedenen CSS-Dateien zu gemeinsamen Files zusammen.Auch bei dieser Zusammenfassung ist ein wenig Augenmaß gefordert. Selbstverständlich macht es nicht immer Sinn, alle Javascript-Dateien zu einem großen Monster zusammenzufassen. Nicht auf allen Seiten wird der gleiche Funktionsumfang benötigt. Fassen Sie Teile zusammen, die sie gemeinsam auf verschiedenen Seiten benötigen. Allein dadurch gewinnen Sie bereits deutlich an Performance. Moderne Seiten erzeugen eine Vielzahl an Serveranfragen. Dies lässt sich auch durch die genannten Mittel nicht vollständig eindämmen. Ziel muss hier sein, die Anzahl der Requests so weit wie möglich zu beschränken.
Was für Textdaten wie Javascript oder CSS gilt, kann auch auf Bilder angewendet werden. Jede Grafik, die auf einer Seite Verwendung findet, wird durch den Browser durch eine separate Serveranfrage geladen. Auf grafiklastigen Seiten kommen viele kleine Icons zum Einsatz. Diese lassen sich zu einer Datei zusammenfassen und per CSS weiterverarbeiten.Das Ergebnis nennt sich CSS-Sprite. Ein CSS-Sprite ist eine Grafik- Datei, in der alle Icons wie in einer Tabelle angeordnet gespeichert werden. Natürlich lassen sich diese Grafiken nicht mehr direkt mit einem Image-Tag anzeigen, da sonst die Gesamtgrafik angezeigt werden würde. Hier hilft CSS, um den korrekten Bildausschnitt aus der Gesamtgrafik anzuzeigen. Der folgende Beispielquellcode zeigt den Markup-Teil eines Menüs, das Sprites für die Menügrafiken verwendet.
<ul id="menu"><li id="l1"><a href="#1"></a></li><li id="l2"><a href="#2"></a></li><li id="l3"><a href="#3"></a></li><li id="l4"><a href="#4"></a></li></ul>
Durch ein wenig CSS wird es möglich, Grafiken aus einem Sprite den einzelnen Menüeinträgen zuzuweisen. Der Übersichtlichkeit halber werden hier nur die CSS-Definitionen gezeigt, die für die Steuerung des Bildausschnittes verantwortlich sind.
#menu {
background: url(menu-sprite.png);
}
#l1 {left: 0; width: 95px;}
#l2 {left: 96px; width: 75px;}
#l3 {left: 172px; width: 110px;}
#l4 {left: 283px; width: 117px;}
Die CSS-Definition des Menüs legt die Sprite-Grafik fest, die einzelnen Menüpunkte den jeweils anzuzeigenden Bildausschnitt. Dieses Verfahren funktioniert zuverlässig mit allen aktuellen Browsern. Für die Erzeugung von Spritegrafiken existieren mittlerweile eine ganze Reihe von Tools, einige davon auch online, wie beispielsweise csssprites.org .
Umleitungen
Viele Seiten arbeiten mit Umleitungen, um einen Benutzer von einer aufgerufenen URL zum eigentlichen Bestimmungsort zu leiten. Dieses Hilfsmittel kommt vor allem bei sprechenden und suchmaschinenoptimierten URLs zum Einsatz. Auch viele Web-Frameworks wie beispielsweise Ruby on Rails, Symfony oder Django verleiten die Entwickler zum übermäßigen Einsatz von Redirects. Dabei erzeugen sie einen erhöhten Overhead.HTTP-Redirects arbeiten aber über den Browser. Das bedeutet, dass der Server beim Aufruf einer URL mit einer Redirect-Anweisung antwortet, diese wird durch den Browser automatisch in eine weitere Serveranfrage umgesetzt, welche die eigentliche Zielseite lädt. Das macht zwei Anfragen anstatt einer.
Ladereihenfolge
Moderne Webseiten verwenden CSS zur Formatierung der Ausgabe. Für das Endergebnis spielt es letztendlich keine Rolle, zu welchem Zeitpunkt die CSS-Datei geladen wird, in puncto Ladegeschwindigkeit allerdings durchaus. Stylesheets sollten immer am Anfang einer Datei definiert oder geladen werden. Dies ermöglicht es dem Browser, die HTML-Elemente direkt in ihrem korrekten Aussehen zu rendern.Ein Einbinden am Ende der Seite führt unter Umständen dazu, dass der Browser bereits gerenderte Elemente erneut aufbereiten muss. Genau das Gegenteil gilt für Javascript. Das Einbinden von Javascript-Dateien sollte nach Möglichkeit immer am Ende einer Seite geschehen.Auch dies hat seinen Grund, sobald ein Script geladen wird, kann ein Browser keine andere Datei parallel laden, da dies im Falle von Javascripts zu unerwünschten Nebeneffekten führen kann. Um dem Besucher einer Seite möglichst schnell sichtbare (Teil-)ergebnisse zu liefern und Javascript normalerweise erst ausgeführt werden, wenn die Seite komplett geladen werden, sollte man das Einbinden dieser Dateien an das Ende der Seite verschieben.
