Warum verschwindet mein WooCommerce Mini-Warenkorb, wenn ich Remove Unused CSS aktiviere?

Sie optimieren den Shop, der PageSpeed-Bericht sieht besser aus, und ein paar Stunden später schreibt Ihnen ein Kunde: Das Warenkorb-Symbol tut nichts. Er hovert es, nichts öffnet sich. Oder es öffnet sich leer, oder ganz ohne Styling. Sie haben den Warenkorb nie angefasst. Sie haben eine CSS-Optimierung aktiviert. Was ist also passiert?

Der Mini-Warenkorb ist das kleine Warenkorb-Symbol in Ihrem Header, meist mit einer Artikelanzahl, sowie das Panel, das sich beim Hovern oder Tippen öffnet und auflistet, was im Korb liegt. Genau dieses Panel ist der Teil, der kaputtgeht, und dafür gibt es zwei Ursachen, oft gemeinsam.

Was ein Mini-Warenkorb eigentlich ist (und warum er so anfällig ist)

Beim Laden der Seite soll das Panel nicht sichtbar sein. Es bleibt versteckt: display:none, oder opacity:0 mit visibility:hidden, oder außerhalb des sichtbaren Bereichs verschoben. Nichts zeigt sich, bis Sie interagieren.

Zwei Dinge lassen es erscheinen. Das CSS hält den versteckten Zustand und den offenen Zustand, also die Regeln, die es auf sichtbar umschalten und das Panel positionieren. Das JavaScript übernimmt das Umschalten: Beim Hovern oder Tippen fügt es eine Klasse hinzu, die das Panel einschaltet, oder es erstellt und injiziert den Warenkorb-Inhalt spontan. Bei WooCommerce übernimmt das üblicherweise wc-cart-fragments.js, das Skript, das den Mini-Warenkorb und die Artikelanzahl per AJAX synchron hält.

Entfernen Sie das richtige CSS, oder verhindern Sie, dass das richtige Skript läuft, und das Panel erscheint nie. Beides passiert, wenn Sie optimieren, ohne dem Tool zu sagen, dass es den Warenkorb in Ruhe lassen soll.

Ursache 1: Das CSS ist versteckt, also wird es entfernt

Ein used-CSS- oder Remove-Unused-CSS-Durchlauf behält die Styles für alles, was beim Rendern der Seite sichtbar ist, und verwirft den Rest. Ihr Mini-Warenkorb-Panel ist in diesem Moment versteckt, also entscheidet das Tool, dass seine Styles totes Gewicht sind, und entfernt sie.

Dadurch gehen zwei Dinge kaputt. Entweder ist die Regel weg, die das Panel beim Öffnen erscheinen ließ, sodass Hovern sichtbar nichts bewirkt. Oder das Styling des Panels selbst ist weg, sodass es ungestylt öffnet: eine nackte Liste ohne Positionierung und ohne Hintergrund, die in die Seite hineinläuft.

Das ist derselbe Mechanismus, der ein verstecktes mobiles Menü oder ein Such-Overlay entfernt. Die vollständige Erklärung, und die Lösung, die hält, finden Sie in unserem Leitfaden zu Critical CSS, das Menüs und Overlays zerstört.

Key infos

Das Panel ist beim Laden versteckt, also stuft ein used-CSS-Durchlauf seine Styles als nutzlos ein und entfernt sie.
Sie verlieren entweder den offenen Zustand (nichts erscheint) oder das Styling des Panels (es öffnet fehlerhaft).
Dieselbe Ursache wie bei einem entfernten mobilen Menü oder Such-Overlay.

Ursache 2: Das JavaScript feuert nie

Selbst wenn die Styles intakt sind, braucht das Panel sein Skript, um sich zu öffnen. Wenn Sie JavaScript verzögern oder aufschieben, ist das Skript, das die offene Klasse hinzufügt, oder das, welches den Warenkorb erstellt, möglicherweise nicht da, wenn der Besucher hovert.

