Ein langsamer Shop verliert Umsatz gleich zweimal: einmal auf der Produktseite, wenn der Besucher geht, bevor sie geladen ist, und einmal an der Kasse, wenn ein defekter Warenkorb oder ein eingefrorenes Zahlungsfeld ihn vertreibt. Die meisten Performance-Tipps behandeln einen Shop wie einen Blog. Genau so bleiben Warenkörbe leer, stimmen Preise nicht mehr und reagieren Zahlungsbuttons nicht mehr.

Dieser Leitfaden ist die Landkarte. Er zeigt, was sich in einem Shop optimieren lässt, was nie angetastet werden darf, und verlinkt für jedes Problem den ausführlichen Leitfaden.

Ein Shop sind zwei Websites in einer

Der Katalog umfasst die Startseite, die Kategorieseiten und die Produktseiten. Jeder Besucher sieht dasselbe, daher lassen sich diese Seiten wie jede andere Seite cachen, kürzen und verzögern.

Die Transaktion umfasst Warenkorb, Kasse und Kundenkonto. Jeder Besucher sieht seine eigenen Inhalte: seine Artikel, seine Adresse, seine Bestellungen. Diese Seiten dürfen nie aus einem Cache ausgeliefert werden, und Optimierungen, die auf einem Snapshot der Seite beruhen, gelten für sie nicht.

Dazwischen gibt es noch einen dritten Zustand: ein Besucher, der mit Artikeln im Warenkorb durch den Katalog stöbert. Die Seite wirkt öffentlich, aber der Header zeigt seinen Warenkorb. WooCommerce kennzeichnet diesen Besucher mit Cookies wie woocommerce_items_in_cart und wp_woocommerce_session_, und ein korrekter Seiten-Cache hält sich bei ihm heraus.

Kurz gefasst

Katalog: cachen und konsequent optimieren.
Warenkorb, Kasse, Kundenkonto: nie cachen, nie das CSS kürzen, nie Zahlungsskripte verzögern.
Ein Besucher mit Artikeln im Warenkorb: den Seiten-Cache umgehen, auch auf Katalogseiten.

Ein Seiten-Cache, der den Warenkorb respektiert

Ein Seiten-Cache ist der größte Gewinn in einem Shop und zugleich die gefährlichste Einstellung. Drei Regeln:

Schließen Sie die Transaktionsseiten aus: Warenkorb, Kasse und alle Seiten des Kundenkontos. Wird eine gecachte Kasse ausgeliefert, kann ein Kunde die Daten eines anderen sehen.
Umgehen Sie den Cache für Besucher mit Warenkorb oder Session: Sonst zeigt der Header jemandem, der gerade ein Produkt hinzugefügt hat, einen leeren Warenkorb oder die Warenkorb-Anzahl eines anderen Besuchers.
Achten Sie auf die Query-Strings: Links mit add-to-cart, Tracking-Parameter wie utm_source oder gclid und Filter. Jede eigene URL kann zu einem Cache-Miss werden.

Die Geolokalisierungsfalle. Die WooCommerce-Option „Geolokalisieren (mit Seiten-Caching-Unterstützung)“ hängt an die URLs einen Parameter v an, damit jedes Land seine eigene gecachte Version bekommt. Brauchen Sie keine Preise oder Steuern pro Land, zersplittert dieser Modus Ihren Cache umsonst. Brauchen Sie sie doch, sollten Sie wissen, dass jede Katalogseite nun in so vielen Versionen existiert, wie es Standorte gibt.

Unnötig gesetzte Cookies. Ein neuer Besucher mit leerem Warenkorb sollte auf einer Katalogseite überhaupt kein Cookie erhalten. Ein einziger Header Set-Cookie genügt, damit die meisten CDNs, Cloudflare eingeschlossen, das Caching der Seite verweigern und viele Seiten-Caches sich heraushalten. Die üblichen Verdächtigen: ein Plugin, das für jeden Besucher eine WooCommerce-Session startet (Wunschlisten, Währungsumschalter, zuletzt angesehene Produkte), oder ein Cookie für den Warenkorbzähler, das selbst bei leerem Warenkorb geschrieben wird. Prüfen Sie es als neuer Besucher:

Terminal

# Eine Katalogseite als neuer Besucher mit leerem Warenkorb: Es darf keine Zeile zurückkommen.
curl -s -o /dev/null -D - https://your-store.com/product/any-product/ | grep -i "set-cookie"

Kommt ein Cookie zurück, suchen Sie das Plugin, das es setzt, und sorgen Sie dafür, dass es wartet, bis der Besucher tatsächlich etwas in den Warenkorb legt.

Cart Fragments: die Anfrage auf jeder Seite

