Schneller, höher, weiter

Teil 5: 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.

Performance-Optimierung

© Archiv

Javascript lässt sich mit darauf spezialisierten Tools deutlich verkleinern.

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.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".