WooCommerce optimieren Teil #5: Nutze Caching, aber kenne die Grenzen

Was ist Caching und wie funktioniert es?

Wenn ein Nutzer eine statische Seite, einen Blogbeitrag oder eine Produktseite besucht, dann muss WordPress die Seite erst einmal erzeugen. Dazu muss es zuerst herausfinden, welche Elemente und Inhalte auf der Seite enthalten sind.

Texte, verknüpfte Medien, aber auch diverse Einstellungen müssen aus der Datenbank geladen werden und mit dem Template sowie den Bilddateien, CSS- und JavaScript-Dateien zur Seite zusammengefügt werden.

Dieser Vorgang braucht Zeit. Je komplexer die Seite ist, desto länger dauert dieses Berechnen und Zusammenbauen der Seite.

Die Zeit, die der Browser auf diese erste Antwort des Servers wartet wie als Time-to-First-Byte (ttfb) oder als Serverantwortzeit bezeichnet.

Besteht die Seite nur aus einem einfachen Text, kann die Seite sehr schnell bereitgestellt werden. Bei einer Produktseite mit zusätzlichen Abschnitten wie „Ähnliche Produkte“ oder „Kunden kauften auch“ ist das Zusammenbauen der Seite aufwendiger, da zusätzliche Templates und Informationen aus der Datenbank geladen werden müssen.

Nun ändert sich der Inhalt einer Seite aber nicht ständig. Deshalb sollte die fertig zusammengebaute Seite zwischengespeichert werden. Das nennt man Caching. Weiter unten gehe ich noch kurz auf die verschiedenen Arten von Caching ein.

 

Was bringt ein Caching Plugin

Durch das Caching verkürzt sich die Serverantwortzeit / Time-to-First-Byte beträchtlich. Während sie ohne Cache je nach Seiteninhalt und Theme-Performance bei etwa 1 bis 7 Sekunden (und mehr) liegt, beträgt sie mit einem gut konfigurierten Cache weniger als 100 Millisekunden.

Caching kann dir dabei helfen, die Ladezeit deines WooCommerce-Shops massiv zu verkürzen.

Außerdem erhöht sich die Performance, denn für den Server ist es viel einfacher, die Seiten aus dem Cache ausliefern, anstatt sie jedes Mal neu berechnen zu müssen. Das heißt, er kann an deutlich mehr Nutzer Seiten ausliefern, ohne dass er dabei langsamer wird.

 

Verschiedene Caching-Ebenen

Das Caching findet auf verschiedenen Ebenen statt. Alle diese Ebenen oder Funktionsmechanismen kannst du als Seiten- und Shopbetreiber beeinflussen.

Browser-Caching

Beim ersten Besuch einer Seite, speichert dein Browser die heruntergeladenen Daten in seinem Cache. Besuchst du die Seite später noch einmal, dann überprüft dein Browser zunächst anhand des sogenannten Headers, ob die Daten im Cache noch aktuell sind und lädt nur die Dateien nach, die sich seit dem letzten Besuch verändert haben.

Das Browser-Caching wird in erster Linie durch diverse Einstellungen in der .htaccess-Datei gesteuert. Diese kannst du von Hand vornehmen oder du verlässt dich auf ein gutes Caching-Plugin.

Database Cache und Object Cache

WordPress speichert die Ergebnisse von langen und komplexen Datenbankabfragen in der Datenbank. Allerdings wird dieser Datenbank-Cache nach jedem Seitenladevorgang gelöscht. Caching Plugins können dabei helfen, dass häufige und komplexe Abfragen dauerhaft im Datenbank-Cache gespeichert werden.

Page Cache

Das Grundprinzip des Page Cache habe ich in der Einleitung schon skizziert: Für jede Seite wird eine statische Datei erzeugt, in der der gesamte Seiteninhalt gespeichert wird. Die Seite muss nur neu berechnet werden, wenn sich etwas an ihr geändert hat.

 

Weitere Aufgaben eines Caching Plugins

Zusätzlich zum Caching übernehmen Caching Plugins oft noch weitere Aufgaben. Auf ein paar ausgewählte will ich kurz eingehen.

Minification

Bei der Minification werden aus einer HTML-, CSS- oder JavaScript-Datei alle nicht benötigten Zeichen wie Leerzeichen, Zeilenumbrüche und Kommentare aus dem Quellcode entfernt. Dadurch wird die Datenmenge um bis zu 50 Prozent reduziert.

