Nicht verwendetes CSS

Silktide lädt Ihre Seiten in einem echten Browser und misst, wie viel jedes Stylesheet tatsächlich zur Darstellung der Seite genutzt wird. Stylesheets mit einem großen Anteil ungenutzter Stile werden gemeldet, zusammen mit dem möglichen Einsparpotenzial.

Warum das wichtig ist

Browser können eine Seite erst anzeigen, nachdem sie ihr heruntergeladen und verarbeitet haben. Daher verzögert jede Regel, die nicht verwendet wird, trotzdem den Moment, in dem Ihre Inhalte erscheinen. Unbenutztes CSS häuft sich ganz natürlich an: Themes und Frameworks liefern Stile für jede Funktion mit – ob Sie sie verwenden oder nicht – und alte Stile werden selten gelöscht, wenn sich das Design ändert. Das Ergebnis ist, dass Besuchende auf Styling warten, das nie etwas darstellt.

So beheben Sie das

Entfernen Sie Stile, die Sie nicht mehr verwenden. Build-Tools können dies automatisch erledigen, indem sie Ihre Vorlagen scannen und nur das CSS behalten, auf das sie verweisen.
Teilen Sie große Stylesheets auf, sodass jede Seite nur die Stile lädt, die sie benötigt, statt ein einziges Bundle zu verwenden, das das Styling aller Seiten enthält.
Priorisieren Sie für die Stile, die eine Seite tatsächlich benötigt, jene, die den ersten sichtbaren Bereich darstellen, und lassen Sie den Rest ohne zu blockieren laden:

<!-- Lädt, ohne die erste Darstellung zu blockieren -->
<link rel="preload" href="rest.css" as="style"
      onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="rest.css"></noscript>

Seien Sie vorsichtig mit der automatischen Entfernung: Stile, die nur von verwendet werden oder nur auf anderen Seiten, die dasselbe Stylesheet teilen, können versehentlich entfernt werden.

Wie Silktide dies testet

Seite in einem echten Browser laden und aufzeichnen, welche CSS-Regeln während des Ladevorgangs angewendet werden.
Für jedes Stylesheet messen, wie viele seiner Bytes niemals verwendet wurden.
Jedes Stylesheet mit nennenswerter Verschwendung melden, einschließlich aktueller Größe, ungenutztem Prozentsatz und der Bytes, die Sie einsparen könnten.

Fehlerbehebung

Das CSS wird verwendet, nur nicht sofort

Die Messung umfasst den anfänglichen Seitenaufruf. Stile, die erst später wirken – bei Hover, in Modals, nachdem JavaScript Inhalte einblendet – zählen als ungenutzt, obwohl die Seite sie schließlich benötigt. Das ist dennoch hilfreich: Diese Stile müssen die erste Darstellung nicht blockieren und sind Kandidaten für ein separates Laden.

Das Stylesheet wird auf der gesamten Website gemeinsam genutzt

Ein gemeinsam genutztes Stylesheet ist auf einer einzelnen Seite größtenteils „ungenutzt“. Das kann ein vernünftiger Kompromiss sein, da die Datei nach dem ersten Seitenaufruf wird. Wägen Sie die Kosten des ersten Besuchs gegen den Komfort ab, bevor Sie es aufteilen.