Mit LiteSpeed Cache zur schnellen Website

Ein Gastbeitrag von Stefan Murawski, Digital Marketing Spezialist – Google SEO Expert – Programmierer web updates kmu GmbH – wuk.ch.

Was ist Caching?

Was ergibt 27 * 184 (ohne Taschenrechner)? Die Antwort ist 4’968. Ich bin sicher, einige wussten das sofort, andere brauchten länger. Wenn ich jetzt die Aufgabe nochmals stelle, wissen nun die meisten die Antwort, weil sie diese gelesen haben. So ähnlich funktioniert das Caching.

Caching ist ein Vorgang, bei dem du dir ein Resultat merkst, ohne es erneut zu berechnen. Es ist wie das Gehirn: Es speichert Antworten ab und gibt diese erneut aus, ohne diese nochmals zu überprüfen. Wenn eine identische Anfrage kommt, ist die Antwort logischerweise die gleiche.
Doch ein Mensch vergisst im Laufe der Zeit Antworten, die er gegebenenfalls mal wusste. Beim Caching kann das auf Kommando erfolgen, entweder manuell oder auf Zeit.

Warum du Caching verwenden solltest

Die Lösung der vorherigen Aufgabe erfordert ungefähr 8 Schritte und nimmt eine Minute in Anspruch. Es sei denn, man kennt bereits das Ergebnis, dann dauert es nur eine Sekunde.

Genauso verhält es sich, wenn ein Besucher eine Website aufruft. Der Webbrowser des Besuchers fordert den Server auf, ihm die Website zuzusenden. Dieser Vorgang kann fünf bis sechs Sekunden dauern. Alternativ kann es auch nur zwei Millisekunden dauern, wenn das Ergebnis direkt aus dem Cache geladen wird.

Normalerweise werden Webseiten für jeden Besucher und jeden Seitenaufruf neu generiert, auch wenn sich viele Teile der Webseite nie ändern. Dies erzeugt natürlich eine Belastung für den Server, erfordert Strom und belegt Rechenkapazität, die anderen Websites nicht mehr zur Verfügung steht.

Pro: Warum soll ich Caching verwenden?

• Caching führt zu einer erheblichen Verbesserung der Ladezeit einer Website.
• Caching reduziert die Serverbelastung und spart dadurch Energie und Ressourcen.
• Caching unterstützt eine bessere Benutzererfahrung durch schnelleres Laden von Seiten und Inhalten.
• Caching ermöglicht die effiziente Nutzung von Speicherplatz auf dem Server.
• Caching verbessert die Skalierbarkeit und Leistungsfähigkeit einer Website, insbesondere bei hohen Zugriffszahlen.

Ein weiterer bedeutender Vorteil ergibt sich, wenn auch andere Websites auf einem Shared-Hosting-Server das Caching nutzen. Dadurch stehen allen Websites auf dem Server mehr Ressourcen zur Verfügung. Ausserdem wird eine Seite, die nicht aus dem Cache geladen werden kann, schneller verfügbar sein, wenn die Grundlast auf dem Server geringer ist.

Contra: Warum soll ich kein Caching verwenden?

• Bei unsachgemässer Konfiguration oder Implementierung kann es zu Fehlern oder Problemen kommen.
• Aktualisierte Inhalte werden möglicherweise nicht sofort angezeigt, da sie aus dem Cache abgerufen werden.
• Einige dynamische Funktionen oder personalisierte Inhalte sind möglicherweise nicht gut für das Caching geeignet.
• Es erfordert eine gewisse Konfiguration und Wartung, um sicherzustellen, dass das Caching ordnungsgemäss funktioniert und aktualisiert wird.
• Bei Websites mit häufigen Änderungen oder individuellen Inhalten kann das Caching weniger effektiv sein.

Wann lohnt sich ein manuelles Setup, wann ein Plugin?

Generell lässt sich sagen: Betreibst du einen Webshop oder benötigst du CDN-Funktionalität? Dann lohnt sich der Einsatz eines LiteSpeed-Cache-Plugins. Bei einer statischen Website, in der kein unnötiger Code gewünscht ist, solltest du das Caching hingegen manuell einrichten.

Cache per Plugin einrichten