Concatenation

Bei der Concatenation werden Quelldateien vom gleichen Typ zusammengefasst, um die Anzahl der zu ladenden Dateien zu reduzieren.

Ob das eine gute Idee ist, hängt davon ab, ob deine Seite HTTP/1.1 oder HTTP/2 verwendet.

Concatenation bei HTTP/1.1

Oft müssen mehrere CSS-Dateien für eine Seite geladen werden. Aber jede einzelne Anfrage an den Server kostet Zeit und es kann nur eine begrenzte Anzahl an Dateien gleichzeitig von Server heruntergeladen werden. Je nach Browser- und Serverkonfiguration zwischen 10 und 20.

Durch das Zusammenfassen von mehreren Quelldateien zu einer, kannst du die Anzahl der Ressourcen, die der Browser zur Darstellung der Seite herunterladen muss, deutlich reduzieren. In der Folge verkürzt sich die Ladezeit und der Server wird entlastet.

Die Concatenation führt bei JavaScript-Dateien öfter mal zu Problemen. Das liegt zum einen daran, dass die Reihenfolge der JavaScript-Routinen wichtig ist und beim Zusammenfassen nicht durcheinander gebracht werden darf. Zum anderen kann schlechter Code dazu führen, dass beim Zusammenfügen Fehler auftauchen, die die weitere Ausführung verhindern.

Concatenation bei HTTP/2

Bei HTTP/2 wird eine Verbindung aufgebaut, über die mehrere Dateien geladen werden können. In diesem Fall bietet das Zusammenfassen von Dateien keinen Vorteil mehr.

Im Gegenteil: Wenn sich nur eine der Quelldateien ändert, dann müsste die gesamte zusammengefasste Datei neu erzeugt und vom Nutzer heruntergeladen werden. Verzichtet man stattdessen auf die Concatenation, dann muss der Browser nur die einzelne Quelldatei neu laden, in der sich etwas verändert hat und die anderen Dateien kommen aus dem Cache.

Wenn dein Server den neuen Standard HTTP/2 verwendet, dann solltest du keine Concatenation verwenden.

Hier kannst du testen, ob dein Webserver HTTP/2 unterstützt: zum HTTP/2-Test

Kompression

Ein gutes Caching –Plugin aktiviert auch die Datenkompression mit GZIP. So werden HTML-, CSS- und JavaScript-Dateien vom Server mit GZIP gepackt und erst dann an den Browser des Besuchers geschickt. Dadurch reduziert sich deutlich die Datenmenge und somit die Ladezeit.

 

Vorsicht: Caching ist kein Allheilmittel

Oft lese ich die Auffassung, dass Caching ein Allheilmittel sei. Ein schnelles Theme und effiziente Plugins seien unwichtig, weil das Caching dafür sorge, dass alles schnell geladen wird.

Das stimmt nicht.

Es gibt zwei Probleme: Erstens werden nicht alle Seiten gecacht und zweitens ist auch das Caching aufwendig. Lass mich das näher erklären.

Kein Cache für eingeloggte Benutzer

An eingeloggte Nutzer werden zudem standard-mäßig keine Seiten aus dem Cache ausgeliefert. Das gilt für alle Seiten wie zum Beispiel Seiten, Beiträge und Produkt-Detailseiten. Der Hintergrund ist recht trivial: angemeldet Nutzer sollen im Kommentarbereich der Beiträge ihren Gravatar sehen und Name und E-Mail-Adresse sollen vorausgefüllt werden.

Für einen Shop ist das aber ziemlich unpraktisch. Denn das heißt auch: Hat sich ein Bestandskunde eingeloggt, dann bekommt er im gesamten Shop nur langsame ungecachte Seiten zu sehen.

Bei manchen Caching-Plugins kannst du aber den Cache für eingeloggte Nutzer aktivieren.

Nicht alle Seiten landen im Cache

Es gibt Seiten, für die wird niemals eine Cache-Datei erzeugt. Dazu zählen unter anderem der Warenkorb, der gesamte Checkout und der Kundenbereich („Mein Konto“).

Wenn du dich nun einzig und allein auf dein Caching-Plugin verlässt und dich nicht weiter um die Ladezeit-Optimierung kümmerst, dann hat das zur Folge, dass deine Kunden zwar schnelle Kategorie- und Produkt-Detail-Seiten ausgeliefert bekommen, aber sobald sie zum Warenkorb wechseln und den Checkout beginnen, werden sie ausgebremst.