Bei WooCommerce ist der übliche Verdächtige wc-cart-fragments.js, dazu das Theme- oder Side-Cart-Skript, das den Hover behandelt, sowie jQuery darunter. Verzögern Sie die Kette, und die Anzahl aktualisiert sich nicht mehr, oder das Panel bleibt leer, oder das Symbol ist schlicht tot.

JavaScript aufzuschieben lohnt sich, aber die Warenkorb-Interaktion muss weiterlaufen. Die Methode, die gesamte Abhängigkeitskette per URL-Fragment auszuschließen, mit einer Absicherung, die frühes Laden toleriert, ist dieselbe, die ein zweifach-tippendes Burger-Menü repariert, behandelt in dem Burger-Menü-Leitfaden.

Eine Warnung: Deaktivieren Sie nicht wc-cart-fragments.js, um sich den AJAX-Request zu sparen. Dieser Request hat auf jeder Seite echte Kosten, und Sie können einschränken, wo er läuft, aber ihn abzuschalten tötet einen funktionierenden Mini-Warenkorb. Schließen Sie ihn von der Verzögerung aus, entfernen Sie ihn nicht.

Key infos

Das Panel braucht ein Skript, um sich zu öffnen; eine JS-Verzögerung kann verhindern, dass dieses Skript rechtzeitig läuft.
Bei WooCommerce ist das üblicherweise wc-cart-fragments.js sowie das Theme- oder Side-Cart-Skript plus jQuery.
Schließen Sie cart fragments von der Verzögerung aus, entfernen Sie es niemals, sonst hört der Warenkorb auf, sich live zu aktualisieren.

In 30 Sekunden diagnostizieren

Schalten Sie die used-CSS-Option kurz aus. Funktioniert der Mini-Warenkorb wieder, ist das CSS der Übeltäter. Schalten Sie sie wieder ein und gehen Sie direkt zur Safelist.

Sind die Styles eindeutig vorhanden, öffnet sich das Panel aber trotzdem nicht, beobachten Sie den Network-Tab: Hovern Sie das Symbol und prüfen Sie, ob wc-cart-fragments.js und das Theme-Skript geladen werden und laufen. Feuern sie spät, oder gar nicht, ist die Verzögerung der Übeltäter.

Und prüfen Sie sowohl Mobile als auch Desktop. Viele Engines pflegen eine separate optimierte Version pro Gerät, sodass ein Warenkorb, der auf dem Desktop funktioniert, auf Mobile trotzdem kaputt sein kann.

Die hinzuzufügenden Ausnahmen

CSS behalten (Safelist). Schützen Sie die Selektoren des Mini-Warenkorbs vor dem Beschnitt. Die gängigen WooCommerce-Selektoren:

das Core-Widget: .widget_shopping_cart, .widget_shopping_cart_content, .woocommerce-mini-cart, .mini_cart_item, .cart_list, .cart-contents
der Block-Warenkorb, falls Sie ihn nutzen: .wc-block-mini-cart und seine Kindelemente
der offene Zustand, der am wichtigsten ist: welche Klasse auch immer das Panel auf Ihrer Seite auf sichtbar umschaltet (oft .active, .is-open, .open, .show)
der Wrapper Ihres Themes oder Side-Cart-Plugins, den Sie von der Seite ablesen müssen

Eine Safelist hängt vom Plugin und der Konfiguration ab, also driftet sie mit der Zeit. Die Version, die einen Rebuild übersteht, besteht darin, den versteckten Zustand und das vollständige Open-Styling inline in einen Block zu setzen, den der Optimizer angewiesen wird in Ruhe zu lassen, platziert nach wp_head(). Diese Methode finden Sie in dem Critical-CSS-Leitfaden.

JS behalten (Ausnahmen). Nehmen Sie die Skripte des Warenkorbs als Kette aus der Verzögerung heraus:

wc-cart-fragments.js, das den Mini-Warenkorb erstellt und aktualisiert
jQuery und jQuery Migrate, von dem es abhängt
das Skript Ihres Themes oder Side-Cart-Plugins, das den Hover oder das Umschalten behandelt

