Kritische Stile erkennenUngenutzte Regeln prüfenDarstellung kontrollieren
Von Marco Nötzold2 Minuten LesezeitRatgeber
Stylesheets ihren Aufgaben zuordnen
Erfassen Sie die geladenen CSS-Dateien auf mehreren Seitentypen. Ordnen Sie diese dem Theme, dem Page Builder und einzelnen Erweiterungen zu. Prüfen Sie, welche Dateien überall erscheinen, obwohl die zugehörige Funktion nur auf wenigen Seiten vorkommt.
Legen Sie vor Änderungen eine Sicherung an und nutzen Sie eine Testkopie. Bewahren Sie individuelle Anpassungen und dokumentieren Sie, wie die ausgelieferten Dateien erzeugt werden. Bearbeiten Sie nach Möglichkeit die Quelle statt eine generierte, beim nächsten Speichern überschreibbare Datei.
Ungenutztes CSS mit Vorsicht bewerten
Die Coverage-Ansicht der Chrome DevTools zeigt, welche CSS-Bereiche während der untersuchten Sitzung verwendet wurden. Eine nicht benutzte Regel kann dennoch für ein geöffnetes Menü, eine Fehlermeldung oder einen anderen Bildschirmbereich gebraucht werden.
Starten Sie die Aufzeichnung neu und durchlaufen Sie Navigation, Formulare und dynamische Inhalte. Wechseln Sie relevante Ansichtsbreiten. Verwenden Sie die Ergebnisse als Ausgangspunkt für weitere Prüfungen, nicht als automatische Löschliste. Halten Sie ausdrücklich fest, welche Zustände Ihre Stichprobe abdeckt.
Gezielt reduzieren und erzeugen
Am klarsten ist eine unnötige Einbindung, die sich vollständig vermeiden lässt: etwa Styles einer nicht verwendeten Komponente. Nutzen Sie dafür vorhandene Einstellungen oder eine wartbare Anpassung der Einbindung. Prüfen Sie Abhängigkeiten und Updatesicherheit, bevor Sie Theme-Dateien verändern.
Ändern Sie zunächst nur eine nachvollziehbare Ursache.
Erzeugen Sie optimierte Dateien mit dem bestehenden Projektverfahren erneut.
Leeren Sie betroffene Caches kontrolliert und überprüfen Sie die tatsächlich ausgelieferte Fassung.
Darstellung und Bedienbarkeit absichern
Vergleichen Sie vor und nach dem Eingriff dieselben Seiten mit gleichen Messbedingungen. Prüfen Sie übertragene CSS-Daten und den sichtbaren Aufbau. Zusammenfassen, verzögertes Laden oder kritisches CSS sind keine pauschalen Verbesserungen und müssen zur konkreten Einbindung passen.
Kontrollieren Sie Tastaturfokus, Hoverzustände, geöffnete Dialoge, Druckansicht, schmale Bildschirme und Textvergrößerung. Wenn ein Plugin automatisch Regeln entfernt, benötigen dynamische Klassen besondere Aufmerksamkeit. Ein besserer Bericht rechtfertigt keine verschwundene Fokusmarkierung und keine zunächst ungestalteten Inhalte.
Häufige Fragen
Kann ich alles als ungenutzt markierte CSS löschen?
Nein. Die Aufzeichnung kennt nur die besuchten Seiten und ausgelösten Zustände. Andere Vorlagen oder Bedienwege können diese Regeln benötigen.
Muss CSS immer zusammengefasst werden?
Nein. Ob das hilft, hängt von Auslieferung und Einbindung ab. Vergleichen Sie den tatsächlichen Ladeablauf und die Darstellung.
