KakapoWP KakapoWP
Login Kostenlos testen
Kakapo Performance

Kritisches CSS

Was der obere Seitenteil braucht, steht im Kopf. Der Rest kommt nach.

Kakapo holt je Vorlage eine echte Beispielseite deiner Site, liest die dort verlinkten lokalen Stylesheets von der Festplatte und prüft jede Regel gegen das Dokument. Was oben gebraucht wird, geht inline in den Kopf; die ausgewerteten Stylesheets laden danach, ohne den Aufbau zu blockieren. Ein Browser ist daran nicht beteiligt: „oben sichtbar“ ist eine offengelegte Näherung über die Reihenfolge der Elemente, und im Zweifel nimmt sie eine Regel mit auf. Deshalb gibt es Vorschau, Testbetrieb und einen Schalter je Vorlage.

24 h kostenlos testenAlle Performance-Funktionen

Kritisches CSS

7 Vorlagen · je Vorlage ein eigener Lauf, ein eigener Schalter, eine eigene Vorschau

TestbetriebVorschau

Das bietet Kritisches CSS

7 Vorlagen, jede einzeln analysiert und freigegeben
Kritisches CSS inline im Kopf, ausgewertete Stylesheets verzögert
Bericht: Regeln, die kein Element getroffen haben
Vorschau derselben Seite mit und ohne Behandlung
Testbetrieb: nur angemeldete Verwalter sehen die Änderung
Ausschlussliste für URLs, Ausnahmeliste für Stylesheets

So funktioniert es

1

Vorlage analysieren — Beispielseite holen, Regeln prüfen

2

Vorschau mit und ohne Behandlung vergleichen

3

Vorlage freigeben, dann von Testbetrieb auf scharf stellen

Häufige Fragen zu Kritisches CSS

Wird gemessen, was oben wirklich sichtbar ist?
Nein. Es gibt keinen Browser und keinen Viewport. Alle Elemente unterhalb von body werden durchnummeriert; als „oben“ gelten die ersten 30 % (einstellbar zwischen 5 und 90) plus alles innerhalb der eingetragenen Landmarken — Kopfbereich, Navigation, erstes h1 und was du ergänzt. Wo das Verfahren an eine Grenze stößt, gilt die Regel als getroffen: ein paar Kilobyte zu viel sind harmloser als eine fehlende Regel.
Kann ich die ungenutzten Regeln von hier aus entfernen lassen?
Die Liste ist ein Bericht, kein Werkzeug. Gezählt wird gegen eine Beispielseite je Vorlage — Klassen, die JavaScript erst beim Klick setzt, oder ein Formular auf einer anderen Seite tauchen dort nicht auf. Streichen solltest du im Theme-Quelltext, wo es nachvollziehbar bleibt.
Was braucht der Analyse-Lauf, und was passiert danach?
Die PHP-Erweiterung dom/libxml und einen funktionierenden Loopback — die Site muss sich selbst über HTTP erreichen. Fehlt eines davon, lässt sich die Analyse gar nicht erst starten; woran es liegt, steht an Ort und Stelle. Ändert sich später eine ausgewertete CSS-Datei oder das Theme, setzt die Behandlung aus, statt mit möglicherweise falschem kritischem CSS auszuliefern.

Weitere Performance-Funktionen

Assets & Skripte →Minify →Preload & DNS →
Bereit?

Performance 24 Stunden kostenlos testen.

Keine Kreditkarte, kein Risiko. In 2 Minuten startklar.

Jetzt kostenlos testen