Website-Optimierung per Caching
Kommentare

Ein weiterer interessanter Ansatz zur Performanceverbesserung einer Applikation ist der Einsatz von Edge Side Includes (ESI). ESI ermöglicht die Verwendung von einzelnen dynamischen Elementen einer Site

Ein weiterer interessanter Ansatz zur Performanceverbesserung einer Applikation ist der Einsatz von Edge Side Includes (ESI). ESI ermöglicht die Verwendung von einzelnen dynamischen Elementen einer Site in einem statischen Haupttemplate. Diese Möglichkeit wird Inclusion genannt und ist zu vergleichen mit dem Nachladen von dynamischen Inhalten per AJAX aus einem gecachten Template heraus. ESI bietet enorme Möglichkeiten zur Performanceverbesserung einer Webseite, ist allerdings aufwändig in der Integration. Gerade in schon vorhandenen Projekten ist eine Menge Konzeptionsarbeit notwendig, um die Vorteile von ESI zu nutzen. Zur Nutzung von ESI wird die bestehende HTML-Repräsentation einer Webseite in Snippets eingeteilt. Wir definieren Snippet als einen eigenständigen Bereich einer Webseite. Dabei gibt es immer ein Haupt-Template, das die einzelnen Snippets referenziert. Es ist also der Container für verschiedene Snippets einer Webseite.

Abb. 2: Die blau hinterlegten Bereiche entsprechen jeweils einem Snippet.

Zur Vereinfachung der Verwendung eines Snippets sollte es von einem öffnenden und einem schließenden Div-Tag umschlossen werden. Es besitzt eine eineindeutige ID und stellt im Backend alle notwendigen Daten zur Darstellung zur Verfügung. Im Cake- und Symfony-Umfeld entspricht eine Component im Ansatz einem Snippet. Das Haupttemplate beinhaltet ESI-Elemente, die zum Beispiel einem Reverse Proxy, der ESI „versteht“ veranlassen, die referenzierten Snippets zu nachzuladen:

//arktikel.html:



Das ESI-Include-Element beschreibt über src=““, welches Snippet nachgeladen werden soll. Das Attribut alt=““ definiert ein alternatives Snippet, das geladen werden soll, wenn das src=““ nicht geladen werden kann. Sollten beide nicht geladen werden können, gibt onerror=““ die Anweisung, was passieren soll. Continue bedeutet hier, dass das include einfach übergangen wird und das nächste ESI-Element im Template bearbeitet wird. Dieses Beispiel würde Sport/Ferrari/01/index.html von www.example.com laden und (je nach Header) speichern. Bei der nächsten Anfrage würde dann ggf. der gecachte Inhalt ausgeliefert. Ebenfalls interessant ist die Möglichkeit, über das ESI-Inline-Element bestimmte Bereiche einer HTML-Antwort-Seite zu markieren und zu cachen. Diese Bereiche stehen dann für andere HTML-Seiten als Inhalte zur Verfügung, falls fetchable=“yes“ gesetzt wurde:



    Michael Schumacher fährt jetzt doch nicht mehr für Ferrari.

ESI kann auch mit komplexen Abhängigkeiten umgehen, z. B.: Lade Inhalt A, wenn COOKIE A gesetzt ist und B, wenn COOKIE B gesetzt wird. Verschiedene Bedingungen können ebenfalls abgefragt und je nach Ergebnis kann darauf reagiert werden. Das Dokument unter [6] beschreibt die verschiedenen Verwendungsmöglichkeiten von ESI. Invalidierung von Webcaches kann aktiv über PURGE oder Umbenennung der Resource erfolgen. Passiv geschieht die Invalidierung über Expire oder CacheControl. Für ESI gibt es das ESI Invalidation Protocol.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -