Schneller, höher, weiter

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

Caching

Das Zwischenspeichern oft genutzter Seitenelemente auf der Client-Seite ist mit eines der wichtigsten Hilfsmittel zur Geschwindigkeitssteigerung. Daten, die der Browser auf dem lokalen System zwischengespeichert hat, müssen nicht mehr langwierig vom Server übertragen werden. Moderne Webbrowser versuchen so viele Daten wie möglich zu cachen.

Das Zwischenspeichern von Daten kann beeinflusst werden. Standardmäßig werden vom Browser HTML-, CSS-, Javascript- und Bilddateien gecached. Dynamisch erzeugte Seiten werden hingegen nicht zwischengespeichert. Da ein Großteil aller Webseiten dynamisch erzeugt werden, sollten aus diesen Seiten alle Daten in separate Dateien ausgelagert werden, die vom Browser zwischengespeichert werden.

Dies betrifft vor allem CSS und Javascript. Vermeiden Sie daher Styles und Javascript-Funktionen, die direkt in der Seite untergebracht sind. Lagern Sie diese immer in separate Dateien aus. Dies widerspricht zwar der zuvor aufgestellten Regel, dass das Laden einer Seite so wenig wie möglich Anfragen an den Server verursachen sollte, macht aber dann durchaus Sinn, wenn ein Benutzer eine Seite mehrfach besucht.

In diesem Fall müssen die Javascript- und CSS-Daten nicht mehr vom Server geladen werden, weil sie schon im Browser-Cache zwischengespeichert sind. Je nach Skriptgröße eine lohnenswerte Strategie.

Eine Kenngröße beeinflusst das Caching-Verhalten eines Browsers. Mit jeder Serverantwort werden Daten mitgeliefert, die dafür verantwortlich sind, ob und für wie lange eine Datei im Browsercache gespeichert werden. Mit am wichtigsten ist der Header-Eintrag Expires, hier wird für jede Antwort festgelegt, wie lange sie gültig ist. Dies geschieht in Form eines Verfallsdatums.

Ist kein Wert hinterlegt, wird vom Browser ein Standardwert angenommen (beispielsweise bei Grafiken) oder das Element nicht im Zwischenspeicher abgelegt. In Hinsicht auf die Vermeidung unnötiger Ladevorgänge sollte der der Expires-Header so groß wie möglich gewählt werden. Bei dynamisch generierten Inhalten kann dieser Header durch die jeweilige Programmiersprache gesetzt werden.

Das folgende Beispiel zeigt ein Beispiel hierfür in PHP, Lösungen in anderen Programmiersprachen sind ähnlich.

$offset = 60 * 60 * 24 * 100;
$exp = "Expires: " . gmdate
("D, d M Y H:i:s", time() + $offset) . " GMT";
header($exp);

Dies funktioniert für Seitenteile problemlos, die per Skriptsprache dynamisch erzeugt werden. Was ist aber mit anderen Dateien, wie beispielsweise Bilder, Javascript oder CSS? Auch hier gibt es einen Expires-Header. Dieser kann direkt in der Webserver-Konfiguration festgelegt werden. Das folgende Listing zeigt ein Beispiel für eine entsprechende Apache-Konfiguration.

<FileMatch "\.(gif|jpg|js|css)">
ExpiresDefault "access plus 10
months"</FileMatch>

Damit diese Lösung funktioniert, ist es notwendig, dass das Apache-Modul mod_ expires geladen und aktiviert ist.

Ein Datum weit in der Zukunft für den Expires-Header hat den Vorteil, dass ein Element sehr lange im Browsercache abgelegt wird, zugleich hat es aber auch den Nachteil, dass Änderungen an der Seite nur durch Leeren des Browsercaches auch tatsächlich geladen werden. Auch hier ist bei der Festlegung Augenmaß gefordert.

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.