Wie man WordPress beschleunigt und cacht – Die ultimative Anleitung

In dieser Anleitung zeige ich dir, wie du deine WordPress-Website durch das Einrichten einiger Tools enorm beschleunigen kannst.

Lerne, wie du die Ladezeiten deiner Website um den Faktor 5 oder mehr beschleunigst. Lass uns für eine bessere Nutzererfahrung und bessere Suchmaschinen-Rankings sorgen 💪

Das Verringern der Seitenladezeit und das Erhöhen der Website-Geschwindigkeit wird das Nutzererlebnis deiner Website enorm verbessern. Deine Besucher bleiben länger, und die Anzahl der Nutzer, die deine Website nach dem Öffnen der ersten Seite verlassen, wird niedriger sein als zuvor. Du hast vielleicht schon von dieser Metrik als sogenannte Absprungrate gehört.

Noch besser: Website-Geschwindigkeit ist ein Google-Ranking-Faktor, was bedeutet, dass deine Website nach einer Weile höhere Suchrankings bei Google erzielen kann. Das führt dazu, dass mehr Nutzer deine Website finden und du mehr Traffic erhältst.

Es gibt einige Gründe, warum deine WordPress-Website langsam sein kann.
Die häufigsten Gründe sind „Kein Caching" und eine zu große Seitengröße.

Zusätzlich zu diesen beiden Hauptgründen können mehrere andere Variablen die Geschwindigkeit deiner Website beeinflussen:

• Viele installierte Plugins
• Konfiguration deines Servers
• Schlechter Code in einem oder mehreren Plugins.
• Schlechter Code im Theme
• Langsame Netzwerkverbindung
• Langsame Serverantwort

Bevor ich anfange, ist es wichtig, sich daran zu erinnern, dass nicht alle empfohlenen Aktionen die Ladezeit deiner Website verbessern. Eine kann besser funktionieren als die andere, und manche wirken sich nur unwesentlich auf die Ladezeit deiner Website aus.

Video: Wie man WordPress beschleunigt

Falls du lieber ein Video schaust, anstatt diesen Artikel über das Beschleunigen von WordPress zu lesen, kannst du dir den gesamten Artikel als Video ansehen:

Tools, die wir zum Beschleunigen von WordPress verwenden

• ShortPixel Image CDN
• WP Super Cache
• Autoptimize
• wp-staging.com
• Pingdom
• Google PageSpeed Insights
• GiftofSpeed GZIP Test

Benchmarke die Pagespeed deiner Website

Lass uns mit einigen Benchmark-Tests beginnen, um einen Überblick und ein Verständnis für die Geschwindigkeit deiner eigenen Website zu bekommen.

Zum Benchmarken und Analysieren der Geschwindigkeit der Website kannst du die kostenlosen Online-Pagespeed-Tools Pingdom und Google PageSpeedInsights verwenden.

Diese Ergebnisse stammen von einer Beispielwebsite mit WordPress 5.6, einer Handvoll beliebter Plugins und der kostenlosen Version des Themes „Astra" und einer weit von schnell ladenden WordPress-Website entfernten Site:

Caching aktivieren

Lass uns mit dem ersten Schritt beginnen: der Installation eines Cache-Plugins.

Ein Caching-Plugin speichert die sichtbare HTML-Ausgabe deiner Website in temporären Dateien auf deiner Website. Die Ausführung von Code aus einem Plugin oder Theme ist sehr zeitintensiv, weil der Server zahlreiche Berechnungen durchführen muss.

Mit Caching müssen diese Berechnungen nur einmal durchgeführt werden, wenn ein Besucher deine Website öffnet. Das Caching-Plugin prüft zuerst, ob ein bestehender Cache für bestimmte Inhalte existiert.

Wenn der Inhalt bereits zwischengespeichert ist, gibt es direkt die vorberechnete HTML-Ausgabe aus, anstatt den gesamten Code erneut auszuführen. Dann hat der Server mehr freie Ressourcen, um deine Website schneller zu laden. Allein die Installation eines Caching-Plugins und seine korrekte Anpassung kann deine Website zehnmal schneller oder noch schneller machen.

WP STAGING – WordPress Backup, Restore & Migration

Ich empfehle WP Super Cache. Dieses Plugin wird von Automattic entwickelt. Das ist dasselbe Unternehmen, das für die WordPress-Kernentwicklung verantwortlich ist. Das Plugin ist kostenlos, mächtig und einfach, wenn du verstehst, wie es funktioniert.

Dieses Plugin ist in vielen Optionen so leistungsfähig wie Premium-Plugins, etwa das beliebte WP ROCKET, von dem du vielleicht schon gehört hast.

