So beschleunigen Sie WooCommerce mit WP Rocket und Botiga

Kämpfen Sie damit, WooCommerce zu beschleunigen und einen schnell ladenden Shop zu erstellen?

Ein schneller Shop ist unerlässlich, da die Ladezeiten Ihres Shops die Erfahrungen Ihrer Käufer, Ihre SEO-Rankings und sogar die Konversionsraten Ihres Shops beeinflussen.

Gleichzeitig sind WooCommerce-Shops jedoch schwieriger zu optimieren als normale WordPress-Sites, was Sie möglicherweise von den Ladezeiten Ihres Shops enttäuscht hat.

Es gibt mehrere Gründe, aber zwei der wichtigsten sind, dass WooCommerce-Shops viel datenbankintensiver sind als normale WordPress-Sites und Sie nicht alle Seiten Ihres Shops zwischenspeichern können.

Das bedeutet jedoch nicht, dass Sie keine Optionen haben, um einen schnelleren Shop zu erstellen.

Mit den richtigen Tools können Sie Ihren Shop beschleunigen, ohne dass spezielle technische Kenntnisse erforderlich sind.

In diesem Tutorial werde ich Sie auf die einfachste Art und Weise, die ich kenne, durch die WooCommerce-Geschwindigkeitsoptimierung führen: mit dem WP Rocket-Plugin und einigen anderen Tools und Optimierungen.

Unterwegs teile ich echte Leistungstestdaten, damit Sie sehen können, wie sich jede Optimierung auf die Ladezeit des Shops auswirkt.

Am Ende sollten Sie einen viel schneller ladenden Shop haben – und Sie brauchen keinen Informatikabschluss, um alles einzurichten.

Klingt gut? Lassen Sie uns gemeinsam WooCommerce beschleunigen.

Zwei grundlegende WooCommerce-Geschwindigkeitsoptimierungstaktiken vor WP Rocket

Im nächsten Abschnitt werde ich Ihnen alles darüber erzählen, wie Sie WP Rocket verwenden können, um WooCommerce zu beschleunigen und einen schneller ladenden Shop zu erhalten.

Wenn Sie jedoch einen schnell ladenden WooCommerce-Shop wünschen, benötigen Sie dennoch eine starke Leistungsgrundlage. Ansonsten ist die Verwendung von WP Rocket so etwas wie das Auftragen von Lippenstift auf ein Schwein.

Grundsätzlich wird WP Rocket Ihren Shop immer noch schneller machen. Aber wenn Ihre Foundation zu langsam zum Starten ist, haben Sie immer noch einen langsamen Laden. Es wird nur ein wenig … „weniger langsam“.

Also – was ist eine starke Grundlage für die Leistung von WooCommerce?

Sie müssen diese beiden Details festnageln:

1. Wählen Sie ein schnelleres WooCommerce-Design

Das Thema Ihres Shops spielt eine große Rolle dabei, wie schnell er geladen wird. Große, aufgeblähte Themen laden mehr Ressourcen, was Ihre Website verlangsamt.

Auf der anderen Seite bewirkt ein schnelles WooCommerce-Theme das Gegenteil: Es lädt nur das Minimum, das erforderlich ist, um einen gut aussehenden, käuferfreundlichen Shop zu erstellen.

Wir haben einen speziellen Beitrag, in dem wir eine Reihe von Optionen getestet haben, um die schnellsten WooCommerce-Themen zu finden. Wenn Sie jedoch Zeit sparen möchten, können Sie unser kostenloses Botiga-Design verwenden:

Botiga ist von Grund auf auf Leistung ausgelegt. Es verwendet nur Vanille-JavaScript (keine jQuery-Abhängigkeiten), minimiert seinen Code automatisch und ist standardmäßig unter 44,3 KB.

Darüber hinaus werden alle Demo-Sites mit dem nativen Blockeditor erstellt, was bedeutet, dass Sie Ihren Shop nicht mit einem Seitenerstellungs-Plugin belasten müssen, nur damit Ihre Site wie die Demo aussieht.

Gleichzeitig bietet Botiga eine Reihe nützlicher E-Commerce-Funktionen, darunter die folgenden:

• Mehrere Checkout- und Warenkorb-Seitenstile
• Sofortige Produktsuche, um Käufern zu helfen, Produkte schnell zu finden
• Stilvolle Produktempfehlungen
• Produktvariationsmuster
• Mehrere Produktgalerie-Layouts
• Wunschlisten
• Klebrige Add-to-Cart-Leiste

