Schneller, höher, weiter

Teil 5: Homepage-Optimierung: Geringe Ladezeiten, gute Performance

22.7.2009 von Redaktion pcmagazin und Timo Haberkern

ca. 1:55 Min
Ratgeber
  1. Homepage-Optimierung: Geringe Ladezeiten, gute Performance
  2. Teil 2: Homepage-Optimierung: Geringe Ladezeiten, gute Performance
  3. Teil 3: Homepage-Optimierung: Geringe Ladezeiten, gute Performance
  4. Teil 4: Homepage-Optimierung: Geringe Ladezeiten, gute Performance
  5. Teil 5: Homepage-Optimierung: Geringe Ladezeiten, gute Performance
  6. Teil 6: Homepage-Optimierung: Geringe Ladezeiten, gute Performance
  7. 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.

Performance-Optimierung
Javascript lässt sich mit darauf spezialisierten Tools deutlich verkleinern.
© Archiv

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

Marvel-Filme- und -Serien: Das ist die richtige Reihenfolge

Neuerscheinungen in der Übersicht

Netflix: Neue Filme und Serien

Vorschau auf Film- und Serien-Highlights

Amazon Prime Video: Neuheiten

Weiter zur Startseite  

Mehr zum Thema

internet, webdesign, adobe,  Illustrator, CS6

Webdesign

Webdesign in Adobe Illustrator CS6

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

Facebook stellte die neue Suche

Facebook

Facebooks Social Graph Search

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

Der BGH erklärt das Internet zur Lebensgrundlage.

Online-Recht

Darauf müssen Sie bei den AGB achten

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.

Online-Urheberrecht: Unser Ratgeber bietet Tipps für das Cloud-Recht.

Online-Recht in der Cloud

Wie sieht das Urheberrecht in der Wolke aus?

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

Logistik im E-Commerce: Prozesse rund um die Logistik.

E-Commerce-Logistik

Logistik im E-Commerce

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