Schneller, höher, weiter
Teil 5: Homepage-Optimierung: Geringe Ladezeiten, gute Performance
- Homepage-Optimierung: Geringe Ladezeiten, gute Performance
- Teil 2: Homepage-Optimierung: Geringe Ladezeiten, gute Performance
- Teil 3: Homepage-Optimierung: Geringe Ladezeiten, gute Performance
- Teil 4: Homepage-Optimierung: Geringe Ladezeiten, gute Performance
- Teil 5: Homepage-Optimierung: Geringe Ladezeiten, gute Performance
- Teil 6: Homepage-Optimierung: Geringe Ladezeiten, gute Performance
- Teil 7: Homepage-Optimierung: Geringe Ladezeiten, gute Performance
Hier hilft CSS, um den korrekten Bildausschnitt aus der Gesamtgrafik anzuzeigen. Der folgende Beispielquellcode zeigt den Markup-Teil eines Menüs, welches 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 jetzt 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.
Umleitungen
Viele Seiten arbeiten mit Umleitungen, um einen Benutzer von einer aufgerufenen URL zum eigentlichen Bestimmungsort zu leiten. Dies 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.
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.
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 wird, wenn die Seite komplett geladen ist, sollte man das Einbinden dieser Dateien an das Ende der Seite verschieben.