Botiga hat eine voll funktionsfähige kostenlose Version sowie eine 69-Dollar-Pro-Edition, die weitere Funktionen hinzufügt.

Aus diesen Gründen werden wir Botiga als Beispiel für die Beschleunigung unseres Shops verwenden.

Sie können Botiga hier herunterladen oder die Demos durchsuchen, um einige Beispiele zu sehen.

2. Verwenden Sie leistungsoptimiertes WooCommerce-Hosting

Neben der Verwendung eines schnellen Designs sollten Sie sich auch für ein leistungsoptimiertes WordPress-Hosting entscheiden.

Während es verlockend sein kann, sich für das billigste Hosting zu entscheiden, verfügt billiges Shared Hosting normalerweise nicht über die Ressourcen, um mit WooCommerce umzugehen, was zu glanzlosen Ladezeiten und Leistung führt, egal was Sie tun.

Auch hier haben wir einen Artikel, in dem wir eine Reihe von Hosting-Anbietern getestet haben, um das schnellste WordPress-Hosting zu finden. Wenn Sie es eilig haben, sind hier einige gute Optionen, die Sie in Betracht ziehen sollten:

• Kinsta – lies unseren vollständigen Kinsta-Test
• WP Engine – Ich empfehle besonders die dedizierten E-Commerce-Hosting-Pläne, die Elasticsearch enthalten (was die Produktsuchleistung Ihres Shops erheblich verbessern wird).
• Cloudways – Lesen Sie meine vollständige Cloudways-Rezension

So beschleunigen Sie WooCommerce mit WP Rocket

Jetzt ist es an der Zeit, WP Rocket zu verwenden, um die Booster anzulegen und WooCommerce noch schneller zu laden.

Da wir solides Hosting und das schnelle Botiga-Theme für unseren Shop verwenden, lädt es schon ziemlich schnell von selbst. Hier ist ein Screenshot der Leistungsmetriken von WebPageTest, der zeigt, wo wir auf der Startseite beginnen:

Mit WP Rocket können wir es jedoch immer noch schneller laden. Es gibt viele großartige WordPress-Plugins zur Leistungsoptimierung, also warum empfehle ich WP Rocket für WooCommerce?

Nun, Sie können meine vollständige WP Rocket-Rezension lesen, um zu erfahren, warum ich es mag, aber hier ist eine kurze Zusammenfassung der Höhepunkte:

1. Es verfügt über eine sofort einsatzbereite WooCommerce-Kompatibilität . Wenn WP Rocket sieht, dass Sie WooCommerce verwenden, konfiguriert es sich automatisch optimal, wenn es um Grundlagen wie das Caching geht. Dies ist ein großer Vorteil, da eine unsachgemäße Konfiguration des Caching in einem WooCommerce-Shop wichtige Funktionen beeinträchtigen kann.
2. Es ist sehr einfach zu bedienen . Zusätzlich zu dem oben genannten Punkt hat WP Rocket im Allgemeinen eine einfache Benutzeroberfläche, detaillierte Dokumentation und Premium-Support.
3. Es macht Ihre Website viel schneller . Das Beste habe ich mir zum Schluss aufgehoben. WP Rocket funktioniert einfach und leistet hervorragende Arbeit, um WooCommerce-Shops schneller laden zu lassen (und auch andere WordPress-Sites). Es verfügt auch über einzigartige Funktionen wie die Möglichkeit, nicht verwendetes CSS zu entfernen und die Ausführung von JavaScript zu verzögern.

WP Rocket ist ein Premium-Plugin, aber die Zahlung von 49 US-Dollar ist ein kleiner Preis für einen schnelleren WooCommerce-Shop. Es besteht ein direkter Zusammenhang zwischen Seitenladezeiten und Konversionsraten, sodass Sie durch die Beschleunigung Ihres Shops leicht Ihr Geld in Form von höheren Konversionsraten zurückerhalten können.

Stellen Sie zunächst sicher, dass Sie eine Kopie von WP Rocket erwerben. Dann erfahren Sie hier, wie Sie es für WooCommerce einrichten.

1. Installieren Sie das Plugin, um grundlegende Optimierungen zu aktivieren

Gehen Sie zunächst zu Ihrem WooCommerce-Shop (oder richten Sie ihn zuerst ein, wenn Sie noch keinen haben) und installieren und aktivieren Sie WP Rocket:

