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.

© 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 lesen

Chronologische Liste und Netflix-Links -

Neuerscheinungen in der Übersicht -

Vorschau auf Film- und Serien-Highlights -

Mehr zum Thema

Webdesign

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.
Facebook

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?
Online-Recht

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.
Online-Recht in der Cloud

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…
E-Commerce-Logistik

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.