Dabei ist der Checkout der kritischste Bereich in deinem WooCommerce-Shop. Wenn hier etwas nicht stimmt, verlierst du kaufbereite Kunden. Ladezeiten über 3 Sekunden haben massive negative Auswirkungen auf die Conversion Rate und die Anzahl der abgeschlossenen Kaufvorgänge.

Caching braucht Zeit und belastet den Server

Damit eine Seite aus dem Cache ausgeliefert werden kann, muss sie erst einmal in Cache gespeichert werden. Im einfachsten Fall geschieht das beim ersten Aufruf der Seite.

Die Ladezeit dieses ersten Aufrufs wird dadurch bestimmt, wie effizient das Theme ist und wie viele (aufwendige) Plugins im Einsatz sind.

Im besten Fall muss der erste Besucher einer ungecachten Seite etwas länger auf die Auslieferung der Seite warten. Alle folgenden Besucher bekommen die schnelle Seite aus dem Cache.

Im schlechtesten Fall fordern mehrere Besucher gleichzeitig verschiedene Seiten an, die noch nicht gecacht wurden. Dadurch verzögert sich die Auslieferung der Seiten zusätzlich – die ersten Besucher warten nicht mehr nur ein paar Sekunden, sondern vielleicht 10 oder 20 Sekunden – und im schlimmsten Fall brechen Verbindungen ab.

Ein funktionierendes Caching darf niemals eine Ausrede für die übrige Ladezeit- und Performance-Optimierung sein.

 

Die wichtigsten Caching Plugins

Drei Caching Plugins möchte ich dir kurz vorstellen und ans Herz legen. Zwei kostenlose und ein kostenpflichtiges Premium Caching Plugin.

 

WP Super Cache

Mit über 2 Millionen Installationen ist WP Super Cache der Klassiker. Drei verschiedene Caching-Methoden (Expert, Simple und WP-Cache) stehen zur Auswahl, so dass das Plugin in jeder Hosting Umgebung lauffähig sein sollte.

Das Plugin lässt sich auch von Anfängern schnell und ohne aufwendige Konfiguration installieren.

Allerdings ist der Funktionsumfang etwas eingeschränkt: Zwar bietet es einen Page Cache und Einstellungen für den Browser Cache sowie die Möglichkeit ein CDN einzubinden, aber keine Minification oder Zusammenfassung von Dateien.

WP-Super Cache verfügt zwar über eine PreLoad-Funktion, mit der man den Cache vorbefüllen kann, damit auch der erstes Besucher einer Seite direkt eine Seite aus dem Cache bekommt. Aber diese ist recht halbherzig umgesetzt, dauert ewig und ist damit wenig praxistauglich.

Dennoch ist WP Super Cache für Anfänger ein guter Einstieg.

 

W3 Total Cache

Ein weiteres Urgestein ist W3 Total Cache mit über eine Millionen Installationen. Es bietet deutlich mehr Funktionen als WP Super Cache, allerdings ist die Konfiguration auch recht kompliziert.

W3TC verfügt neben dem Page Cache und Browser-Caching sowie GZIP-Kompression auch über Minification und Concatenation.  Einen CDN-Support gibt es auch.

Großer Haken: Sämtliche Einstellungen zur Minification und Concatenation sowie zum optionalen Laden von ausgesuchten JavaScript-Dateien im Footer muss man von Hand vornehmen. Da können schon mal zwei Stunden ins Land gehen, bis man die Reihenfolge der Dateien sortiert hat und eine Kombination gefunden hat, mit der die Seite vollständig und fehlerfrei läuft.

Die Cache Preload Funktion von W3 Total Cache funktioniert deutlich besser als bei WP Super Cache. Man kann z.B. festlegen, dass alle fünf Minuten 10 Seiten von einer Sitemap gecacht werden sollen. Nachteil auch hier: Man muss diese Werte von Hand festlegen, muss also wissen, was man sinnvollerweise hier einträgt.

• Die Ladezeiten und Performance-Werte bei pingdom und dem Google Pagespeed Test sind mit W3 Total Cache ein gutes Stück besser als mit WP Super Cache.

W3 Total Cache ist die richtige Wahl, wenn du weißt, was du tust und kein Geld für ein Premium Plugin ausgeben möchtet.

 

