WordPress und WooCommerce Schritt für Schritt beschleunigen und optimieren

Die Geschwindigkeit einer Website beeinflusst ihre Verkäufe und ihr Ranking bei Google. WordPress und WooCommerce werden meist durch falsche Konfigurationen, zu viele Plugins oder schwere Themes langsam. In dieser Anleitung gehen wir vom Einfachsten zum Fortgeschrittensten, mit den konkreten Einstellungen, die wir empfehlen.

Nehmen Sie die Änderungen einzeln vor und prüfen Sie nach jeder die Website (Menüs, Formulare, Warenkorb und Bezahlung). So wissen Sie, was etwas verbessert und was gegebenenfalls etwas kaputt gemacht hat.

Um vorher und nachher zu messen, verwenden Sie PageSpeed Insights, immer mit denselben Seiten: Startseite, ein Beitrag oder eine Kategorie und bei Shops eine Produktseite.

WordPress und Plugins aktuell halten

Halten Sie WordPress, das Theme und alle Plugins aktuell. Neben der Sicherheit bringt jede Version Leistungsverbesserungen.

Je länger Sie nicht aktualisieren, desto wahrscheinlicher macht der Sprung Probleme. Jede Woche oder jeden Monat schrittweise zu aktualisieren, hält die Installation gesund. Wenn ein Update fehlschlägt, haben Sie unsere täglichen Backups, um zurückzugehen, und Sie können uns um Hilfe bei der Behebung bitten. Beachten Sie in einem Shop, dass das Wiederherstellen der Datenbank die Bestellungen löscht, die nach dem Backup eingegangen sind.

PHP-Version und OPcache

Jede neue PHP-Version ist schneller als die vorherige. Verwenden Sie die neueste, die Ihr Theme und Ihre Plugins unterstützen (wenn sie aktuell sind, unterstützen sie normalerweise die neuesten).

Ändern Sie sie im PHP-Selektor von cPanel oder mit dem PHP-Assistenten im Kundenbereich, der prüft, dass die Website nach der Änderung weiter antwortet. Wenn etwas nicht funktioniert, kehren Sie mit einem Klick zur vorherigen Version zurück.

Prüfen Sie im selben Selektor, dass die Erweiterung opcache aktiviert ist: Sie speichert den bereits kompilierten PHP-Code und erspart diese Arbeit bei jedem Besuch.

Den WordPress-Cron ersetzen

WordPress führt seine geplanten Aufgaben bei Besuchen aus: Wenn jemand die Website aufruft, prüft es, ob Aufgaben anstehen, und startet sie. Das verlangsamt den betroffenen Besuch und verzögert die Aufgaben auf Websites mit wenig Traffic.

Am besten deaktivieren Sie ihn und starten die Aufgaben mit einem echten Cronjob des Servers, wie wir in WP-Cron deaktivieren, um die Leistung zu verbessern erklären. Richten Sie zuerst den Cronjob des Servers ein und prüfen Sie, dass er funktioniert, bevor Sie den von WordPress deaktivieren.

LiteSpeed Cache, das Schlüsselelement

Jeder Besuch auf WordPress führt viel PHP-Code und Dutzende Datenbankabfragen aus. Der Cache speichert die bereits erzeugte Seite und liefert sie dem nächsten Besucher direkt aus, ohne diese Arbeit zu wiederholen. Die Seite „Über uns“ wird zum Beispiel einmal erzeugt, und die folgenden Besuche erhalten sie sofort und fast ohne Verbrauch.

LiteSpeed Cache ist das Plugin, das wir empfehlen: Es wird vom selben Team entwickelt wie der LiteSpeed Web Server, der Webserver, den wir verwenden, und das Caching übernimmt direkt der Server. Außerdem enthält es Werkzeuge zur Optimierung von CSS, JavaScript, Bildern und Datenbank.

Verwenden Sie nur ein Seiten-Cache-Plugin: Wenn Sie WP Rocket, W3 Total Cache, WP Super Cache oder Ähnliches haben, deaktivieren Sie es vorher.

Installation

Es gibt zwei Wege:

• In cPanel mit dem LiteSpeed Web Cache Manager, der es auf einer oder mehreren Websites gleichzeitig installiert und aktiviert.
• In WordPress unter Plugins > Neues Plugin hinzufügen, indem Sie nach LiteSpeed Cache suchen (Autor: LiteSpeed Technologies).

Ersteinrichtung und Voreinstellungen

