Die im sichtbaren Bereich genutzten Regeln isolieren

Frontend-Entwickler isolieren damit das zuerst benötigte CSS, wenn der sichtbare Seitenbereich schneller erscheinen soll.

Die im sichtbaren Bereich genutzten Regeln isolieren. Die Ausgabe bleibt auf Ihrem Gerät und lässt sich nach der Erstellung kopieren oder anpassen.

Bedienung

Füge das HTML für den oben sichtbaren Teil der Seite ein.
Füge eine Trennlinie aus zwei Bindestrichen hinzu.
Füge das vollständige Stylesheet, das diese Seite verwendet, unter der Trennlinie ein.
Führe die Extraktion aus, um die für den ersten Rendering benötigten Regeln zu erhalten.

Beispiel

Ein Frontend-Entwickler optimiert eine Startseite, bei der Kopfbereich und Menü schnell erscheinen müssen. Er fügt das HTML des Kopfbereichs ein, ergänzt die zwei Bindestriche und fügt dann das vollständige Stylesheet hinzu. Die Ausgabe hilft, einen kritischen CSS-Block vor weiteren Optimierungen vorzubereiten. Anschließend testet er das Ergebnis auf einer Kopie, um fehlende Regeln zu erkennen.

Eingabe

<h1 class="title">Hello</h1>
--
.title { color: #333; }
p { margin: 0; }

Grenzen und Formate

Das Werkzeug ruft keine Seite von einer URL ab; du musst HTML und CSS bereitstellen.
Stile, die durch JavaScript oder komplexe Pseudoelemente hinzugefügt werden, können fehlen.
Teste die extrahierten Regeln in einem Browser, bevor du sie einsetzt.
Eine sehr große Seite kann eine kleinere, gezieltere Auswahl erfordern.
Kommentare und ungenutzte Regeln können die Ausgabe schwerer machen.

Wo die Verarbeitung stattfindet

Das HTML und CSS, das du einfügst, bleiben in deinem Browser. Die Regelextraktion erfolgt auf deinem Gerät, und es wird nichts von der Seite versendet. Das Ergebnis wird nach dem Verlassen nicht aufbewahrt.

Häufige Fragen

Welches HTML sollte ich angeben?

Gib das Markup für das an, was Nutzer vor dem Scrollen sehen, etwa Kopfbereich, Navigation und erster Inhaltsblock. Kritisches CSS hängt von diesem anfänglichen Viewport ab. Eine breitere Extraktion erzeugt normalerweise weniger fokussierte Regeln.

Warum fehlen einige Regeln?

Das Werkzeug liest das HTML und CSS, das du einfügst, führt aber das JavaScript der Seite nicht aus. Klassen, die später hinzugefügt werden, oder vom Browser berechnete Stile können fehlen. Füge sie manuell hinzu, wenn das erste Rendering sie benötigt.

Kann ich das extrahierte CSS direkt veröffentlichen?

Teste es zuerst auf einer Kopie. Prüfe, ob das anfängliche Layout intakt bleibt und ob Schriftarten verfügbar bleiben. Kritisches CSS ergänzt normalerweise das Haupt-Stylesheet, anstatt es in jeder Situation zu ersetzen.