„Ungenutztes CSS entfernen“ hat mein Layout kaputt gemacht: So finden Sie die fehlenden Styles

Sie aktivieren „Ungenutztes CSS entfernen“, der Bericht beschwert sich nicht mehr über ungenutzte Bytes, und die Website sieht auf Ihrem Bildschirm gut aus. Dann kommen die Meldungen. Das mobile Menü öffnet sich als nackte Liste. Icons sind zu leeren Quadraten geworden. Ein ganzer Abschnitt der Startseite ist leer. Die Produktseite ist kaputt, aber nur für eingeloggte Kunden. Oder gestern war noch alles in Ordnung, und über Nacht ist eine Seite kaputtgegangen.

Das Abschalten der Option behebt es und verschenkt einen der größten Gewinne bei einem schweren Theme. Dieser Leitfaden erklärt, was das Tool tatsächlich übersieht, wie Sie das Symptom lesen und wie Sie nur die Regeln zurückholen, die fehlen.

Was ein Used-CSS-Durchlauf macht

Das Tool lädt Ihre Seite in einem Headless-Browser, bei einer einzigen Bildschirmgröße, ausgeloggt, ohne etwas anzuklicken. Es erfasst, welche CSS-Regeln in diesem Moment auf ein Element passen, behält diese und verwirft den Rest. Die Seite wird dann mit diesem gekürzten Stylesheet statt mit den vollständigen Dateien des Themes ausgeliefert.

Die Schwäche ist eingebaut: Die Momentaufnahme ist ein Zustand einer Seite auf einem Gerät. Jede Regel, die nur in einem anderen Zustand zählt, wird als nutzlos eingestuft und entfernt.

Die sechs blinden Flecken und ihre Signatur

1. Zustände, die nach einem Klick erscheinen. Ein geöffnetes Menü, ein Modal, ein Mini-Warenkorb, der zweite Tab eines Tab-Blocks: Ihre „open“-Klasse wird per JavaScript hinzugefügt, war also während der Momentaufnahme nicht auf der Seite. Signatur: Das Element öffnet sich ungestylt oder erscheint gar nicht. Zwei ausführliche Fälle: Menüs und Overlays und der WooCommerce-Mini-Warenkorb.

2. Das andere Gerät. Regeln in einer Mobile-Media-Query greifen nur, wenn in mobiler Breite gerendert wird. Wurde das gekürzte CSS in Desktop-Breite erstellt und an Smartphones ausgeliefert, verliert das mobile Layout seine Regeln. Signatur: nur auf einem Gerät kaputt.

3. Inhalte, die später oder für jemand anderen kommen. Per Widget geladene Bewertungen, per AJAX geladene ähnliche Produkte, ein Infinite Scroll, die Admin-Leiste, ein gefüllter Warenkorb, ein Hinweis für eingeloggte Nutzer. Nichts davon existierte für den ausgeloggten Besucher der Momentaufnahme. Signatur: bei Ihnen im privaten Fenster in Ordnung, kaputt für einen Kunden in einem bestimmten Zustand.

4. Icon-Schriften. Eine Icon-Schrift wird mit @font-face deklariert und über Klassen verwendet. Nutzt keine behaltene Regel diese Schriftfamilie, fällt die Deklaration mit weg, und jedes später hinzugefügte Icon hat nichts mehr, womit es gezeichnet werden kann. Signatur: leere Quadrate oder Lücken, wo Icons sein sollten.

5. Einblendanimationen. Page Builder verstecken ein Element oft beim Laden (opacity:0) und lassen ein Skript die Klasse hinzufügen, die es einblendet. Wurde die Regel hinter dieser Klasse oder die zugehörigen @keyframes entfernt, bleibt das Element dauerhaft unsichtbar. Signatur: ein leerer Abschnitt, der erscheint, sobald die Optimierung aus ist.

6. Ein fehlgeschlagenes Rendering. Während der Generierung kam ein Stylesheet nicht an: ein Timeout, eine blockierte Anfrage oder ein Builder, der in diesem Moment seinen eigenen CSS-Cache neu erzeugte. Das Ergebnis sieht fast richtig aus, nur einer Komponente fehlen die Styles, und es bleibt bis zur nächsten Generierung im Cache. Signatur: nur auf manchen Seiten kaputt, ab einem genauen Zeitpunkt, und durch Neugenerieren behoben.

Schritt 1: Bestätigen, dass das gekürzte CSS die Ursache ist

Laden Sie die kaputte Seite mit umgangener Optimierung (die meisten Tools bieten dafür einen URL-Parameter oder einen Schalter pro Seite) oder mit abgeschalteter Optimierung, nachdem Sie jede Cache-Ebene geleert haben. Ist die Seite in Ordnung, ist das gekürzte CSS die Ursache. Ist sie weiterhin kaputt, suchen Sie woanders: Eine JavaScript-Verzögerung erzeugt sehr ähnliche Symptome, und der Leitfaden zur JavaScript-Verzögerung behandelt diesen Fall.

