Sie befinden sich hier:
Homepage
»
Webseitengestaltung
»
Blog
»
Performance
27.05.2015

Application Cache als Mittel zur Performancesteigerung

Die Nutzung des Application Caches ist ein weiteres Mittel, um die Performance Ihrer modernen HTML5-Webseiten zu verbessern. Application Cache bedeutet, diverse Inhalte offline zur Verfügung zu stellen. Die Inhalte werden hierbei lokal auf dem Endgerät gespeichert. Sicherlich zielt die Grundidee auf mobile Apps, doch auch normale Webseiten (insbesondere mobile Webseiten) bei denen natürlich das zu übertragende Datenvolumen besonders im Fokus steht, können vom Application Cache profitieren.

Aktivierung des Application Caches

Die Aktivierung des Application Caches ist denkbar einfach. Legen Sie einfach eine Textdatei in dem Rootverzeichnis Ihrer Website an, z.B. cache.manifest. Name und Endung der Datei sind grundsätzlich frei wählbar (.manifest oder .appcache haben sich etabliert). Wichtig ist allerdings, dass entweder in Ihrer Webserver-Konfiguration oder in Ihrer .htaccess-Datei die passende Mime-Type Zuordnung existiert. In diesem Falle:

AddType text/cache-manifest .manifest

Dadurch wird deklariert, dass es sich bei der o.g. Datei namens „cache.manifest“ um eine cache-manifest Datei handelt.

Nun müssen Sie nur noch den Webseiten mitteilen, dass Sie diese cache-manifest Datei verwenden sollen. Verweisen Sie hierzu in Ihrem HTML-Tag auf die soeben angelegte Datei.

<!DOCTYPE html>
<html manifest="/cache.manifest" xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

In meinem Beispiel liegt die Datei im Rootverzeichnis. Deshalb habe ich einen / voran gestellt. So funktiert die Zuordnung auch unabhängig von der Verzeichnisebene innerhalb der Website.

Application Cache - Inhalt

Nachdem somit die Grundkonfiguration des Application Caches abgeschlossen ist, müssen Sie noch festlegen, welche Inhalte im Application Cache abgelegt werden sollen. Kandidaten hierfür sind Dateien, die sich wenig bis nie ändern und doch immer wieder geladen werden, z.B. allgemeine Stylesheet-Informationen, Javascript Libraries oder Bilder, die häufig verwendet werden. Im Idealfall cachen Sie aber alle Bestandteile Ihrer Website. Das Limit des Application Caches variiert zwischen den Browser-Versionen. Wenn Sie in Summe unter 5MB bleiben, sind Sie aber browserübergreifend auf der sicheren Seite.

Aufbau der cache.manifest Datei

Die cache.manifest Datei beginnt in der ersten Zeile mit dem Keyword CACHE MANIFEST und beinhaltet danach vier Sektionen, deren Reihenfolge frei wählbar ist:

  • Kommentarblock
    Kommentarzeilen beginnen mit #
  • CACHE:
    Auflistung der Dateien, die im Application Cache abgelegt werden sollen (Wildcards sind hier nicht erlaubt)
  • NETWORK:
    Auflistung der Ressourcen, die immer online geladen werden sollen (hier sind auch Wildcards erlaubt)
  • FALLBACK:
    Hier wird dem Browser mitgeteilt, was zu tun ist, wenn man offline ist, aber diverse Ressourcen nur online verfügbar sind.

Die Sektionen NETWORK und FALLBACK ist optional. Eine mögliche cache.manifest Datei könnte somit wie folgt aussehen:

CACHE MANIFEST
# 2015-05-22:v0.3
CACHE:
/css/style-min.css
/css/style_print-min.css
/image/sprite.png
/js/jquery-min.js
/js/functions-min.js
NETWORK:
*
FALLBACK:
/ /offline.html

Application Cache - Aktualisierung

Der Application Cache wird nur aktualisiert, wenn Änderungen an der Manifest-Datei vorgenommen werden. Jetzt kommt der Kommentarblock ins Spiel. Eine Änderung innerhalb der Manifest-Datei ist z.B. eine Änderung des Kommentares. Wenn in Ihrem Kommentar das Änderungsdatum oder die Versionsnummer der Manifest-Datei enthalten ist, können Sie z.B. durch das Hochzählen der Version oder durch die Änderung des Datums sehr einfach eine Änderung in der Manifest-Datei erzeugen, ohne an den wesentlichen Inhalten etwas ändern zu müssen. Diese Änderung wird vom Browser erkannt und der Application Cache wird entsprechend aktualisiert.

Cachen Sie nie die cache.manifest-Datei im Application Cache selbst, da Sie somit die Aktualisierung blockieren würden.

Um absolut sicher zu gehen, dass die cache.manifest-Datei auch nicht im Browser gecached wird, würde ich in der Webserver-Konfiguration oder der .htaccess-Datei den Browser-Cache für die manifest-Datei ausschalten:

ExpiresByType text/cache-manifest "access plus 0 seconds"

Fazit

Sie können mit wenig Aufwand einen Application Cache für Ihre Webseiten einrichten. Sie haben damit ein weiteres Mittel in der Hand, um die Kommunikation zwischen Webserver und Browser zu verringern (Anzahl Requests, Übertragungsvolumen). Die Performance Ihrer Webseiten wird sich positiv entwickeln. Einen Fallback müssen Sie nicht implementieren. Falls ein älterer Browser dieses Feature nicht unterstützt, ziehen automatisch die üblichen Mechanismen (z.B. Browsercache).

Autor: Mein Name ist Harry Kämpf und ich bin seit vielen Jahren als Projekt Manager im Webumfeld tätig. Auf diesen Erfahrungen basieren die Tipps zur Webseitengestaltung. Ich schreibe gern über Webthemen, nehme aktuelle Trends auf und berate bei Bedarf. Mehr Infos über mich können Sie auf meiner Homepage nachlesen.

90

Fragen / Anregungen?

Sicherheitsabfrage:
Datenschutzhinweis: Die eingegebenen Daten werden nicht an Dritte weitergegeben.