Sobald Sie das WP Rocket-Plugin aktivieren, werden automatisch die folgenden Funktionen aktiviert, um Ihren Shop zu beschleunigen:

• Seiten- Caching – WP Rocket schließt auch automatisch wichtige WooCommerce-Inhalte aus, um Probleme zu vermeiden, während dennoch so viele Inhalte wie möglich zwischengespeichert werden. Beispielsweise werden neben anderen Kompatibilitätsoptimierungen Ihre Warenkorb- und Checkout-Seiten ausgeschlossen.
• Browser-Caching
• GZIP-Komprimierung
• Cross-Origin-Unterstützung für Webfonts
• Optimierung von Google Fonts-Dateien

In einem WooCommerce-Shop optimiert WP Rocket auch automatisch die AJAX-Anfrage get_refreshed_fragments . Dies ist, was WooCommerce verwendet, um den Warenkorbinhalt eines Käufers dynamisch zu aktualisieren.

Auch diese Optimierungen erfolgen alle automatisch, sodass Ihr Shop bereits schneller geladen werden sollte, sobald Sie WP Rocket aktivieren.

So wird die Homepage unseres Shops jetzt geladen, ohne eine einzige Einstellung in WP Rocket zu berühren:

Sie können sehen, dass die Zeit bis zum ersten Byte um etwa 450 ms (von 0,509 auf 0,043 Sekunden) reduziert wurde, was zu einer ähnlichen Reduzierung bei fast allen anderen Metriken führt, einschließlich Largest Contentful Paint (LCP). Die Zeit für Largest Contentful Paint sank von ~1,1 Sekunden auf ~0,7 Sekunden.

Diese Reduzierung ist hauptsächlich auf das WooCommerce-freundliche Seiten-Caching zurückzuführen, das WP Rocket implementiert, obwohl auch die anderen Optimierungen hilfreich sind.

2. Richten Sie Dateioptimierungen ein

Während WP Rocket standardmäßig viele nützliche Funktionen aktiviert, gibt es auch einige wichtige, die Sie manuell aktivieren müssen.

Wechseln Sie zunächst zur Registerkarte Dateioptimierung im Einstellungsbereich von WP Rocket ( Einstellungen → WP Rocket ).

Hier können Sie den CSS- und JavaScript-Code Ihres Shops optimieren, was einen großen Unterschied in der Leistung Ihres Shops ausmachen kann (insbesondere, wenn es um Core Web Vitals und den Lighthouse-Performance-Score geht).

Hier sind die Einstellungen, die ich empfehle:

CSS-Dateien :

• CSS-Dateien minimieren – Das Botiga-Theme minimiert seinen Code bereits standardmäßig, aber dies kann hilfreich sein, um den Code der von Ihnen verwendeten Plugins zu minimieren.
• Optimieren Sie die CSS-Bereitstellung → Entfernen Sie unbenutztes CSS – Dadurch wird unnötiges CSS Seite für Seite entfernt, um die Dateigröße jeder Seite zu verringern.

Ich empfehle nicht , CSS-Dateien zu kombinieren, da dies jetzt nicht wirklich hilfreich ist, da die meisten Qualitätshosts HTTP/2 verwenden.

JavaScript-Dateien :

• Minimieren Sie JavaScript-Dateien
• JS verzögert laden
• JavaScript-Ausführung verzögern

Wie bei CSS empfehle ich nicht, JavaScript-Dateien zu kombinieren.

Um das Funktionieren Ihres Shops sicherzustellen, möchten Sie möglicherweise einige Ausnahmen zur Einstellung für die JavaScript-Ausführung verzögern hinzufügen. Dies verzögert im Wesentlichen das Laden des gesamten JavaScripts, bis ein Benutzer mit Ihrer Website interagiert (z. B. klickt oder scrollt).

Dies ist großartig , um Ihre Zeit für Largest Contentful Paint zu verbessern, aber Sie haben möglicherweise JavaScript, das Sie sofort laden möchten, z. B. Tracking-Skripte (z. B. Google Analytics oder Google Tag Manager) oder einige Plugins, die Sie möglicherweise verwenden.

WP Rocket unterhält eine detaillierte Seite mit allen potenziellen Ausschlüssen, sodass Sie die Skripte nicht herausfinden müssen, um sich selbst auszuschließen. Sie können sie einfach aus diesem WP Rocket-Hilfeartikel kopieren und in das Feld Ausgeschlossene JavaScript-Dateien einfügen.