Der Mini-Warenkorb im Header wird durch eine AJAX-Anfrage aktuell gehalten, wc-ajax=get_refreshed_fragments, gesendet von wc-cart-fragments.js. Sie wird nie gecacht und trifft daher bei jedem Seitenaufruf, auf dem sie läuft, PHP und die Datenbank.

Seit WooCommerce 7.8 wird das Skript standardmäßig nicht mehr auf jeder Seite geladen, sondern nur dort, wo das klassische Mini-Warenkorb-Widget es braucht. Viele Themes laden es trotzdem überall. Prüfen Sie den Network-Tab einer Katalogseite: Wird die Anfrage auf Seiten ohne Mini-Warenkorb ausgelöst, beschränken Sie sie auf die Seiten, die einen haben. Entfernen Sie sie nicht einfach dort, wo der Mini-Warenkorb existiert, sonst aktualisiert sich die Warenkorb-Anzahl nicht mehr.

Wenn Optimierungen den Mini-Warenkorb verschwinden lassen oder er sich nicht mehr öffnet, stehen Ursache und Lösung in unserem Leitfaden zum WooCommerce-Mini-Warenkorb.

Produktbilder: der schwerste Teil des Katalogs

Vorschaubilder in Kategorie-Rastern: WooCommerce gibt mehrere Größen aus; der Browser wählt nur dann die richtige, wenn das Attribut sizes zum Raster passt. Ein falsches sizes lässt Smartphones Desktop-Vorschaubilder herunterladen. Siehe unseren Leitfaden zu srcset und sizes.
Eine falsch gesetzte Priorität: Seit WordPress 6.3 erhält das erste große Bild einer Seite fetchpriority="high". Auf einer Startseite oder Kategorieseite ist das oft das erste Produkt-Vorschaubild eines Rasters weit unterhalb des sichtbaren Bereichs, das dann mit dem eigentlichen Hauptbild konkurriert.
Das Hauptproduktbild ist meist das Largest Contentful Paint einer Produktseite. Es darf nicht per Lazy Loading geladen werden und kann sich zwischen Mobil und Desktop unterscheiden: unser Leitfaden zum LCP-Bild pro Gerät erklärt, wie Sie das richtige vorladen.
Galerie-, Zoom- und Lightbox-Skripte laden auf jeder Produktseite. Sie sind gute Kandidaten für eine Verzögerung, solange der „In den Warenkorb“-Button und die Variantenauswahl weiter funktionieren.

CSS und JavaScript, ohne den Shop kaputt zu machen

Gekürztes CSS. Used-CSS-Tools rendern einen einzigen Zustand der Seite. In einem Shop erscheinen viele Elemente erst nach einer Aktion: der geöffnete Mini-Warenkorb, eine gewählte Variante, ein Mengenfehler, ein Gutscheinfeld. Ihre Styles werden entfernt. Wie Sie die fehlenden Regeln finden und zurückholen, steht in unserem Leitfaden zu fehlenden Styles. Und auf Warenkorb, Kasse und Kundenkonto kürzen Sie das CSS überhaupt nicht: Der Snapshot wird abgemeldet und mit leerem Warenkorb erstellt und verpasst alles, was der Kunde sieht.

Verzögertes JavaScript. Verzögern Sie nie „In den Warenkorb“, die Variantenskripte, die Checkout-Skripte oder die Zahlungsfelder (Kartenformulare, Wallet-Buttons): Ein Zahlungsfeld, das auf eine erste Interaktion wartet, ist eine verlorene Bestellung. Verzögern Sie, was zum Kaufen nicht gebraucht wird: Chat, Bewertungs-Widgets, Pop-ups, Marketing-Pixel. Die Methode, um herauszufinden, was eine Verzögerung kaputt gemacht hat, steht in unserem Leitfaden zur JavaScript-Verzögerung, und ein Consent-Banner, das spät lädt, wird in unserem Leitfaden zu Consent-Bannern behandelt.

Layout-Verschiebungen. Produktraster, die ihre Bilder ohne Abmessungen laden, Sale-Badges und Bewertungssterne, die spät erscheinen, und fixierte „In den Warenkorb“-Leisten verschieben alle die Seite. Ursachen und Lösungen stehen in unserem CLS-Leitfaden.

Sicher in einem Shop

Cache auf Katalogseiten für anonyme Besucher, Bilder in passender Größe, verzögerte Marketing-Skripte, gekürztes CSS auf Katalog-Templates unter Beibehaltung der Shop-Zustände.

Riskant in einem Shop

Cache oder gekürztes CSS auf Warenkorb, Kasse oder Kundenkonto, verzögerte Zahlungs- oder „In den Warenkorb“-Skripte, ein entferntes Cart-Fragments-Skript dort, wo der Mini-Warenkorb aktiv ist.