WP ROCKET hat eine benutzerfreundlichere Oberfläche und ist für Erstanwender vielleicht einfacher zu bedienen. Keine Sorge; ich nehme dich an die Hand und zeige dir alle Klicks, die du machen musst, um ähnliche Ergebnisse wie mit einem Premium-Caching-Plugin zu erzielen.

So bekommst du dieselben Geschwindigkeitsergebnisse kostenlos!

Gehe in den Plugin-Store und suche nach WP Super Cache.

Nach dem Installieren und Aktivieren des WP Super Cache Plugins richten wir es ein.

Es wäre möglich, den Cache über den „Easy"-Abschnitt durch Auswahl von „caching on" zu aktivieren, aber an diesem Punkt gehen wir direkt zum Bereich „Advanced", da wir hier die Einstellungen genauer konfigurieren können.

1. Aktiviere die Checkbox „Enable Caching".
2. Simple als Cache-Lieferungsmethode.
3. Caching für eingeloggte Besucher deaktivieren.
4. Seiten mit GET-Parametern nicht cachen. Das stellt sicher, dass dynamische Seiten, die für jeden Nutzer unterschiedlich sind, wie Warenkörbe, niemals zwischengespeichert werden.
5. Seiten komprimieren, damit sie schneller an Besucher ausgeliefert werden,
   und Gzip-Komprimierung aktivieren, was deine Website signifikant beschleunigt. Bitte beachte, dass einige Server die Daten bereits selbst komprimieren, was beim Aktivieren der Option zu Fehlern führen kann. Um zu sehen, ob dein Server bereits Gzip-Komprimierung verwendet, kannst du diesen Gzip-Performance-Test nutzen.
6. Cache-Neuaufbau,
   zeigt dem Nutzer zwischengespeicherte Inhalte an, auch wenn der Cache aufgrund neuer Inhalte aktualisiert wird. Das bedeutet, dass deine Besucher außer beim ersten Erstellen des Caches niemals nicht-gecachten Inhalt sehen.
7. 304 Browser Caching,
   teilt dem Nutzer mit, die Website aus dem Browser-Cache zu laden, wenn bereits gecachter Inhalt im Browser des Nutzers vorhanden ist, anstatt eine Verbindung zum Server herzustellen. Das kann die CPU-Last deines Servers weiter senken.

Scrolle dann nach unten zum Tab „Advanced".

1. Aktiviere die Unterstützung für mobile Geräte. Ein einfacher Klick reicht, aber wp-super-cache weist darauf hin, dass je nach Design ein zusätzliches Plugin installiert werden muss. Da wir ein Standard-WordPress-Theme verwenden, ist das nicht nötig. Wenn deine Website nach dem Aktivieren dieser Option auf mobilen Geräten gut funktioniert, kannst du sie verwenden.
2. Wenn ein Beitrag oder eine Seite veröffentlicht oder aktualisiert wird, alle Cache-Dateien löschen und sicherstellen, dass der Cache geleert wird, damit neue Inhalte angezeigt werden können.

Schließlich ist der letzte Schritt in den Einstellungen des Cache-Plugins die PRELOADING-Option, die du im Tab „Preload" findest:

Die Preload-Einstellung lässt das Plugin alle Beiträge und Seiten deiner Website periodisch cachen. Du kannst das Zeitintervall zwischen jedem Cache-Refresh einstellen. Dieses Zeitintervall ist eine sehr entscheidende Einstellung.

In einer Shared-Hosting-Umgebung solltest du es optimal auf einmal täglich – alle 1440 Minuten – einstellen.

Wenn du deine Website zweimal täglich aktualisierst, kannst du das Zeitintervall zwischen jedem Cache-Refresh auf 720 Minuten setzen. Mit dieser Einstellung wird der gesamte Cache zweimal pro Tag aktualisiert. Eine so niedrige Refresh-Zeit kann zusätzliche Serverlast verursachen.

Ich würde empfehlen, in Shared-Hosting-Umgebungen keinen niedrigeren Wert zu verwenden – da das wahrscheinlich als übermäßige Nutzung der Serverressourcen gewertet wird.

Wenn du jedoch auf einem VPS oder dedizierten Server bist – kannst du die Refresh-Rate so niedrig wie 60 Minuten einstellen.

Es lohnt sich zu wissen, dass die Anzahl der Beiträge und Seiten auf deiner Website die für jeden Preload-Cache-Refresh-Vorgang benötigten Ressourcen beeinflusst. Eine optimale Refresh-Zeit für einen dedizierten Server auf einer Website mit hohem Traffic wäre 2 Stunden.

Ich habe die entsprechenden Checkboxen angeklickt und das Cache-Refresh-Intervall auf 1440 Min. gesetzt. Du kannst jeden Wert wählen!

CSS-, JavaScript-Dateien & Bilder optimieren

