Caching

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 viel 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 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.

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.

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 ein leeren des Browsercaches auch tatsächlich geladen werden. Auch hier ist bei der Festlegung Augenmaß gefordert.

AJAX

Web 2.0 und AJAX sind die beiden beherrschenden Schlagwörter der letzten Jahre. Webseiten, die AJAX zur Kommunikation mit dem Server verwenden, funktionieren anders als klassische Seiten. Während bei AJAX viele Anfragen mit vergleichsweise geringem Datenvolumen zwischen Server und Client ausgetauscht werden, sind klassische Seiten monolithische Datenblöcke, die am Stück übertragen werden.Der Nachteil an der AJAX-Strategie ist, dass AJAX-Anfragen nicht immer vom Browser gecached werden können. Für AJAX-Serverskripte gilt daher das Gleiche, wie für jede andere Seite. Nutzen Sie die den Expires-Header, die GZIP-Komprimierung und die anderen genannten Regeln, um die Performance AJAX-basierter Anwendungen zu steigern.

Tools

Einige Werkzeuge erleichtern es Ihnen, diese Regeln umzusetzen beziehungsweise zu prüfen, ob eine Webseite diese Regeln auch beherzigt. Am besten kommt man dabei weg, wenn man Firefox als Browser verwendet. Für ihn gibt es am meisten Tools, allen voran Firebug (getfirebug.com ).Dieses Browserplugin erweitert Firefox um einen Javascript-Debugger und -Logger. Für die Zwecke der Performanceoptimierung viel interessanter als die Funktionen zur Fehlerbehebung, ist die Möglichkeit den Netzwerkverkehr zu überwachen. Firebug zeigt hier, wann welches Seitenelement vom Server angefordert wurde und wie viel Zeit bis zum vollständigen Laden des jeweiligen Elementes vergeht.Anhand dieser grafisch aufbereiteten Informationen lässt sich bereits sehr viel über die Lade-Strategien eines Browser lernen.Das zweite Tool ist eine Erweiterung von Firebug. Das von Yahoo zur Verfügung gestellte YSlow erweitert Firebug um einen Benchmarking- Bereich. Das Plugin ist unter developer.yahoo.com/yslow/ kostenlos verfügbar und bewertet die Performance einer Webseite in verschiedenen Bereichen nach Schulnoten (amerikanische Notengebung von A (sehr gut) bis E (mangelhaft)).Zudem liefert es hilfreiche Tipps, wie die erkannten Probleme beseitigt werden können. Seit kurzem ist auch das Firebug-Plugin Page-Speed von Google, dass ähnlich wie YSlow die Ladegeschwindigkeit einer Seite analysiert und anschließend Tipps gibt, wie die Seite bezüglich der Ladezeit verbessert werden kann.Für andere Browser existieren ähnliche Tools. Die Webdeveloper-Tools von Google-Chrome, und der Webinspector für Safari stehen der Kombination Firebug/ YSlow kaum nach. Auch die aktuellen Opera- Versionen haben entsprechende Tools standardmäßig mit an Bord. Ein wenig magerer sieht die Situation für den Internet Explorer aus. Hier gibt es weniger Tools, die zumeist auch kostenpflichtig sind.Durch die Einhaltung einiger weniger Regeln kann die Geschwindigkeit einer Webseite deutlich erhöht werden. Je höher die Besucheranzahl einer Seite ist, desto mehr helfen diese, eine Seite schnell an den Besucher auszuliefern und den Server so wenig wie möglich zu belasten.Viele der genannten Mittel kann man einfach umsetzen, andere setzen voraus, dass man sich den entsprechenden Hilfsmitteln in Form von Browserplugins bedient. Die von Google publizierten Performance Best Practises liefern noch einige weitere Beispiele, wie Sie Ihre Seite und damit vielleicht auch Ihr Google-Ranking verbessern können. Denn: Eine Seite kann nie schnell genug geladen sein.