Zielen Sie auf sie per eindeutigem Bestandteil ihrer URL, nicht über das interne Handle, und stellen Sie sicher, dass das ausgeschlossene Skript frühes Laden verträgt. Schließen Sie die ganze Kette gemeinsam aus, sonst erhalten Sie das Ergebnis „ausgeschlossen, aber tot“: Der Warenkorb wird als ausgeschlossen geführt und funktioniert trotzdem nicht.

Key infos

Setzen Sie die Selektoren des Mini-Warenkorbs auf die Safelist, vor allem die Klasse, die das Panel öffnet.
Noch besser: Setzen Sie die versteckten und offenen Styles inline in einen nicht optimierbaren Block, damit sie einen Rebuild überstehen.
Halten Sie die JS-Kette per URL aus der Verzögerung heraus: cart fragments, jQuery und das Theme- oder Side-Cart-Skript.

Ein Hinweis für Theme- und Plugin-Entwickler

Wenn Sie den Warenkorb selbst bauen, können Sie all das in eine Ein-Zeilen-Ausnahme verwandeln. Geben Sie der Komponente eine einzige Namespace-Klasse, sagen wir minicart, und beschränken Sie jede Regel darauf: den versteckten Zustand, den offenen Zustand und jedes Kindelement.

CSS

.minicart              { opacity: 0; visibility: hidden; }
.minicart.is-open      { opacity: 1; visibility: visible; }
.minicart .item        { /* ... */ }
.minicart .count       { /* ... */ }

Jetzt ist die gesamte Komponente mit einem einzigen Token auf der Safelist, .minicart, und kein Optimizer kann sie auseinanderreißen. Verteilen Sie dieselben Styles dagegen über generische Selektoren wie .cart-item oder .flyout.open und jeder einzelne braucht seinen eigenen Safelist-Eintrag, was bricht, sobald jemand einen vergisst. Das hilft jedem Optimizer, nicht nur Mantys.

Mit Mantys Core

Mantys Core kann Ihre gesamte Performance-Ebene übernehmen, Cache inklusive, oder sich neben das bestehende Setup stellen, das Sie bereits haben. Bei einem Shop ist der Mini-Warenkorb genau die Art von Element, das es schützen soll.

es respektiert Blöcke, die Sie als nicht optimierbar markieren, sodass die versteckten und offenen Styles des Warenkorbs erhalten bleiben;
es behält per URL-Fragment deklarierte JavaScript-Ausnahmen mit einer Zustandsabsicherung bei, sodass cart fragments und das Hover-Skript weiterlaufen, während der Rest verzögert wird;
es regeneriert CSS Seite für Seite, sodass Ihre Shop-Templates nicht wie eine einfache Landingpage beschnitten werden;
und es behandelt Mobile und Desktop getrennt, sodass ein Warenkorb, der auf dem einen funktioniert, auf dem anderen nicht kaputt ist.

So bleibt der Shop funktionsfähig, während das Gewicht fällt, ohne dass Sie eine Safelist ständig im Auge behalten müssen.

Zusammengefasst

Der Mini-Warenkorb ist versteckt, bis jemand ihn hovert, sodass ein used-CSS-Durchlauf seine Styles entfernt und eine JS-Verzögerung das Öffnen verhindert.
Ursache eins ist CSS: Das versteckte Panel wird als nutzlos eingestuft und entfernt. Ursache zwei ist JS: Das Skript, das den Warenkorb öffnet oder erstellt, läuft nie.
Beheben Sie das CSS mit einer Safelist, oder besser noch mit einem nicht optimierbaren Inline-Block für die versteckten und offenen Styles.
Beheben Sie das JS, indem Sie die gesamte Kette, cart fragments plus jQuery plus das Theme-Skript, von der Verzögerung ausschließen, und entfernen Sie cart fragments niemals.
Wenn Sie das Theme selbst bauen, stellen Sie den Warenkorb unter eine einzige Namespace-Klasse, sodass die Ausnahme eine einzige Zeile ist.