1. Für die Bildoptimierung, das kritische CSS und VPI braucht LiteSpeed die kostenlosen Online-Dienste von QUIC.cloud. Aktivieren Sie sie unter LiteSpeed Cache > General mit der Schaltfläche Enable QUIC.cloud services. Das CDN müssen Sie dafür nicht nutzen. (In älteren Versionen hieß dieser Schritt Request Domain Key.)
2. Gehen Sie zu LiteSpeed Cache > Presets und wenden Sie Basic an. Damit werden der Cache und einige sichere Optimierungen auf einmal aktiviert.

Die Voreinstellungen konfigurieren viele Optionen auf einen Schlag:

• Essentials und Basic: die sichersten, sie machen selten Probleme.
• Advanced (Recommended): ein Mittelweg, der auf den meisten Websites gut funktioniert.
• Aggressive und Extreme: optimieren maximal, können aber mit manchen Themes oder Plugins kollidieren (verzögertes Laden von Bildern, Kombinieren von JavaScript, verzögertes JavaScript).

Am einfachsten steigern Sie die Stufe schrittweise, prüfen die Website bei jeder und bleiben bei der höchsten, die gut funktioniert. LiteSpeed speichert vor dem Anwenden einer Voreinstellung eine Kopie Ihrer Konfiguration und lässt Sie diese auf derselben Seite wiederherstellen.

Wenn Sie lieber von Hand einstellen (oder von Basic ausgehen und verfeinern), sind dies die Werte, die wir empfehlen.

Dashboard

Das Dashboard von LiteSpeed fasst den Zustand des Caches und der Optimierungen zusammen. Es enthält die Page Load Time und den PageSpeed Score, von außen gemessen, damit Sie die Entwicklung verfolgen können, ohne WordPress zu verlassen.

Cache

Unter LiteSpeed Cache > Cache:

Registerkarte Cache

• Enable Cache: ON.
• Cache Logged-in Users: ON. Speichert für jeden angemeldeten Benutzer einen privaten Cache.
• Cache Commenters: ON.
• Cache REST API: ON.
• Cache Login Page: ON.
• Cache Mobile: OFF, es sei denn, Ihr Theme oder ein Plugin liefert auf dem Handy anderes HTML (ein responsives Design reicht dafür nicht). Wenn ja, ON.

Registerkarte TTL

Das ist die maximale Zeit, die eine Seite im Cache bleibt, bevor sie neu erzeugt wird. LiteSpeed leert automatisch, was sich ändert (beim Bearbeiten eines Beitrags, Ändern eines Produkts, Installieren eines Plugins), daher sind die hohen Standardwerte richtig. Default Public Cache TTL beträgt zum Beispiel 604800 Sekunden, eine Woche.

Registerkarte Purge

Aktivieren Sie Purge All On Upgrade und lassen Sie die Regeln zum automatischen Leeren beim Veröffentlichen, wie sie sind.

Registerkarte Excludes

Wenn eine Seite nicht gecacht werden soll (weil sie Daten zeigt, die sich bei jedem Besuch ändern, oder Probleme macht), tragen Sie ihre Adresse unter Do Not Cache URIs ein. Sie können auch nach Cookies, Kategorien, Schlagwörtern oder Benutzerrollen ausschließen. Warenkorb, Kasse und Mein Konto von WooCommerce schließt LiteSpeed bereits von selbst aus.

Registerkarte ESI

ESI erlaubt, die Seite zu cachen und nur einen personalisierten Teil auszulassen (zum Beispiel den Mini-Warenkorb oder den Namen des Benutzers). Das ist leistungsfähig, erfordert aber Programmierkenntnisse: Lassen Sie es deaktiviert, wenn Sie es nicht brauchen.

Registerkarte Object

Das ist der Objekt-Cache mit Redis; wir behandeln ihn weiter unten in einem eigenen Abschnitt.

Registerkarte Browser

Aktivieren Sie Browser Cache mit Browser Cache TTL auf 31557600 Sekunden (ein Jahr). Der Browser des Besuchers speichert CSS, JavaScript und Bilder und lädt sie nicht auf jeder Seite erneut herunter.

Bildoptimierung

LiteSpeed sendet die Bilder an QUIC.cloud, das sie komprimiert und WebP-Versionen erzeugt, und gibt sie zurück, ohne dass Sie etwas tun müssen.

Unter LiteSpeed Cache > Image Optimization, Registerkarte Image Optimization Settings:

• Auto Request Cron: ON.
• Optimize Original Images: ON.
• Remove Original Backups: OFF. So behalten Sie die Originale, falls Sie zurückkehren möchten.
• Optimize Losslessly: ON. Verringert die Größe etwas weniger, aber das Bild verliert keine Qualität.
• Preserve EXIF/XMP data: OFF.
• Next-Gen Image Format: WebP (AVIF ist kostenpflichtig).
• WebP/AVIF For Extra srcset: ON.

