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

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden Ergebnissen…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste einspannen.…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…