• Umfang Funktionalitäten
  Das Plugin bietet umfangreiche Funktionen und kann daher von Websites bis hin zu Webshops für viele verschiedene Seiten genutzt werden, solange sie Standardfunktionen verwenden.
• CDN Unterstützung
  Ein bemerkenswertes Merkmal des Plugins sind die CDN-Funktionalitäten, die es für grössere Seiten mit umfangreichem Inhalt bietet. Diese Funktionen können ohne das Plugin nicht umgesetzt werden.
• Einrichtungsaufwand
  Der Aufwand für die Einrichtung des Plugins variiert je nach Setup und gewünschtem Funktionsumfang. Leider ist das Plugin oft spärlich konfiguriert und erfüllt dann seine Funktionen nicht effektiv.
• CSS- / JS-Minimierung und Packen
  Das Plugin ermöglicht das Verkleinern und Zusammenpacken von CSS- und JS-Dateien, was erhebliche Geschwindigkeitsvorteile bietet. Allerdings lassen sich nicht alle Codes problemlos zusammenführen. Wenn dabei ein Fehler auftritt, kann die Website fast nicht mehr funktionieren. Aufgrund des Cachings wird dies möglicherweise nicht sofort bemerkt. Wenn es richtig gemacht wird, bietet diese Funktion Vorteile, aber bei falscher Anwendung können erhebliche Nachteile entstehen. Deshalb listen wir es in der Liste als neutral auf.

Cache manuell einrichten, die Vorteile

• Kundenspezifisches Setup
  Das Caching kann individuell an die jeweilige Seite und ihre Funktionalitäten angepasst werden. Dadurch ist es möglich, sowohl CMS-Seiten als auch eigens programmierte Seiten für eine optimale Caching-Strategie zu optimieren. Am Ende hat man eine genaue Kontrolle darüber, wie das Caching funktioniert und wie lange bestimmte Inhalte im Cache gespeichert werden.
• Sehr ressourcensparend
  Es ist nicht erforderlich, dass der Webcode spezielle Codefunktionen enthält, um den Cache zu ermöglichen. Dadurch werden die nicht gecachten Seiten nicht beeinträchtigt, während der Cache dennoch effektiv genutzt werden kann.
• Umfang Funktionalitäten
  Die Funktionalität des Cachings ist auf das individuelle Setup beschränkt, das festgelegt wird. In einigen Fällen müssen möglicherweise Features umprogrammiert werden, um sicherzustellen, dass trotz Caching aktuelle Daten geliefert werden können.

Was ist LiteSpeed Cache?

LiteSpeed ist ein Webserver, der vollständig kompatibel zum verbreiteten Webserver Apache ist.  LiteSpeed unterscheidet sich von Apache allerdings durch zahlreiche Features, insbesondere im Bereich des Cachings. Der LiteSpeed Cache ist direkt im LiteSpeed-Webserver eingebaut und ist damit besonders leistungsfähig.

Der LiteSpeed Cache kann vollständig über die .htaccess-Datei konfiguriert werden, ohne dass weitere Serverkonfigurationsdateien benötigt werden. Dies bietet viele Vorteile, da jeder Benutzer seine individuelle Caching-Konfiguration ohne grossen Aufwand festlegen kann.

LiteSpeed-Cache-Plugin für WordPress

Das LiteSpeed-Cache-Plugin für WordPress ist äusserst umfangreich und bietet eine Vielzahl von Funktionen. Allerdings macht dies das Plugin auch zu einem Schwergewicht mit einer grossen Anzahl an Einstellungsmöglichkeiten, die Anfänger überfordern können. Darüber hinaus ist das Plugin ausschliesslich in englischer Sprache verfügbar. Hier einige Tipps, wie du das Plugin optimal konfigurieren kannst:

Generelle Einstellungen (LiteSpeed Cache > General):

• Automatisches Update: Aktivieren
• Domain Key: Wird benötigt, wenn man CSS und JS Dateien auf QUIC.cloud auslagern möchte. Funktion bestätigen (Request) und ein paar Minuten warten.
• Server IP: Die IP sollte eingetragen werden. Bei Unsicherheiten nichts einzutragen! Andernfalls kann es negative Auswirkungen haben.

Cache / [1] Cache:

