Critical-CSS-Generator.

Was ist Critical CSS

Critical CSS ist eine Sammlung von CSS-Deklarationen, die den sichtbaren Viewport rendern. Der sichtbare Viewport wird oft als „Above-the-Fold“-Inhalt bezeichnet. Das ist der Teil einer Webseite, den du im Browser siehst, ohne scrollen zu müssen. Weil der sichtbare Viewport das Erste ist, was ein Besucher sieht, solltest du sein Rendern priorisieren. Critical CSS hilft dir dabei!

Warum sollte ich Critical CSS nutzen

Kurz gesagt: Weil es viel schneller ist! Critical-Path-CSS (Above the Fold) ist eine der wichtigsten und wirkungsvollsten Techniken, um die CSS-Auslieferung zu optimieren. Moderne Browser behandeln alle Styles aus externen Dateien als render-blocking. Das bedeutet: Der Browser beginnt erst mit dem Rendern (genauer gesagt: den Render-Tree zu erstellen), wenn er alle externen CSS-Dateien im Head der Seite heruntergeladen hat. Muss ein Browser eine oder mehrere CSS-Dateien herunterladen, blockiert die Seite schnell für 100 ms oder länger. Google PageSpeed Insights empfiehlt, Render-Blocking-Ressourcen zu beseitigen, damit deine Seite schneller lädt.
Mit Critical CSS vermeidest du das. Critical CSS ist eine Sammlung von CSS, die nötig ist, um nur den sichtbaren Teil der Seite darzustellen. Dieses Critical CSS wird oft inline im Head der Seite eingebunden. Dadurch muss ein Browser nicht erst eine oder mehrere CSS-Dateien herunterladen, bevor er mit dem Rendern beginnen kann. Während die Seite bereits angezeigt wird, lädt dein Browser die restlichen CSS-Dateien im Hintergrund herunter.

Wie nutze ich den Critical-CSS-Generator?

Zuerst musst du das Critical-Path-CSS für deine Webseite generieren. Gib einfach die URL deiner Seite ein und klicke auf „Critical CSS generieren“. Nach wenigen Sekunden siehst du das extrahierte CSS
Kopiere dieses CSS und füge es im <head> deiner Seite in ein <style>-Tag ein, direkt unter dem <title>
Im nächsten Schritt lädst du dein originales CSS verzögert. Es gibt 3 Methoden, um dein CSS verzögert zu laden.

1. Lade das CSS per Preload und tausche das rel-Attribut beim Laden aus
2. Lade das CSS mit media=print und tausche das media-Attribut beim Laden aus
3. Platziere die originalen CSS-Links im Footer deiner Seite

Nicht-kritisches CSS cachen

Critical CSS ist extrem schnell für Erstbesucher, die deine CSS-Dateien noch nicht im Browser-Cache haben. Für wiederkehrende Besucher ist Critical CSS meist kaum nötig, da die CSS-Dateien aus dem Browser-Cache geladen werden können.

Sollte ich meine Stylesheets zusammenfassen?

Ist es schneller, deine Stylesheets zusammenzufassen, nachdem du Critical CSS implementiert hast? Auf diese Frage gibt es keine einfache Antwort. Manchmal ist es schneller, Stylesheets zusammenzufassen, manchmal nicht. Das hängt mit dem Critical Rendering Path zusammen. Gibt es mehr als 5 Ressourcen mit hoher Priorität, ist es meist sinnvoll, einige Stylesheets zusammenzufassen.

Wie funktioniert der Critical-CSS-Generator?

Der Critical-CSS-Generator läuft auf einer eigenen NodeJs-Plattform. Im Grunde rufen wir deine Webseite mit einem echten Chrome-basierten Webbrowser auf. Wir analysieren deine Website auf verschiedenen Viewports und ermitteln, welche Teile deiner Stylesheets für das Rendern des sichtbaren Viewports (des sichtbaren Teils deiner Seite) nötig sind. Anschließend bereinigen und minifizieren wir das CSS, das für das Rendern nötig ist.

Gibt es ein WordPress-Plugin für deinen Critical-CSS-Generator?

Ja, das gibt es. Es heißt Core-Web-Vitals-Plugin und wurde speziell für das Zusammenspiel mit unserem Critical-Path-Extractor entwickelt.

Feedback / Beta-Status

Aktuell befindet sich der Critical-CSS-Generator im Beta-Status. Das heißt, dass ich noch ständig experimentiere. Funktioniert der Critical-CSS-Generator bei dir nicht? Keine Sorge ... versuch es in 5 Minuten wieder!

Hast du Feedback oder fehlt dir ein Feature? Gib mir Bescheid