Wenn Sie beispielsweise Google Analytics ausschließen möchten, konfigurieren Sie es wie folgt:

Nachdem Sie diese Anpassungen vorgenommen haben, können Sie noch mehr Verbesserungen sehen. Die Seitengröße unserer Homepage wurde um etwa 80 KB reduziert und die Zeit für Largest Contentful Paint wurde noch weiter von ~0,7 Sekunden auf ~0,5 Sekunden gesenkt.

3. Optimieren Sie Ihre Medien

An diesem Punkt haben Sie den größten Teil des Leistungswerts aus WP Rocket herausgepresst. Es gibt jedoch einige andere Einstellungsbereiche, die Sie möglicherweise erkunden möchten, um einige zusätzliche Optimierungen vorzunehmen.

Auf der Registerkarte „ Medien “ empfehle ich, Lazy Loading und fehlende Bildabmessungen zu aktivieren. Ersteres hilft Ihnen bei der Leistung und letzteres kann Probleme mit Cumulative Layout Shift (CLS) reduzieren, um die Leistung Ihrer Core Web Vitals weiter zu verbessern:

4. Fügen Sie ein Content Delivery Network hinzu (für Global Stores)

Mit einem Content Delivery Network (CDN) können Sie die Ladezeiten Ihres Shops beschleunigen, indem Sie statische Assets wie Bilder und Skripte auf einem Netzwerk globaler Server zwischenspeichern.

Anschließend können Besucher diese statischen Dateien von dem Server herunterladen, der sich physisch am nächsten zu ihnen befindet, was die Downloadzeiten verkürzt und Ihren Shop beschleunigt.

Wenn Ihr Geschäft nur Käufer in einem bestimmten geografischen Gebiet anspricht, z. B. innerhalb des Vereinigten Königreichs, werden Sie wahrscheinlich nicht viel von einem CDN profitieren.

Aber wenn Sie Käufer auf der ganzen Welt ansprechen, z. B. in Großbritannien und den USA, dann ist ein CDN eine weitere großartige Option, um WooCommerce zu beschleunigen.

Im CDN -Bereich bietet Ihnen WP Rocket zwei Optionen zum Hinzufügen eines CDN zu Ihrem Geschäft:

1. Sie können den offiziellen RocketCDN-Dienst nutzen, der nur 7,99 $ pro Monat für unbegrenzte Bandbreite kostet. Es basiert auf dem globalen Netzwerk von StackPath. Dies ist die einfachste Option, da sie eine automatische Konfiguration bietet.
2. Sie können jedes CDN von Drittanbietern integrieren, indem Sie WP Rocket Ihre URLs umschreiben lassen. Beliebte Optionen sind StackPath, KeyCDN, Bunny CDN, CloudFront und andere.

Wenn Sie sich beim Einrichten Ihres eigenen CDN nicht sicher fühlen, empfehle ich die Verwendung des RocketCDN-Dienstes, da er ein ziemlich gutes Preis-Leistungs-Verhältnis bietet, da Sie unbegrenzte Bandbreite zu einem Pauschalpreis erhalten:

Fehlerbehebung bei Problemen mit WP Rocket auf WooCommerce

Während das Befolgen der obigen Anweisungen zu einem schnelleren WooCommerce-Shop ohne Probleme führen sollte, gibt es einige seltene Szenarien, in denen Sie möglicherweise auf kleinere Probleme stoßen.

Das häufigste Beispiel wären Probleme mit irgendeiner Art von dynamischen Inhalten wie Benutzer-Wunschlisten, kürzlich angesehenen Artikeln oder standortspezifischen Inhalten (z. B. unterschiedliche Preise für verschiedene Länder).

Wenn ein Benutzer beispielsweise ein Produkt besucht, das er zu seiner Wunschliste hinzugefügt hat, möchten Sie dies möglicherweise auf der Produktseite anzeigen. Aber in einigen Fällen kann Caching hier zu wackelndem Verhalten führen.

Also – wie können Sie das beheben? Lassen Sie uns einige Tipps durchgehen.

Versuchen Sie zunächst, Plug-ins für dynamische Inhalte zu verwenden, die Cache-kompatibel codiert sind. Im Wesentlichen bedeutet dies, dass das Plugin seine dynamischen Inhalte mit JavaScript oder AJAX anstelle von PHP generiert.