• Enable Cache: Cache unbedingt aktivieren.
• Cache Logged-in Users: Entweder es sind Administratoren, die mit der Seite arbeiten oder Shopbesucher, die ein Login haben und auf die Daten Zugriff benötigen.

Cache / [3] Purge:

• Purge all on Upgrade: Unbedingt aktivieren, da dies sonst nach Updates zu Problemen führen kann.
• Serve Stale: Dies ermöglicht, dass alter Cache ausgeliefert wird, bis eine neue Version des Cache aufgebaut wurde.

Cache / [5] ESI

Ohne technische Umsetzung sollte ESI abgeschaltet bleiben.
ESI Blöcke können genutzt werden, um Teile der Seite aus dem Cache auszunehmen. Das heisst aber, dass ein Programmierer die entsprechenden Codes einprogrammiert.

Cache / [6] Object

Steht Memcached zur Verfügung, sollte der Object Cache aktiviert werden.

• Auf den Angeboten Webhosting, Webhosting Pro und Agencyserver von cyon steht kein Object Cache wie Redis oder Memcached zur Verfügung.
• Auf dem Angebot Managed Server von cyon kann Memcached genutzt werden. Memcached nutzt dazu die RAM des Managed Servers, weshalb die Auslastung der RAM vorab mit dem Support von cyon geprüft werden sollte.

CDN / [1] CDN Settings

Diese Einstellungen benötigen den Domain Key (DKIM), welcher unter den generellen Einstellungen gesetzt und aktiviert wurde. Ohne diesen Key werden diverse CDN Funktionen nicht funktionieren.

• Cloud CDN: Will man ein CDN nutzen, um Dateien auszulagern, muss diese Option aktiviert werden.
• Use CDN Mapping: Deaktiviert lassen, da diese Einstellung Anpassungen am DNS nötig machen.

Page Optimization / [1] CSS Settings

Folgende Einstellungen sollten nur von Experten vorgenommen werden:

• CSS Minify: CSS Dateien sind für das Aussehen zuständig. WordPress hat hierzu mehrere Dateien (Theme, Plugins, etc.). Diese Dateien enthalten meist Kommentare und Zeilenumbrüche, die sind unnötig und können entfernt werden. Das geht meistens ohne Probleme.
• CSS Combine: Diese Option kombiniert mehrere CSS-Dateien zu einer Datei. Diese Option führt in seltenen Fällen zu Problemen.
  • Generate UCSS (Hier rate ich davon ab, da diese Funktion oft zu Problemen führt und zudem eine Bearbeitung der Konfigurationsdatei von WordPress erfordert)
• CSS Combine External and Inline: Sollte aktiviert werden, kann jedoch zu Problemen führen, da die Prioritäten der CSS-Anweisungen gegebenenfalls nicht mehr in korrekter Reihenfolge sind.
• Load CSS Asynchronously: Meist lasse ich diese Funktion deaktiviert. Denn durch das Aktivieren wird die CSS-Datei vom CDN nachgeladen. (Für diese Funktion ist ein Domain Key nötig.)
  Dies verbessert zwar die Bewertung des Pagespeeds enorm, aber die Seite kann kurzzeitig auch für Seitenbesucher «seltsam» aussehen. Es gibt also gute Gründe die dafür als auch dagegen sprechen. Da eine einwandfreie Seite für Besucher wichtiger ist, lasse ich diese Option vorwiegend deaktiviert.
• Font Display Optimization: SWAP ist hier eine wichtige Einstellung. Wenn ein Besucher eine Website aufruft und die Schrift noch nicht geladen hat, wird normalerweise die Schrift geladen, bevor die Seite angezeigt wird. Das kann zu Verzögerungen führen. SWAP sorgt dafür, dass die Seite mit einer ähnlichen Schrift angezeigt wird, bis die korrekte Schrift verfügbar ist. Der Besucher bemerkt normalerweise nichts davon. Sobald die richtige Schrift geladen ist, wechselt die Seite automatisch zu dieser.

Page Optimization / [2] JS Settings

Javascript-Optimierungen können die Leistung verbessern und schnellere Ladezeiten ermöglichen. Allerdings besteht auch ein erhebliches Risiko, dass die Seite dadurch beschädigt wird. Daher ist es essentiell, dass man hier alle Einstellungen einzeln testet, jedes Mal den LiteSpeed Cache leert und zusätzlich den Browsercache leert.