WP Rocket

Im Gegensatz zu den beiden vorherigen Caching Plugins, ist WP Rocket^a ein Premium Performance Plugin. Das heißt, dass es etwas kostet, dafür aber einige zusätzliche Funktionen mitbringt.

Ich habe WP Rocket erst vor wenigen Monaten kennengelernt, weil ich mit W3 Total Cache in einem WooCommerce-Projekt keine zufriedenstellenden Ergebnisse erreichen konnte. Seit dem bin ich Fan.

Das wirklich überragende an WP Rocket ist, dass es einen wahnsinnig großen Funktionsumfang mitbringt und gleichzeitig kaum konfiguriert werden muss. Die Macher testen ständig alle gängigen Themes und Plugins in Verbindung mit WP Rocket durch und stecken die gewonnen Erkenntnisse in das Plugin, so dass es von selbst die optimalen Einstellungen wählt.

Neben dem Page Cache, Browser Caching und GZIP-Kompression bietet WP Rocket folgende Funktionen:

• HTML, CSS und JS minimieren
• CSS- und JS-Dateien zusammenführen
• JS-Dateien im Footer laden sowie asynchrones Laden
• CDN-Support
• Cache Preloading ohne komplizierte Einstellungen auf Knopfdruck oder automatisch per Cron-Job
• Google Font Optimierung
• Lazy Load
• Critical CSS
• Datenbank Cleaner
• Google Analytics Code lokal einbinden

Wer mehr oder besondere Konfigurationsmöglichkeiten braucht, kann WP Rocket durch Filter genau an seine Bedürfnisse anpassen. Unter anderem kann man genau steuern, bei welchen Ereignissen der Cache einer einzelnen Seite gelöscht werden soll und wann nicht.

Absolut begeistert bin ich auch von dem exzellenten Support. Innerhalb von ein paar Stunden bekomme ich auch auf verrückte Fragen sehr ausführliche und hilfreiche Antworten. Außerdem gibt es alle paar Wochen ein Update mit weiteren Verbesserungen.

• Die Serverantwortzeiten, Ladezeiten und Performance-Werte bei pingdom und dem Google Pagespeed Test sind mit WP Rocket noch mal ein gutes Stück besser als mit W3 Total Cache.

Die Lizenz für eine Website kostet $49 pro Jahr inklusive Support. Eine Lizenz für 3 Websites ist für $99 zu haben und für Agenturen gibt es ein unlimited Paket.

WP Rocket ist aus meiner Sicht die beste Wahl – sowohl für blutige Anfänger, als auch für Experten.

Die überschaubaren Lizenzkosten sind angesichts der überragenden Performance-Werte, der exzellenten Usability und dem vorbildlichem Support mehr als gerechtfertigt.

 

Fazit

Lass es mich drastisch formulieren:

Müll bleibt Müll, auch dann, wenn er gecacht und komprimiert wird.

Dein oberstes Ziel sollte immer eine schlanke Seite sein. Schlank heißt unter anderem:

• Schnelles Theme
• Performante Plugins
• Optimierte Bilder
• Wenige zu ladende Ressourcen

Bei einem wenig besuchten Blog kannst du eine schlechte Basis mit Caching größtenteils kaschieren. Aber bei einem gut laufenden Onlineshop bist du darauf angewiesen, dass dein System auch im ungecachten Ceckout schnell ist.

Dennoch führt kein Weg an Caching vorbei. Mit sehr wenig Aufwand kannst du eine deutliche Verbesserung von Ladezeit und Performance erreichen.

Wem bewusst ist, dass Gutes etwas kosten darf oder sogar muss, dem lege ich WP Rocket^a wärmstens ans Herz.

 

Inhaltsverzeichnis

1. So findest Du ein schnelles Theme
2. Wähle Deine Plugins sorgfältig aus
3. Binde deine Bilder in der passenden Größe ein
4. Verringere die Dateigröße deiner Bilder
5. Nutze Caching, aber kenne die Grenzen
6. Wann ist ein CDN sinnvoll?
7. Hosting - Wie viel Leistung brauchst du?

 

^a: Das ist ein Affiliate-Link. Wenn du über den Link das Produkt kaufst, erhalte ich eine kleine Provision, aber du zu zahlst nicht mehr als sonst. Ich empfehle nur Produkte, die ich selbst getestet habe und von denen ich überzeugt bin.