Critical CSS Generator.

Generiere Critical Path CSS und beschleunige deine Website

⚙

Critical CSS in 3 einfachen Schritten

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

Was ist Critical CSS

Critical CSS ist eine Sammlung von CSS-Deklarationen, die zum Rendern des sichtbaren viewports verwendet werden. Der sichtbare viewport wird oft als „above the fold content“ bezeichnet. Es ist der Teil einer Webseite, den du im Browser siehst, ohne scrollen zu müssen. Da der sichtbare viewport das Erste ist, was ein Besucher sieht, solltest du das Rendern des sichtbaren viewports priorisieren. Critical CSS hilft dir dabei!

Warum sollte ich Critical CSS verwenden

Kurz gesagt: Weil es viel schneller ist! Critical path (above-the-fold) CSS ist eine der wichtigsten und effektivsten Techniken zur Optimierung der CSS-Auslieferung. Aufgrund der Funktionsweise moderner Browser gelten alle Styles aus externen Dateien als render blocking. Das bedeutet: Ein Browser beginnt erst mit dem Rendern (um genau zu sein: mit dem Erstellen des Render-Trees), wenn er alle externen CSS-Dateien im head der Seite heruntergeladen hat. Wenn ein Browser eine oder mehrere CSS-Dateien herunterladen muss, kann eine Seite leicht für 100 ms oder länger blockieren. Google PageSpeed Insights empfiehlt, Ressourcen zu eliminieren, die render blocking sind, damit deine Seite schneller lädt.
Eine Möglichkeit, das zu vermeiden, ist die Verwendung von Critical CSS. Critical CSS ist eine Sammlung von CSS, das nur für die Anzeige des sichtbaren Teils der Seite benötigt wird. 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 vollständigen CSS-Dateien im hintergrund herunter.

Wie verwende 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 ein paar Sekunden siehst du das extrahierte CSS
Kopiere dieses CSS und füge es in ein <style>-Tag im <head> der Seite ein, direkt unter dem <title>
Der nächste Schritt ist das verzögerte Laden deines originalen CSS. Es gibt 3 Methoden, um dein CSS zu verzögern.

  1. Das CSS vorladen und das rel-Attribut beim Laden austauschen
  2. Das CSS mit media=print laden und beim Laden das media-Attribut austauschen
  3. Die originalen CSS-Links im Footer deiner Seite platzieren

Caching von nicht-kritischem CSS

Critical CSS ist extrem schnell für Erstbesucher, die deine CSS-Dateien noch nicht im Browser-Cache gespeichert 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 nach der Implementierung von Critical CSS schneller, deine Stylesheets zusammenzufassen? Es gibt keine einfache Antwort auf diese Frage. Manchmal ist das Zusammenfassen der Stylesheets schneller, manchmal nicht. Das hängt mit dem Critical Rendering Path zusammen. Wenn es mehr als 5 Ressourcen mit hoher Priorität gibt, ist das Zusammenfassen einiger Stylesheets meist sinnvoll.

Wie funktioniert der Critical CSS Generator?

Der Critical CSS Generator läuft auf einer maßgeschneiderten Node.js-Plattform. Wir besuchen deine Webseite mit einem echten Chrome-basierten Browser. Wir analysieren deine Website auf verschiedenen viewports. Dabei ermitteln wir, welche Teile deiner Stylesheets für das Rendern des sichtbaren viewports (der sichtbare Teil deiner Seite) verwendet werden. Anschließend bereinigen und minifizieren wir das für das Rendern benötigte CSS.

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 die Zusammenarbeit mit unserem Critical Path Extractor entwickelt.

Feedback / Beta-Status

Derzeit befindet sich der Critical CSS Generator im Beta-Status. Das bedeutet, dass ich noch viel experimentiere. Funktioniert der Critical CSS Generator bei dir nicht? Keine Sorge... versuch es in 5 Minuten noch einmal!

Feedback oder vermisst du ein Feature? Lass es mich wissen