Die Seiten, die nie gecacht werden

Warenkorb und Kasse werden für jeden Besucher immer von PHP erzeugt, ihre Geschwindigkeit ist also die rohe Geschwindigkeit Ihres Servers und Ihrer Datenbank. Hier zeigen sich Hosting, PHP-Version und der Zustand der Datenbank. Einige Punkte, die Sie prüfen sollten:

Aktuelle WooCommerce-Versionen speichern Bestellungen in eigenen Tabellen (High-Performance Order Storage), bei Shops mit vielen Bestellungen deutlich schneller als die alte Speicherung als Beiträge.
Die Tabellen der geplanten Aktionen und abgelaufene Kundensessions können in einem stark frequentierten Shop groß werden; prüfen Sie ihre Größe und ihre Bereinigung.
Jedes Plugin, das sich in den Warenkorb oder die Kasse einklinkt, läuft bei jeder dieser Anfragen: Versandrechner, Upsells, Betrugsprüfungen. Messen Sie die Kasse mit und ohne sie auf einer Staging-Kopie.

Den Shop messen, nicht nur die Startseite

Testen Sie eine Kategorieseite und eine Produktseite auf dem Smartphone, abgemeldet, als neuer Besucher.
Testen Sie erneut mit einem Artikel im Warenkorb: Der Cache sollte sich heraushalten und die Seite trotzdem schnell sein.
Gehen Sie nach jeder Änderung den gesamten Kaufprozess durch: in den Warenkorb legen, eine Variante wechseln, einen Gutschein einlösen, bis zum Zahlungsschritt gelangen. Tun Sie das auf einer Staging-Kopie oder im Testmodus Ihres Zahlungsanbieters: Eine Testbestellung in einem Live-Shop ist eine echte Bestellung.
Lesen Sie die Felddaten, nicht nur den Laborwert, wie in unserem Leitfaden zu Labor- und Felddaten erklärt, und ändern Sie eine Einstellung nach der anderen, wie in unserer Methode, ohne Schaden zu optimieren beschrieben.

Mit Mantys Core

Mantys Core kann Ihre gesamte Performance-Schicht übernehmen, Cache inklusive, oder neben Ihrem bestehenden Setup laufen. Bei WooCommerce ist die Grenze zwischen Katalog und Transaktion fest eingebaut:

Der Seiten-Cache speichert nie Warenkorb, Kasse oder Kundenkonto und hält sich bei Besuchern heraus, die einen Warenkorb oder eine WooCommerce-Session haben.
Critical CSS und Used CSS werden nie auf Warenkorb, Kasse oder Kundenkonto angewendet.
Instant Navigation lädt Warenkorb, Kasse, Kundenkonto oder „In den Warenkorb“-Links nie vorab, und das Cache-Warm-up besucht sie nie.
Produkt-Vorschaubilder in Rastern verlieren die falsch gesetzte hohe Priorität, die WordPress ihnen gibt, sodass das eigentliche Hauptbild seine Bandbreite behält.
Die WooCommerce-eigenen Stylesheets sind vor Regeln zum Deaktivieren von Assets geschützt, und jede Einstellung kann sich zwischen Produkt-, Kategorie- und Inhalts-Templates unterscheiden.

Sie halten den Katalog schnell und die Kasse unangetastet, ohne eine Ausschlussliste von Hand zu pflegen.

Zusammenfassung

Ziehen Sie zuerst die Grenze: Der Katalog wird konsequent optimiert, Warenkorb, Kasse und Kundenkonto werden nie gecacht oder gekürzt.
Umgehen Sie den Seiten-Cache für Besucher mit Warenkorb und achten Sie auf Query-Strings und Geolokalisierung.
Ein leerer Warenkorb darf kein Cookie erhalten: Ein einziges Set-Cookie genügt, damit das CDN die Seite nicht mehr cacht.
Laden Sie die Cart Fragments nur dort, wo ein aktiver Mini-Warenkorb sie braucht.
Bringen Sie Produktbilder auf die passende Größe, laden Sie das Hauptbild sofort und korrigieren Sie die Priorität der Raster-Vorschaubilder.
Verzögern Sie nie „In den Warenkorb“-, Varianten-, Checkout- oder Zahlungsskripte; verzögern Sie stattdessen die Marketing-Schicht.
Testen Sie nach jeder Änderung den gesamten Kaufprozess, auf Staging oder im Testmodus.

Kommentare

Hängen Sie an einem ähnlichen Problem? Beschreiben Sie Ihr Setup und was Sie beobachten. Wir lesen jeden Kommentar und antworten.

Noch keine Kommentare. Teilen Sie als Erste oder Erster Ihren Fall.