• JS Minify: JavaScript-Dateien sind in der Regel für Funktionen oder Animationen verantwortlich. WordPress hat mehrere Dateien dafür, wie z.B. für das Theme und die Plugins. Leider kann bei der Programmierung von JavaScript unsauber vorgegangen werden. Diese Programmiercodes funktionieren normalerweise, solange sie nicht verkleinert werden. Unsere Erfahrung zeigt, dass es sehr wahrscheinlich ist, dass die Website durch die Verkleinerung der JavaScript-Funktionen beeinträchtigt wird.
• JS Combine: Die Kombination von JavaScript-Dateien führt fast immer zu Problemen, insbesondere wenn viele Plugins verwendet werden. Es ist wichtig, gründliche Tests durchzuführen und gegebenenfalls die Kombination deaktiviert zu lassen.

Page Optimization / [3] HTML Settings

• HTML Minify: Aktivieren
• DNS Prefetch Control: Aktivieren

Page Optimization / [4] Media Settings

• Lazy Load Images: Durch Aktivierung dieser Funktion können Bilder nachgeladen werden, was zu einer zusätzlichen Geschwindigkeitssteigerung führt.
• Responsive Placeholder: Aktivieren

Crawler / [4] General Settings

• Crawler: Die Crawler-Funktion muss vom Serverbetreiber aktiviert werden. Bei cyon kann die Crawler-Funktion auf dem Angebot Managed Server aktiviert werden. Wir empfehlen, den Crawler für Seiten mit einer hohen Anzahl an Datenverkehr (>1000 Besucher pro Tag) zu aktivieren.
• Server Load Limit: Um diese Einstellung zu verwenden, muss sie an den Server oder das Webhosting angepasst werden. Nehmen wir an, das Webhosting hat 10 CPUs und die Grundlast liegt zwischen 3 und 5. Wenn wir den Crawler mit der Einstellung 1 laufen lassen würden, würde er möglicherweise nicht ausgeführt werden. Daher empfehlen wir eine Einstellung von 6, die leicht über den Grundwerten liegt.
  • Um dies zu tun, ist es erforderlich, eine SSH-Verbindung zum Webserver herzustellen.
  • Der Minimalwert kann mit dem Befehl uptime | awk '{print $12}' abgerufen werden. Der Wert sollte mit +1 erhöht werden. Dieser Wert sollte eingetragen werden, darf jedoch nicht über dem Maximalwert liegen.
  • Der Maximalwert liegt bei grep processor /proc/cpuinfo | wc -l. Der Maximalwert darf nie eingetragen oder überboten werden!
  • Wenn der Wert den maximalen Wert erreicht, empfehlen wir dir, dich an cyon zu wenden, damit eine Überprüfung der Serverlast durchgeführt werden kann.

Das Plugin fügt eine neue Menüoption in der Admin-Leiste hinzu. Es wird ein Icon angezeigt, das beim Anklicken ein Dropdown-Menü öffnet. Die wichtigsten Einstellungen befinden sich dabei unten:

• Purge All: Löscht den Cache komplett.
  Wenn eine Seite Fehler aufweist oder nicht richtig funktioniert, kann der gesamte Cache hier gelöscht werden. Dadurch wird die Website vorübergehend langsamer, bis der Cache wieder aufgebaut ist.
• Purge All – CSS/JS Cache: Löscht nur den CSS / JS Cache.
  Gerade zum Testen der JS / CSS Minimierung und Komprimierung ist diese Funktion sehr nützlich.

LiteSpeed Cache manuell einrichten

Via FTP oder Dateimanager von cyon

Um den LiteSpeed Cache manuell einzurichten, gibt es zwei Möglichkeiten. Entweder benötigt man einen FTP-Account, um sich mit dem Hosting zu verbinden und die .htaccess-Datei zu bearbeiten, oder man kann dies über den Dateimanager durchführen. Die erforderlichen Änderungen müssen in der .htaccess-Datei vorgenommen werden.

Statische Seite