Für die nächsten Anpassungen wie das Kombinieren von JavaScript- und CSS-Dateien sowie das Optimieren von Bildern und der HTML-Ausgabe verwenden wir ein anderes Plugin namens „Autoptimize", das wir aus dem WordPress-Plugin-Repository installieren können.

Ob du CSS- und JavaScript-Dateien zusammenfassen solltest oder nicht, hängt hauptsächlich davon ab, wie dein Server konfiguriert ist.

Jede Website lädt Dateien über das Protokoll HTTP 1.1 oder das neuere HTTP 2.

Mit HTTP 1.1 werden alle Dateien nacheinander heruntergeladen. Zum Beispiel muss eine Datei vollständig zum Besucher geladen werden, bevor der Server die nächste Datei senden kann.

Um die Anzahl der herunterzuladenden Dateien zu reduzieren, kann Autoptimize diese Dateien kombinieren. So muss dein Server statt zehn CSS-Dateien nur eine Datei herunterladen, was zu einer schnelleren Gesamtladezeit führt. Auch wenn die gesamte Dateigröße einer kombinierten CSS- oder JS-Datei größer ist, kommt jede einzelne Anfrage mit zusätzlichem Overhead; wie die zusätzliche Zeit, die eine Anfrage benötigt, um eine Verbindung zum Server herzustellen. Deshalb kann es schneller sein, eine große Einzeldatei zu laden, anstatt mehrere Dateien zu laden.

Wenn dein Server also HTTP 1.1 verwendet, wird empfohlen, alle CSS- und JS-Dateien deiner Website zusammenzufassen.

Im Gegensatz dazu kann das HTTP2-Protokoll mehrere Dateien gleichzeitig herunterladen. Wenn das die Einstellung auf deinem Server ist, kann es kontraproduktiv sein, die Dateizusammenfassung zu aktivieren. HTTP2 ist normalerweise viel schneller, weil es mehrere kleine Dateien gleichzeitig statt einer großen herunterladen kann.

Daher bringt das Kombinieren von CSS- und JS-Dateien oft keinen Vorteil und kann die Website sogar verlangsamen, wenn sie HTTP2 verwendet. Um auf der sicheren Seite zu sein, kannst du beide Optionen ausprobieren, um festzustellen, welche Einstellung dir die besten Ergebnisse liefert.

Um zu sehen, ob deine Website HTTP 2 verwendet, nutze den KeyCDN http2 service.

JavaScript optimieren

Wähle den Tab „JS, CSS & HTML".

Aktiviere Optimize JavaScript Code

Wenn dein Server HTTP 1 verwendet:

• Aktiviere Aggregate JS files, um JavaScript-Dateien zu kombinieren, wie von Pagespeed-Benchmark-Diensten empfohlen

Deaktiviere die Optionen:

• Force JavaScript in <head
• Exclude scripts from Autoptimize
• Add try-catch-wrapping.

Aktiviere diese Optionen nur, wenn du JavaScript-Dateien zusammenfasst und Probleme mit der Website auftreten. Dann kannst du bestimmte JavaScript-Dateien vom Kombinationsprozess ausschließen.

Wenn dein Server HTTP 2 verwendet:

• Deaktiviere Aggregate JS Files

CSS-Dateien optimieren

Der nächste Schritt ist die Optimierung von CSS-Dateien.

• Klicke auf Optimize CSS Code.

Wenn dein Server HTTP 1.1 verwendet, aktiviere die Optionen:

• Aggregate CSS-files
• Aggregate inline CSS.
  Das wird den Page-Speed-Score weiter verbessern. Es ist dasselbe wie das Zusammenfassen von JavaScript-Dateien und inline JavaScript-Dateien, aber nur für CSS. Lass diese Option deaktiviert, wenn dein Server HTTP2 verwendet!

Wenn dein Server HTTP1 oder HTTP2 verwendet:

• Aktiviere Generate data: URIs for images – Das kann zu weniger HTTP-Anfragen führen. Aber nicht, nachdem du ein CDN eingerichtet hast und Bilder darüber bereitstellst. Im Falle der Nutzung eines CDN müsstest du es deaktivieren. Durch die Verwendung eines CDN werden Dateien auf mehreren Rechenzentren weltweit zwischengespeichert.
• Deaktiviere Inline and Defer CSS
• Exclude CSS from Autoptimize:
  Verwende dies nur, wenn du CSS-Dateien zusammengefasst hast und visuelle Probleme auf deiner Website auftreten. Dann kannst du bestimmte CSS-Dateien vom Kombinationsprozess ausschließen.

HTML optimieren

Aktiviere die Option „Optimize HTML code".

Beim Optimieren von HTML-Dateien werden Leerzeichen und Kommentare aus dem Code entfernt. Das reduziert die Dateigröße. Und kleinere Dateien laden in der Regel schneller als größere.

Vor der HTML-Optimierung:

Nach der HTML-Optimierung