Reproduzieren Sie den Fehler dann in dem Zustand, der ihn auslöst: die richtige Gerätebreite, die Interaktion (Menü öffnen, mit der Maus über den Warenkorb fahren), der richtige Besucherzustand (eingeloggt, Warenkorb gefüllt), und scrollen Sie bis zum kaputten Bereich.

Schritt 2: Die fehlende Regel finden

Öffnen Sie die nicht optimierte Version in einem Tab und die optimierte in einem anderen. Klicken Sie in beiden mit der rechten Maustaste auf das kaputte Element, wählen Sie Untersuchen und vergleichen Sie das Panel Styles. Die Regeln, die links vorhanden sind und rechts fehlen, sind die fehlenden; das Panel zeigt ihren Selektor und die Datei, aus der sie stammen.

Um einen Selektor direkt zu prüfen, fügen Sie dies in die Konsole jeder Version ein:

// Durch die verdächtige Klasse ersetzen (offener Zustand, Icon, Animation).
const needle = '.is-open';
[...document.styleSheets]
  .flatMap(s => { try { return [...s.cssRules]; } catch (e) { return []; } })
  .filter(r => (r.selectorText || r.name || '').includes(needle.replace(/^[.#]/, '')))
  .map(r => r.cssText.slice(0, 120));

Ein leeres Ergebnis auf der optimierten Seite und eine Liste auf dem Original sagen Ihnen genau, welche Regel Sie zurückholen müssen. Stylesheets von einer anderen Domain können bei dieser Prüfung verborgen bleiben; das Styles-Panel zeigt sie trotzdem.

Schritt 3: Zurückholen, was fehlt, und nur das

Passen Sie die Lösung an den blinden Fleck an:

• Zustände nach einem Klick (1): Nehmen Sie die Zustandsklassen in die Safelist auf, zum Beispiel is-open, active, show oder das eigene Präfix der Komponente. Hat eine Komponente viele Zustände, ist es zuverlässiger, ihr ganzes Stylesheet von der Kürzung auszunehmen, als jedem einzelnen Selektor hinterherzulaufen.
• Anderes Gerät (2): Sorgen Sie dafür, dass das Tool für Mobile und Desktop generiert, und generieren Sie nach der Änderung neu.
• Späte Inhalte (3): Nehmen Sie das Präfix des Widgets in die Safelist auf oder behalten Sie das Stylesheet dieses Plugins vollständig.
• Icon-Schriften (4): Nehmen Sie die Icon-Klassen in die Safelist auf (oft ein Präfix wie fa- oder et-icon), damit bleibt die Schriftdeklaration mit ihnen erhalten.
• Animationen (5): Nehmen Sie die Animationsklassen Ihres Builders in die Safelist auf oder schalten Sie Einblendanimationen im sichtbaren Bereich beim Laden ab, was auch dem Largest Contentful Paint hilft.
• Fehlerhafte Generierung (6): Leeren Sie zuerst den eigenen CSS-Cache des Builders und generieren Sie dann das gekürzte CSS der betroffenen Seiten neu. Neugenerieren auf einem halb aufgebauten Builder-Cache reproduziert dasselbe Loch.

Nach der Korrektur: die Zustände testen, nicht nur die Seite

• Mobile und Desktop, jeweils mit geöffnetem Menü, geöffneter Suche und geöffnetem Warenkorb.
• Eingeloggt und ausgeloggt, leerer und gefüllter Warenkorb.
• Scrollen Sie die ganze Seite: In späten Abschnitten und animierten Blöcken verstecken sich die Löcher.
• Prüfen Sie nach einem Theme-, Builder- oder Plugin-Update erneut: Neue Klassennamen müssen erneut in die Safelist.
• Und wie immer: eine riskante Optimierung nach der anderen, wie in unserer Methode für Optimierungen ohne Bruch.

Mit Mantys Core

Zusammenfassung

• Ein Used-CSS-Durchlauf behält, was bei einem einzigen Rendering gepasst hat: ein Zustand, eine Größe, ausgeloggt, keine Interaktion.
• Sechs blinde Flecken: Zustände nach einem Klick, das andere Gerät, späte Inhalte, Icon-Schriften, Einblendanimationen und eine fehlgeschlagene Generierung.
• Bestätigen Sie mit umgangener Optimierung, dann vergleichen Sie das Styles-Panel beider Versionen, um die fehlende Regel zu benennen.
• Holen Sie nur diese Regel zurück, per Safelist oder indem Sie ein Stylesheet vollständig behalten, auf den Templates, die sie brauchen.
• Testen Sie die Zustände, beide Geräte und beide Besuchertypen, und prüfen Sie nach jedem Update erneut.