Diese Konfiguration legt die aufgerufenen Seiten und Ressourcen für 1 Tag in den Cache. Ausgenommen sind eingeloggte Benutzer und alle Abfragen, die Inhalte an die Seite übermitteln (Kommentare, Formulare, etc.), sowie alle AJAX-Anfragen, die in WordPress-Logik abgesendet werden.

Weitergehende Informationen zum Caching für statische Seiten:

• In der .htaccess-Datei deaktivieren wir die Anweisungen «Cache-Control» und «Pragma», damit der Cache nicht den Anweisungen von WordPress folgt, sondern den Anweisungen, die wir in der .htaccess-Datei festgelegt haben.
• Die Verwendung von «CacheKeyModify» ermöglicht es, Werbeanzeigen, die beispielsweise über Google Ads geschaltet werden, nachverfolgbar zu machen, auch wenn Caching aktiviert ist. Dabei wird jedoch vermieden, dass für jede Anzeige ein separater Cache-Eintrag erstellt wird.
• Der Wert «max-age=86400» legt fest, dass alle Ressourcen für einen Tag im Cache gespeichert werden sollen. Dieser Wert wird in Sekunden angegeben. Wenn die Cache-Zeit verkürzt werden soll, kann dieser Wert verringert werden.

Code für die erwähnten Änderungen:

# BEGIN Caching

Header unset Pragma
Header unset Cache-Control

RewriteEngine on
CacheEngine on esi crawler
CacheEnable public /
CacheLookup on
CacheKeyModify -qs:fbclid
CacheKeyModify -qs:gclid
CacheKeyModify -qs:utm*
CacheKeyModify -qs:_ga

RewriteCond %{HTTP_COOKIE} wordpress_logged_in [OR]
RewriteCond %{REQUEST_URI} (wp-admin|login|admin-ajax) [NC]
RewriteRule .* - [E=Cache-Control:no-cache,S=1]

RewriteCond %{REQUEST_METHOD} ^HEAD|GET$
RewriteRule .* - [E=cache-control:'public,max-age=86400']

# END Caching

Beispiel am Projekt Sonntagsverkäufe

Diese Art von Caching wird beispielsweise auf der Website Sonntagsverkaeufe.ch verwendet. Bei einer grossen Anzahl von Seitenzugriffen pro Tag auf eine Webseite oder einen Webshop ist Caching erforderlich, insbesondere wenn Tausende von verschiedenen Einträgen vorhanden sind. Das Caching der Seite ist auf eine Dauer von 4 Stunden eingestellt.

Auf Sonntagsverkaeufe.ch werden minutengenaue Öffnungszeiten (Offen bis / Geschlossen) für jedes Geschäft angezeigt. Normalerweise ist dies mit herkömmlichem Caching nicht möglich, jedoch gibt es eine spezielle Lösung. Dabei wird eine gecachte Seite verwendet, die nur alle 4 Stunden neu berechnet wird. Der Status, ob ein Geschäft geöffnet oder geschlossen ist, wird dann mithilfe von Javascript oder Ajax vom Benutzer abgerufen. Dadurch wird die Serverbelastung auf ein Minimum reduziert und gleichzeitig kann der Cache genutzt werden.

Zusätzlich zu den beschriebenen Funktionen gibt es auch ein externes Tracking, bei dem Daten darüber gesammelt werden, wie viele Seiten aus dem Cache und wie viele Seiten direkt vom Server geladen werden. Diese Informationen werden mithilfe der Ajax-Technologie, nachdem der Besucher die Seite erhalten hat, zurück zum Server gesendet und dort gespeichert. Obwohl dies komplex klingen mag, handelt es sich um die gleiche Konfiguration wie zuvor beschrieben.

Eine schnelle Website hängt sowohl vom Caching als auch davon ab, wie die Funktionalitäten implementiert wurden. Grundsätzlich gibt es keine Funktion, die nicht durch Caching unterstützt werden kann.

Es ist wichtig zu beachten, dass die Vor- und Nachteile des Cachings von der spezifischen Website und den Anforderungen abhängen können. Eine gründliche Analyse und Abwägung der individuellen Bedürfnisse ist daher ratsam.

Hast du noch weitere Informationen oder Ergänzungen zu dem Beitrag? Teile sie mir gerne über die Kommentarfunktion mit.

Titelbild: Unsplash+