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 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​".