Je nachdem, wie viele Bilder Sie haben, dauert der Vorgang Stunden oder Tage. Den Fortschritt sehen Sie in der Übersichtsregisterkarte desselben Bereichs.

Seitenoptimierung

Unter LiteSpeed Cache > Page Optimization:

CSS Settings

• CSS Minify: ON.
• CSS Combine: ON, wobei Sie prüfen, dass die Website richtig aussieht.
• CSS Combine External and Inline: ON.
• Generate UCSS: OFF.
• UCSS Inline: OFF.
• Load CSS Asynchronously: OFF. Wenn Sie es ausprobieren möchten, aktivieren Sie es und prüfen Sie, dass die Website nicht kurz ohne Styles erscheint.
• CCSS Per URL: OFF.
• Inline CSS Async Lib: ON.
• Font Display Optimization: Default.

JS Settings

• JS Minify: ON.
• JS Combine: ON, wobei Sie prüfen, dass kein Plugin und nicht das Theme kaputtgeht.
• JS Combine External and Inline: ON.
• Load JS Deferred: Beginnen Sie mit OFF und probieren Sie Deferred. Das verbessert die Punktzahl am stärksten, verursacht aber auch die meisten Fehler (Menüs, Slider, Cookie-Hinweise). Wenn etwas nicht funktioniert, tragen Sie die Datei unter JS Excludes in der Registerkarte Tuning ein oder stellen Sie wieder auf OFF.

HTML Settings

• HTML Minify: ON.
• Load Google Fonts Asynchronously: ON, wenn Ihr Theme Schriftarten von Google Fonts von den Servern von Google lädt.

Media Settings

• Lazy Load Images: ON. Bilder weiter unten werden beim Scrollen geladen.
• Responsive Placeholder: ON. Reserviert den Platz des Bildes, während es lädt.

VPI

Viewport Images (VPI) analysiert jede Seite und erkennt, welche Bilder ohne Scrollen auf dem Desktop (1300×900 px) und auf dem Handy (480×800 px) zu sehen sind. Diese werden vom verzögerten Laden ausgenommen und sofort angezeigt; die übrigen warten weiter auf das Scrollen. Das verbessert den LCP in PageSpeed Insights.

Aktivieren Sie Viewport Images und Viewport Images Cron nur, wenn Lazy Load Images aktiviert ist.

Media Excludes

Hier tragen Sie bestimmte Bilder ein, die nicht verzögert geladen werden sollen, zum Beispiel das Logo oder das Hauptbild der Startseite.

Localization

Wenn Ihre Website viele Kommentare oder ein Forum hat, aktivieren Sie Gravatar Cache: Er speichert die Avatare auf Ihrem Server, statt sie bei jedem Besuch bei Gravatar abzurufen. Unter Localize Resources können Sie dasselbe mit externen Skripten wie dem von Google Analytics tun.

Tuning

Wenn eine Optimierung etwas kaputt macht, schließen Sie hier die betroffenen CSS- oder JS-Dateien aus, damit LiteSpeed sie nicht anfasst, ohne die Optimierung für den Rest abzuschalten.

Werkzeuge

Unter LiteSpeed Cache > Toolbox:

• Purge: leert den Cache einer Seite, der CSS/JS-Dateien oder alles. Wenn Sie etwas ändern und es nicht sehen, leeren Sie zuerst das Betroffene und, wenn das nicht reicht, Purge All.
• Import / Export: Wenn Sie mehrere Websites haben, exportieren Sie die Konfiguration einer Website und importieren Sie sie in eine andere, damit Sie die Einstellungen nicht wiederholen müssen. Prüfen Sie danach die Ausschlüsse, die von jeder Website abhängen.

Die Datenbank optimieren

Die Datenbank speichert alles: Beiträge, Seiten, Kommentare, Konfiguration der Plugins und des Themes. Mit der Zeit sammeln sich Revisionen, Entwürfe, Spam und temporäre Daten an, die sie schwerer machen.

Unter LiteSpeed Cache > Database haben Sie alles zur Hand:

• Bereinigen von Revisionen, automatischen Entwürfen, Papierkorb, Spam-Kommentaren und abgelaufenen Transients.
• Tabellen optimieren.
• Tabellen, die noch MyISAM verwenden, in InnoDB umwandeln.

Erstellen Sie vorher ein Backup der Datenbank. Wenn Sie nicht alle Revisionen verlieren möchten, können Sie in der Einstellungsregisterkarte dieses Bereichs begrenzen, wie viele pro Beitrag erhalten bleiben.

Für gründlichere Bereinigungen gibt es SQL-Abfragen zum Entfernen verwaister Daten.

Objekt-Cache mit Redis

