Critical-CSS-Extraktor: Styles für den sichtbaren Bereich inline | We.Inc
Füge dein HTML und CSS ein, wähle eine Bildschirmgröße und behalte nur die Regeln, die das gestalten, was vor dem Scrollen sichtbar ist. Kopiere einen Inline-Style-Block und das Preload-Muster.
Critical-CSS-Extraktor
Critical CSS ist die kleine Menge an Regeln, die nötig ist, um das darzustellen, was ein Besucher vor dem Scrollen sieht. Füge hier das HTML und das Stylesheet einer Seite ein und wähle eine Bildschirmgröße. Das Tool rendert die Seite in einem festen Rahmen, behält die Regeln für sichtbare Elemente und gibt dir einen Inline-Style-Block sowie einen verzögert geladenen Stylesheet-Link.
Was der Extraktor behält
Regeltyp
Behalten, wenn
Warum
Style-Regel
Ihr Selektor trifft ein Element, dessen Oberkante innerhalb der gewählten Höhe liegt
Dieses Element wird beim ersten Anblick gezeichnet
html, body, :root, *
Immer
Basisschriften, Farben und Custom Properties wirken auf alles Sichtbare
@media-Block
Behalten, aber nur mit den passenden inneren Regeln
Andere Bildschirmgrößen bekommen trotzdem den richtigen ersten Aufbau
@font-face
Immer (abschaltbar)
Sichtbarer Text braucht seine deklarierte Schrift
@keyframes
Ihr Name wird von einer behaltenen Regel verwendet
Animationen auf sichtbaren Elementen funktionieren weiter
Browser warten auf jedes Stylesheet im head, bevor sie irgendetwas zeichnen. Wenn du die wenigen Regeln, die der erste Bildschirm braucht, inline einbindest und die vollständige Datei danach ohne Blockieren lädst, erscheint die Seite schneller. Dieses Tool übernimmt diese Auswahl für dich aus Code, den du einfügst. Es läuft in deinem Browser und ruft nie eine URL ab, füge also das fertige HTML und CSS der Seite ein statt eines Links.
Füge das HTML der Seite (der Inhalt von body reicht) und das CSS aus ihrem Stylesheet ein.
Wähle eine voreingestellte Bildschirmgröße oder gib Breite und Fold-Höhe in Pixeln ein.
Das Tool rendert dein HTML in einem abgeschotteten Rahmen in dieser Größe mit deaktivierten Skripten und prüft dann jeden Selektor gegen die Elemente auf dem Bildschirm.
Kopiere den Inline-Style-Block für den head und den Preload-Link, der danach das vollständige Stylesheet lädt. Die Statistik zeigt, wie viele Regeln behalten wurden und wie groß das Ergebnis ist.
Lass es einmal in Smartphone-Größe und einmal in Desktop-Größe laufen und führe beide Ergebnisse zusammen, weil der Fold jeweils an einer anderen Stelle liegt.
Interaktive Zustände wie :hover und :focus werden am Element selbst geprüft, ein sichtbarer Button behält also seine Hover-Regel. Entferne sie von Hand, wenn du das kleinste Ergebnis willst.
Inhalte, die JavaScript nach dem Laden hinzufügt, stehen nicht im eingefügten HTML, ihre Styles werden also nicht erkannt. Füge das HTML so ein, wie es nach dem Rendern aussieht, wenn sich deine Seite im Browser selbst aufbaut.
Halte den Inline-Block klein. web.dev empfiehlt, die Inhalte im sichtbaren Bereich komprimiert bei etwa 14 KB zu halten, damit sie in den ersten Round Trips ankommen.
Führe die Extraktion erneut aus, sobald sich der obere Teil der Seite ändert. Veraltetes Critical CSS verursacht beim ersten Laden kurz ungestylte Inhalte.
Häufige Fragen
Ist das dasselbe wie die Pakete Critical oder Penthouse?
Es folgt derselben Idee auf einfachere Weise. Diese Kommandozeilen-Tools steuern einen echten Headless-Browser gegen deine gebauten Seiten. Diese Seite nutzt deinen eigenen Browser und eingefügten Code, betrachte das Ergebnis also als gute Annäherung und teste die Seite danach.
Warum braucht der Preload-Link onload?
rel=preload mit as=style lädt das Stylesheet herunter, ohne es anzuwenden. Der onload-Handler stellt rel auf stylesheet um, sobald die Datei ankommt, und wendet sie so an, ohne den ersten Aufbau zu blockieren. Die noscript-Kopie deckt Besucher mit deaktivierten Skripten ab.
Schadet Inline-CSS dem Caching?
Inline-Regeln werden mit jeder HTML-Seite erneut gesendet, deshalb sollte der Block klein bleiben. Das vollständige Stylesheet ist weiterhin eine eigene Datei und wird nach dem ersten Besuch ganz normal gecacht.
Kann es meine Live-Website lesen?
Nein. Eine statische Seite in deinem Browser kann den Code einer anderen Website nicht laden, daher wird nichts abgerufen. Öffne deine Seite, sieh dir ihren Quelltext und ihr Stylesheet an und füge beides ein. Nichts, was du einfügst, wird hochgeladen.
Was, wenn mein CSS ein Framework wie Tailwind nutzt?
Füge die kompilierte CSS-Datei ein, die dein Build erzeugt, nicht den Quelltext mit @tailwind- oder @import-Zeilen. Der Extraktor arbeitet mit fertigen Regeln, und Utility-Klassen in deinem HTML werden wie jeder andere Selektor geprüft.
Wo der Fold wirklich liegt
Es gibt nicht den einen Fold. Ein Smartphone im Hochformat zeigt vielleicht 650 Pixel Höhe, ein Laptop 800 und ein großer Monitor mehr. Wähle die Größen, die deine Besucher am häufigsten nutzen, und lass unter der Linie etwas Spielraum, weil Leute oft sofort scrollen.
Der Extraktor zählt ein Element als sichtbar, wenn seine Oberkante über der gewählten Höhe liegt. Ein hoher Hero-Bereich, der auf dem Bildschirm beginnt und darunter endet, wird behalten, und genau das willst du.
Das Ergebnis in deine Seite einbauen
Setze den Inline-Style-Block im head vor alles andere, was gerendert wird. Ersetze deinen normalen Stylesheet-Link durch das Preload-Muster, damit der Rest des CSS lädt, ohne den ersten Aufbau aufzuhalten.
Prüfe das Ergebnis mit gedrosseltem Netzwerk in den Entwicklertools deines Browsers. Wenn etwas springt oder sich neu gestaltet, sobald die vollständige Datei ankommt, fehlt eine Regel für ein sichtbares Element. Füge sie dem Inline-Block hinzu.
Das Lademuster, das das Tool erzeugt
Kritische Regeln inline, den Rest ohne Blockieren laden
Das ist das auf web.dev beschriebene Muster. Der Style-Block enthält die extrahierten Regeln, der Preload-Link lädt die vollständige Datei und wendet sie bei onload an, und die noscript-Zeile ist der Fallback.
Bekannte Grenzen eines Extraktors im Browser
Was du von Hand prüfen solltest
Situation
Was passiert
Was zu tun ist
Von Skripten hinzugefügte Styles
Nicht erkannt, Skripte laufen im Rahmen nicht
Füge das gerenderte HTML statt der Vorlage ein
Bilder ohne width und height
Können auf null Höhe zusammenfallen und spätere Inhalte nach oben ziehen
Ergänze width- und height-Attribute an Bildern
Webfonts
Nicht heruntergeladen, Text kann daher anders umbrechen
Lass unter deiner Fold-Höhe etwas Spielraum
Selektoren, die der Browser ablehnt
Vom Browser vor der Prüfung verworfen
Korrigiere die Syntax, die Statistik zeigt, wie viele Regeln gelesen wurden
Sehr lange Seiten
Nur der erste Bildschirm wird behalten, wie beabsichtigt
Führe es für jede Bildschirmgröße, die dir wichtig ist, erneut aus
Critical CSS extrahieren
Das Tool lädt mit einer Beispielseite einer Bäckerei, damit du das Ergebnis siehst, bevor du deinen eigenen Code einfügst.
HTML der Seite
CSS des Stylesheets
Bildschirmgröße
Tablet 820 x 1000
Laptop 1366 x 768
Desktop 1920 x 1000
Breite (px)
Fold-Höhe (px)
@font-face-Regeln immer behalten
Deine Seite in der gewählten Größe, Skripte aus
Die gestrichelte Linie markiert den Fold.
{read} Regeln gelesen, {kept} behalten. Das Critical CSS hat vor der Komprimierung {bytes} Bytes.
Seite wird aufgebaut...
Keine Regeln gefunden. Prüfe, ob HTML und CSS zur selben Seite gehören.