Wenn Sie sich nicht sicher sind, können Sie sich an den Entwickler des Plug-ins wenden, bei dem Sie Probleme haben. Einige Plugins enthalten integrierte Kompatibilitätstools. Beispielsweise verfügt das YITH WooCommerce Wishlist-Plugin über eine Einstellung zum Aktivieren des AJAX-Ladens, wodurch alle Probleme mit dem Caching behoben werden.

Das WP Rocket-Team hat auch einige Kompatibilitäts-Plugins/Tools für beliebte WooCommerce-Plugins erstellt, die Probleme verursachen könnten:

• YITH WooCommerce Wishlist-Plugin
• Natives WooCommerce-Widget für zuletzt angesehene Produkte
• YITH WooCommerce Plug-in für kürzlich angesehene Produkte

Wenn die oben genannten Korrekturen keine Option sind, besteht eine weitere mögliche Lösung darin, eine Cache-Ausschlussregel hinzuzufügen, die auf das Cookie abzielt, das das Plugin setzt. Dies ist fortgeschrittener, aber Sie können den Cache für Benutzer umgehen, die dynamische Inhalte sehen müssen.

Sie können versuchen, Cookie-Informationen in der Dokumentation des Plugins zu finden, oder einen Entwickler beauftragen, dies für Sie herauszufinden. Dann können Sie Cookie-Cache-Ausschlussregeln im Bereich „Erweiterte Regeln“ von WP Rocket einrichten:

Andere nützliche WooCommerce-Plugins zur Geschwindigkeitsoptimierung jenseits von WP Rocket

WP Rocket kann fast alles, was Sie für die Leistungsoptimierung von WooCommerce benötigen. Aber es gibt eine große Ausnahme:

Bilder!

Ihr Geschäft wird wahrscheinlich eine Menge Produktbilder haben. Und wenn Sie nicht aufpassen, können diese Produktbilder Ihren Shop verlangsamen (insbesondere Ihre Produkt- und Shopseiten).

Die Lösung besteht darin, die Bilder Ihrer Website zu optimieren, indem Sie sie komprimieren und ihre Größe ändern. Sie können dies automatisch erreichen, indem Sie ein Bildoptimierungs-Plugin verwenden.

Wir haben einen ganzen Beitrag über die besten WordPress-Bildoptimierungs-Plugins, aber hier sind einige der besten Optionen:

• Imagify – dieses Plugin stammt vom selben Entwickler wie WP Rocket
• ShortPixel – das ist das Plugin, das ich auf meinen eigenen Seiten verwende
• WP Compress – eine weitere hochwertige Option; Erfahren Sie mehr in unserem WP Compress-Test

Neben Bildern ist ein weiteres nützliches Tool für große Geschäfte eine Art Produktsuchlösung.

Wenn Sie viele Produkte haben, kann die Produktsuche sehr ressourcenintensiv sein, da sie viele umfangreiche Datenbankabfragen verursacht.

Sie können dies mit Off-Server-Suchlösungen wie Elasticsearch (über das ElasticPress-Plugin) oder Jetpack Search (das ebenfalls auf Elasticsearch basiert, aber einfacher zu implementieren ist) beheben.

Beschleunigen Sie noch heute Ihren WooCommerce-Shop

Wenn Sie möchten, dass Ihr WooCommerce-Shop erfolgreich ist, ist es wichtig, dass er schnell geladen wird.

Um Ihr Geschäft erfolgreich aufzustellen, ist es wichtig, zunächst ein starkes Fundament zu schaffen:

1. Wählen Sie ein schnell ladendes WooCommerce-Theme wie das kostenlose Botiga-Theme.
2. Nutze leistungsoptimiertes WordPress-Hosting wie Kinsta oder WP Engine.
3. Richten Sie die Grundlage Ihrer E-Commerce-Site ein.

Von dort aus kann WP Rocket Ihnen bei der Implementierung einer Reihe von WooCommerce-Leistungsoptimierungen helfen, darunter WooCommerce-kompatibles Caching, CSS- und JavaScript-Optimierung und mehr.

Wenn Sie auch ein Bildoptimierungs-Plugin hinzufügen, um Ihre Produktbilder zu optimieren, sollten Sie mit einem leichten, schnellen WooCommerce-Shop ausgestattet sein.

Haben Sie noch Fragen, wie Sie WooCommerce mit WP Rocket und Botiga beschleunigen können? Lass es uns in den Kommentaren wissen!