Das ist der Extrapunkt, der bei Shops, Websites mit registrierten Benutzern oder Seiten, die sich nicht cachen lassen, den Unterschied macht: Er speichert die Ergebnisse der Abfragen, die WordPress wiederholt, im Arbeitsspeicher und erspart es, sie erneut von der Datenbank abzufragen.

Alle Tarife enthalten Redis. Es ist in wenigen Minuten aktiviert, wenn Sie Was der Objekt-Cache ist und wie Sie ihn mit Redis aktivieren folgen.

Die Bilder optimieren

Bilder sind meist das Schwerste an einer Seite.

Abmessungen

Das sind Breite und Höhe in Pixeln. Wenn Sie ein Foto mit 2000×2000 px hochladen und es mit 400×400 px anzeigen, lädt der Browser des Besuchers trotzdem das mit 2000×2000 px herunter. Laden Sie die Bilder in der Größe hoch, in der sie angezeigt werden, und verkleinern Sie sie vorher mit einem beliebigen Editor (Photoshop, GIMP oder dem Ihres Systems).

Bereits hochgeladene Bilder verkleinern Plugins wie Smush oder Imsanity gesammelt auf eine Maximalgröße.

Dateigröße

Das ist der Platz, den die Datei belegt. Verlustfreies Komprimieren verringert die Größe stark, ohne dass man es merkt. Sie haben drei Möglichkeiten (verwenden Sie für dieselben Bilder nur eine):

• Die Bildoptimierung von LiteSpeed Cache, die wir oben konfiguriert haben und die zusätzlich WebP erzeugt.
• Der Bildoptimierer im Kundenbereich, der die JPG- und PNG-Dateien des Kontos, einer Domain oder eines Ordners komprimiert.
• Desktop-Programme wie ImageOptim (Mac) oder FileOptimizer (Windows): Sie laden den Ordner wp-content/uploads herunter, verarbeiten ihn und laden ihn wieder hoch.

CDN für statische Inhalte

Ein CDN ist ein weltweit verteiltes Servernetz, das Kopien der Bilder, CSS- und JavaScript-Dateien Ihrer Website speichert und sie vom Server ausliefert, der dem Besucher am nächsten ist. Es lohnt sich vor allem, wenn Sie Besucher aus mehreren Ländern haben.

Wir empfehlen zwei:

• QUIC.cloud, das CDN von LiteSpeed, integriert in LiteSpeed Cache: QUIC.cloud in WordPress konfigurieren.
• Cloudflare, sehr einfach einzurichten, indem Sie die DNS der Domain ändern: Cloudflare für mehr Leistung und Sicherheit. Kopieren Sie vor dem Ändern der DNS alle Ihre Einträge, auch die für E-Mail.

Die Tabelle wp_options prüfen

Die Tabelle wp_options und ihre Autoload-Daten sind einer der häufigsten Engpässe und bleiben selbst erfahrenen Administratoren oft verborgen. Die Abfragen, um sie zu prüfen, finden Sie in die Tabelle wp_options und die Autoload-Daten optimieren.

Das Plugin finden, das die Website bremst

Wenn die Website nach alldem immer noch langsam ist, steckt fast immer ein schlecht programmiertes oder fehlerhaftes Plugin dahinter. Es von Hand unter Dutzenden Plugins zu finden, ist schwierig.

Dafür gibt es PHP X-Ray: Es analysiert eine Seite und zeigt Ihnen, wie viel Zeit jedes Plugin, jede SQL-Abfrage und jeder externe Aufruf verbraucht. So wissen Sie genau, wer der Schuldige ist.

Das Speicherlimit erhöhen

WordPress legt ein niedriges Speicherlimit fest. Es zu erhöhen beschleunigt die Website nicht, vermeidet aber Fehler mit anspruchsvollen Plugins oder mit WooCommerce: memory_limit in WordPress erhöhen.

Weniger Plugins, und Vorsicht bei Sicherheits-Plugins

Der riesige Plugin-Katalog ist der große Vorteil von WordPress und zugleich sein schlimmster Feind bei der Leistung: Wir sehen oft Installationen mit mehr als 50 Plugins, von denen jedes seinen Teil zur Langsamkeit beiträgt.

Prüfen Sie jedes Plugin und fragen Sie sich, ob Sie es wirklich brauchen. Wenn es Ihren Besuchern oder Ihrer Arbeit nichts bringt, löschen Sie es.

Sicherheits-Plugins, die bei jedem Besuch oder im Hintergrund Dateien scannen, gehören zu denen, die am meisten Ressourcen verbrauchen, und unsere Server übernehmen diese Arbeit bereits. Das erklären wir in Sicherheits-Plugins und WordPress: unsere Meinung. Die Zwei-Faktor-Authentifizierung dagegen lohnt es sich beizubehalten.