APPLICATION CACHE – ADVANTAGES AND DISADVANTAGES

Performance ist ein großes Thema. Zur Steigerung der Rendergeschwindigkeit einer Webseite gibt es viele Möglichkeiten. Eine davon ist Caching. Auch hier gibt es verschiedene Schichten und Möglichkeiten.

Serverseitiges Caching

Grob gesagt, versucht man beim serverseitigen Caching Dateien mit dynamischen Inhalten, statisch vorzuhalten. Bei PHP kommt noch hinzu, das der Code vorkompiliert wird.

Durch das Senden korrekter Cache-Header wird versucht unnötige Anfragen durch die Clients zu mindern. Durch Komprimierung wie GZIP wird der Traffic verringert, allerdings wird durch das notwendige Entpacken die CPU des Clients mehr beansprucht. (Beispiel: CSS 500kb wird zu 50kb)

Clientseitges Caching

Die schnellste Verbindung ist immer noch die zum eigenen Speicher. Bei clientseitigem Caching wird versucht, den Client dazu zu bringen, Dateien die sich selten ändern, möglichst lange im lokalen Speicher vorzuhalten. Der Vorteil liegt auf der Hand; wenn die Datei lokal geladen werden kann, muss keine Internetverbindung aufgebaut werden. Vor allem bei mobilen Webseiten ist der Geschwindigkeitsvorteil deutlich spürbar.

Durch das setzen eines Cache-Header Expire-Date, ETAG wird der Browsercache angeregt, erst nach dieser Zeit nach Dateiveränderung beim Server nachzufragen. Eine weitere Möglichkeit bietet der Appcache.

Appcache

Der Appcache geht noch einen Schritt weiter. Durch Vorladen von Ressourcen die auf der Startseite noch nicht gebraucht werden, wird die Ladegewindigkeit der nächsten Seiten erhöht. Es könne statische Dateien wie CSS, Bilder, Schriften etc herunter geladen werden, aber auch ganze HTML-Dokumente im lokalem Speicher abgelegt werden, bevor man die Seite besucht. Diese Dateien werden in einem Cache-Manifest festgelegt, welches als Textdatei für den Client erreichbar sein muss.

Zusätzlich ist es damit auch möglich zu definieren, was der Nutzer sieht wenn die Internetverbindung abbricht. Vorstellbar ist zum Beispiel, durch eine abgespeckte Variante einer Website auch Offline zu navigieren.

Möchte man den Cache invalidieren, muss man den Inhalt der Datei ändern. Dafür ist es üblich in einem Kommentar eine Versionsnummer zu hinterlegen (Siehe zweite Zeile).

Für Grunt gibt es ein Modul, welches die Erstellung der Datei automatisiert.

Wenn Du den Appcache testen möchtest:

  1. Geh mit z.B. mit deinem Smartphone auf http://m.drewag.de und
  2. aktiviere den Flugmodus und
  3. gehe wieder zum Browser und lade die Seite neu.

 

Vorteile

Ressourcen die später auf Unterseiten gebraucht werden, können schon auf der Startseite vorgeladen werden (nach dem DOM Ready Event)

Man kann damit durch Webseiten wie durch Apps auch Offline navigieren.

Nachteile

Hat der Client einmal das Manifest heruntergeladen, ist es nicht so leicht den Cache zu invaldieren. Der Appcache ist auf 10 MB beschränkt. Das herunterladen ganzer Webpräsenzen ist damit nicht möglich.

Mit dem Appcache holt man sich einen zusätzlichen Cache layer rein, der wieder invalidiert werden muss. Problematisch kann es ebenfalls sein, dass dem User Aktualität von Informationen vorgegaukelt wird, da er wie gewohnt weiter durch die Anwendung navigieren kann.

In Tests mit dem Gästeportal zeigte sich sogar, dass der Seitenaufbau im Vergleich zu “normal gecacheden Seiten” (also mit dem Browsercache) von bereits besuchten Seiten teilweise um 0.1 bis 02. Sekunden verlangsamt wurde. Das ist ein so überraschendes Ergebnis, dass ich nicht ausschließen möchte, dass es sich hier um einen Messfehler handelt. Gemessen wurde dies mit nr_perfanalysis und Google Chrome.

Das Feature ist deprecated und wird bald durch ServiceWorker ersetzt. Diese werden allerdings noch nicht von allen Browsern unterstützt. Bis es soweit ist empfiehlt David Walsh daher dennoch den Appcache einzusetzen.

Offline-first applications have the added benefit of feeling faster, providing available information effectively even when a network connection isn’t available.

Fazit

Die Offline Funktion ist schon ein Hammer-Feature, auch die Möglichkeit Ressourcen vorzuladen. Die Probleme, die man sich durch die zusätzliche Cache-Schicht an Land zieht, schrecken allerdings vor der Verwendung bei dynamischen Applikationen – wie es Webseiten sind – ab.