Kritischer CSS Generator.

Generiere Critical Path CSS und beschleunige deine Website

⚙

Kritisches CSS in 3 einfachen Schritten

  1. Gib die URL der Seite ein, für die du kritisches CSS erstellen möchtest
  2. Füge die Ergebnisse in ein <style>-Tag auf deiner Seite ein, direkt unter dem <title>
  3. Verzögere das Laden der ursprünglichen Stylesheets
    <link rel = "preload" href = "orig.css" type = "text / css" as = "style" onload = "this.onload = null; this.rel = 'stylesheet' ; "/>

Was ist Kritisches CSS

Kritisches CSS ist eine Sammlung von CSS-Deklarationen, die verwendet werden, um den sichtbaren Viewport zu rendern. Der sichtbare Viewport wird oft als 'Above-the-Fold-Inhalt' bezeichnet. Es ist der Teil einer Webseite, den du in deinem Browser sehen kannst, ohne scrollen zu müssen. Da der sichtbare Viewport das erste ist, was ein Besucher sieht, solltest du das Rendern des sichtbaren Viewports priorisieren. Kritisches CSS kann dir dabei helfen!

Warum sollte ich Kritisches CSS verwenden

Kurz gesagt: weil es viel schneller ist! Critical Path (Above-the-Fold) CSS ist eine der wichtigsten & effektivsten Techniken, die zur Optimierung der CSS-Bereitstellung verfügbar sind. Aufgrund der Funktionsweise aller modernen Browser werden alle Styles aus externen Dateien als rendering-blockierend betrachtet. Das bedeutet, dass ein Browser nicht mit dem Rendern beginnt (um genau zu sein, den Render-Tree generiert), bis er alle externen CSS-Dateien im Head der Seite heruntergeladen hat. Wenn ein Browser 1 oder mehr CSS-Dateien herunterladen muss, kann eine Seite leicht 100ms oder länger blockieren. Google PageSpeed Insights empfiehlt, rendering-blockierende Ressourcen zu eliminieren, damit deine Seite schneller lädt.
Eine Möglichkeit, das zu vermeiden, ist die Verwendung von kritischem CSS. Kritisches CSS ist eine Sammlung von CSS, die erforderlich ist, um nur den sichtbaren Teil der Seite anzuzeigen. Dieses kritische CSS wird oft inline im Head der Seite angezeigt. Infolgedessen muss ein Browser nicht 1 oder mehr CSS-Dateien herunterladen, bevor er mit dem Rendern beginnen kann. Während die Seite angezeigt wird, lädt dein Browser im Hintergrund die endgültigen CSS-Dateien herunter.

Wie benutze ich den Kritischen CSS Generator?

Zuerst musst du das Critical Path CSS für deine Webseite generieren. Gib einfach die URL deiner Seite an und drücke dann auf 'Generiere kritisches CSS'. Nach ein paar Sekunden siehst du das extrahierte CSS
Kopiere dieses CSS und platziere es im <head> der Seite in einem <style>-Tag, direkt unter dem <title>
Der nächste Schritt besteht darin, dein ursprüngliches CSS zu verzögern. Es gibt 3 Methoden, um dein CSS zu verzögern.

  1. Preload das CSS und tausche das rel beim Laden aus
  2. Lade das CSS mit media=print und tausche beim Laden das media-Element aus
  3. Platziere die ursprünglichen CSS-Links in der Fußzeile deiner Seite

Caching von nicht-kritischem CSS

Kritisches CSS ist rasend schnell für Erstbesucher, die deine CSS-Dateien noch nicht im Browser-Cache gespeichert haben. Für wiederkehrende Besucher besteht normalerweise wenig Bedarf an kritischem CSS, da die CSS-Dateien aus dem Browser-Cache geladen werden können.

Sollte ich meine Stylesheets kombinieren?

Ist es nach der Implementierung von kritischem CSS schneller, deine Stylesheets zu kombinieren? Auf diese Frage gibt es keine einfache Antwort. Manchmal ist es schneller, deine Stylesheets zu kombinieren, und manchmal nicht. Dies hat mit dem Critical Rendering Path zu tun. Wenn es mehr als 5 Ressourcen mit hoher Priorität gibt, ist es normalerweise sinnvoll, ein paar Stylesheets zu kombinieren.

Wie funktioniert der Kritische CSS Generator?

Der kritische CSS Generator arbeitet auf einer benutzerdefinierten NodeJs-Plattform. Wir besuchen deine Webseite im Grunde mit einem echten Chrome-basierten Webbrowser. Wir bewerten deine Website auf verschiedenen Viewports und bestimmen, welche Teile deiner Stylesheets für das Rendern des sichtbaren Viewports (der sichtbare Teil deiner Seite) verwendet werden. Dann bereinigen und minimieren wir das CSS, das für das Rendern benötigt wird.

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

Ja, das gibt es. Es heißt Core Web Vitals Plugin, das speziell entwickelt wurde, um mit unserem Critical Path Extractor zusammenzuarbeiten.

Feedback / Beta-Status

Derzeit befindet sich der kritische CSS Generator im Beta-Status. Das bedeutet, dass ich die ganze Zeit noch experimentiere. Funktioniert der kritische CSS Generator nicht für dich? Keine Sorge ... versuche es in 5 Minuten noch einmal!

Feedback oder vermisst du eine Funktion? Lass es mich wissen