Der letzte zu bearbeitende Abschnitt sind die MISC-Optionen in Autoptimize.

Aktiviere die ersten vier Optionen:

• Save aggregated script/CSS as static files.
• Minify excluded CSS and JS files.
• Enable 404 fallbacks.
• Also, optimize for logged-in editors/administrators.

Wenn du eingeloggt bist und Probleme mit einem Page Builder wie Elementor oder einem anderen Backend-Plugin hast, deaktiviere die letzte Option.

Google Fonts optimieren

Lass uns zum Tab „Extra" wechseln.

Google Fonts können die Ladezeit verlangsamen, da sie von externen Ressourcen geladen werden. Ich bevorzuge die Option „combine and link in head", da sie die Ladezeiten verbessert, ohne dass die Schrift sichtbar geladen wird. Wenn du in der Europäischen Union bist, macht das deine Website auch DSGVO-konformer, da diese externen Ressourcen nicht mehr von Google geladen werden.

Aber du solltest auch die letzte Google-Font-Option, „combine and load fonts asynchronously with webfont.js", testen und sehen, welche bessere Ergebnisse im Pagespeed-Tool liefert.

Aktiviere dann „remove Emojis", weil das für Emojis verantwortliche JavaScript aufgebläht und nicht förderlich für eine gute Ladezeit ist.

Bilder optimieren

Autoptimize kann auch helfen, Bilder schneller zu laden, indem ein integrierter Drittanbieter-Dienst namens ShortPixel verwendet wird. Wenn du das ausprobieren möchtest, gehe zum Abschnitt Images.

Wähle „Optimize Images"; URLs auf deiner Website werden geändert, sodass sie auf das CDN von ShortPixel verweisen.

Shortpixel reduziert/anpasst kostenlos 100 Bilder pro Monat, was möglicherweise ausreicht, wenn du eine kleine oder mittlere Website hast.

Image Optimization Quality – Du kannst das richtige Gleichgewicht zwischen Komprimierung und Qualität finden, indem du auf „You can test compression levels here." klickst.

Du wirst zu shortpixel.com weitergeleitet, wo du visuell die Unterschiede zwischen den einzelnen Komprimierungsstufen von ShortPixel sehen kannst, indem du eines deiner Bilder hochlädst.

Welche ist am besten für dich?

• Lossy: stärkste Komprimierung, meiste Qualitätsverlust.
• Glossy: mittlere Komprimierung, geringer Qualitätsverlust.
• Lossless: geringe Komprimierung, geringster Qualitätsverlust.

Gehe zurück zu Autoptimize und gib deine Einstellungen ein!

• Load WebP or AVIF in supported browsers – Aktiviere dies, damit Autoptimize Bilder im WebP-Format ausliefert, was dir erlaubt, Bilder noch stärker zu komprimieren, ohne die Qualität sehr zu beeinträchtigen.
• Lazy-Load images – muss ebenfalls aktiviert werden, führt zu weniger Anfragen und wird von Google für schnellere Ladezeiten empfohlen.

Was ist mit Cloudflare?

Vielleicht fragst du dich, warum ich keinen CDN- oder DNS-Dienst wie Cloudflare erwähne, wie viele andere Tutorials zur weiteren Optimierung empfehlen?

Die einfache Antwort ist, dass das Wechseln des DNS-Dienstes für die meisten Websites nicht erforderlich ist, da es einige potenzielle Nachteile mit sich bringt.

Zum Beispiel gibt das Wechseln zu einem DNS-basierten CDN-Dienst wie Cloudflare die Kontrolle über deine Website und ihren Traffic ab. Ich stoße oft auf Websites, die unter dem Cloudflare-DNS-Dienst laufen, wo ich aufgefordert werde, ein Captcha auszufüllen, bevor ich auf die Website zugreifen kann. Solche Captchas können zu einer hohen Absprungrate bei Besuchern führen und sich negativ auf die Suchrankings auswirken. Ein DNS-Dienst könnte auch einen Teil deines Traffics woandershin umleiten, und du würdest es nicht sofort bemerken. Behalte das im Hinterkopf, wenn du einem Drittanbieter-DNS-Dienst die Kontrolle über deine Domain geben möchtest.

Nach den Optimierungen, die wir angewandt haben, ist deine Website bereits so schnell, dass sie das Google-Ranking nicht einschränken wird, daher behandeln wir den Cloudflare-Dienst in diesem Artikel nicht.

Lass mich wissen, falls du das anders siehst und eine andere Meinung zur Verwendung von Cloudflare hast.

Verwandte Artikel

• Wie optimiert man die WordPress-Datenbank für überragende Leistung?
• phpMyAdmin: Datenbanktabellen reparieren und optimieren – Tutorial
• Warum ist WordPress langsam und wie behebt man das?
• Wie leert man Browser-Cache und Cookies?