Das kritische CSS – was ist dieser kritische Pfad?

Der Classic-Editor: Vertraut und zuverlässig –
Ihr bewährter Begleiter.

Erleben Sie den Classic Editor neu!
(Bilder von pixelcreatures)

Viele Nutzer schätzen die vertraute Umgebung des Classic-Editors, die eine einfache und schnelle Bearbeitung ermöglicht.

Mit dem Advanced Editor Tools auf das nächste Level –
Mehr Funktionen, mehr Möglichkeiten.

Classic Editor + Advanced Editor Tools
= Ihr Erfolgsrezept

Der Advanced Editor erweitert den Funktionsumfang des Classic-Editors und ermöglicht es, Inhalte noch effektiver zu bearbeiten.

Einfach und intuitiv –
Der Classic-Editor für alle.

Classic Editor & Advanced Editor Tools
Erleben Sie es.

Der Classic-Editor zeichnet sich durch Stabilität und Zuverlässigkeit aus, was für professionellen Anwender von Bedeutung ist.

Mehr schaffen in weniger Zeit –
Der Advanced Editor für kreative Köpfe.

Optimieren Sie Ihre Bearbeitung:
Advanced Editor Tools

Mit dem Advanced Editor können Designer und
Content Creatoren kreative Ideen umsetzten.

Das kritische CSS, auch bekannt als kritischer Pfad, ist der Pfad zum Rendern einer Webseite. Es ist von Bedeutung, diesen Pfad zu optimieren, bevor das Rendering stattfinden kann. Die CSS Stylesheets hingegen blockieren das Rendering und die Darstellung im Browser. Solange der Browser die Stylesheets nicht angefordert, empfangen, heruntergeladen und analysiert hat, bleibt die Seite leer. Durch die Reduzierung der Menge an CSS, die der Browser durchläuft, und durch das Einbetten in die Seite (Entfernen der HTTP-Anforderung) lässt sich die Seite schneller rendern. Das ist in etwa das Hauptprinzip des kritischen CSS, wie es oft beschrieben wird.

Dieser Beitrag ist im Anschluss von Autoptimize + Async JavaScript.

Inhaltsverzeichnis

Wie kritisches CSS das Webseiten-Puzzle beschleunigt

Eine Website besteht aus verschiedenen Komponenten wie Bildern, Texten, Farben und mehr – all das, was du letztendlich auf einer Webseite siehst. Das kritische CSS bildet gewissermaßen den Anfang dieses Zusammenstellens, ähnlich einem Puzzlestück, das zuerst platziert wird, um einen ersten Überblick zu geben, auch wenn das gesamte Bild noch nicht vollständig ist.

Der kritische Pfad beschreibt den Weg, den der Browser nimmt, um all diese Bestandteile der Website herunterzuladen und darzustellen. Das kritische CSS kommt hier als eine Art Abkürzung ins Spiel. Statt auf die vollständige Website zu warten, lädt der Browser zunächst nur die essenziellen Teile – das kritische CSS. Dabei handelt es sich um die Stile, die gebraucht werden, um den allerersten Eindruck der Seite zu vermitteln, wie zum Beispiel Hintergrundfarben, Schriftarten oder die Grundstruktur.

Durch das prioritäre Laden des kritischen CSS kann der Browser schneller eine Vorschau der Seite anzeigen, während im Hintergrund die restlichen Inhalte geladen werden. Dies führt dazu, dass Nutzer das Gefühl haben, die Seite lädt schneller, da sie bereits einen ersten Eindruck erhalten, während die Seite noch weiter geladen wird.

Es gibt ein Plug-in namens Reduce Unused CSS Solution with Critical CSS For WP, das diese Aufgabe übernehmen kann.

Reduce Unused CSS Solution with Critical CSS For WP

Das Plug-in "Reduce Unused CSS Solution with Critical CSS For WP" kann dazu beitragen, die Leistung zu verbessern, indem es nur erforderliches CSS lädt. Es ist ratsam, die Konfiguration solcher Plug-ins sorgfältig zu überprüfen, um sicherzustellen, dass sie das gewünschte Verhalten zeigen und keine unerwünschten Nebenwirkungen verursachen.

Critical CSS For WP: Defer-Strategien

Lernen aus der Praxis: Beginnen wir mit einer konkreten Praxiserfahrung.

Bei meiner Website wurde bemerkt, dass beim Laden mit der Einstellung 'CSS Defer: Enable' zunächst nur das Grundgerüst der Seite angezeigt wurde, bevor der restliche Inhalt geladen wurde. Diese Verzögerung war lediglich für die Besucher der Seite spürbar und nicht für Administratoren im Frontend erkennbar.

Um dieses Problem anzugehen, habe ich die Einstellungen unter 'CSS-Verzögerung' deaktiviert und zusätzlich andere Caches gelöscht. Dieses Vorgehen erwies sich als passende Lösung für das Problem.

Die Option, CSS-Verzögerung: "Als Standard fügt das Plug-in kritisches CSS hinzu und verzögert das Laden von CSS. Sie können die Verzögerung von CSS deaktivieren, wenn Sie ein Problem haben."

Das Defer-Attribut bei CSS hat normalerweise den Vorteil, dass es das Laden der CSS-Dateien verzögert, bis der Browser den HTML-Code verarbeitet hat. Ähnlich wie beim Defer-Attribut für JavaScript wird das CSS im Hintergrund geladen, ohne die Rendervorgänge der Seite zu blockieren. Das kann nützlich sein, um die Seitenladegeschwindigkeit zu verbessern, insbesondere wenn bestimmte CSS-Dateien nicht sofort benötigt werden, um den initialen Inhalt der Seite anzuzeigen.

Allerdings kann das Defer-Attribut für CSS auch negative Auswirkungen haben, insbesondere wenn kritisches CSS verzögert geladen wird und dadurch die initiale Darstellung der Seite behindert wird. In solchen Fällen kann das Deaktivieren des Defer-Attributs, die beste Lösung sein, um eine reibungslose und schnelle Seitendarstellung sicherzustellen.

Optimiere die Website: Beachte die CSS-Verzögerung!

Zusammenfassend ist zu beachten, dass die Anwendung des kritischen CSS von verschiedenen Faktoren beeinflusst wird, insbesondere von der individuellen Gestaltung einer Website und durch das Theme. Manchmal harmoniert das kritische CSS mit der verzögerten Ladung und verbessert die Ladezeiten. Jedoch gibt es Situationen, in denen das Defer-Laden von kritischem CSS – also das spätere Laden – zu Störungen führen kann.

In solchen Fällen wird es besser sein, das kritische CSS ohne Verzögerung zu laden, um sicherzustellen, dass die Seite ordnungsgemäß gerendert wird und die Benutzer eine optimale Nutzererfahrung haben. Die Seitenladezeit profitiert ebenso von der Einstellung "CSS Defer: Disable", da sie ohne Verzögerung das kritische CSS lädt und somit eine positive Auswirkung auf die ordnungsgemäße Darstellung der Seite sowie die Nutzererfahrung hat.

Option, Cache Alt-Pfad

Die Option, Cache Alt-Pfad: "Aktivieren Sie diese Option, wenn Ihr kritisches CSS überschrieben oder gelöscht wird."

Wenn diese Option aktiviert ist, bedeutet das im Allgemeinen Folgendes:

Sicherung des alten kritischen CSS: Das Plug-in erstellt eine Kopie oder sichert das bisherige oder ältere kritische CSS. Falls das aktuelle kritische CSS überschrieben oder gelöscht wird, kann das Plug-in auf dieses gesicherte alte CSS zurückgreifen.
Wiederherstellung des vorherigen kritischen CSS: Wenn das neue oder aktualisierte kritische CSS fehlerhaft ist oder unerwartete Probleme auf der Website verursacht, ermöglicht die Aktivierung dieser Option dem Plug-in, auf das vorherige kritische CSS zurückzugreifen. Dadurch kann vermieden werden, dass die Website aufgrund von CSS-Problemen nicht mehr richtig dargestellt wird.

Die Aktivierung dieser Option ist eine Art Sicherheitsmaßnahme, um sicherzustellen, dass im Falle von Problemen oder Fehlern im neuen kritischen CSS das vorherige CSS wiederhergestellt werden kann, um die Funktionalität der Website aufrechtzuerhalten.

Mit dem Aktivieren des Häkchens bei „Alternative cache path“ kann ein CSS, das entfernt werden soll, weiterhin aktiv bleiben. Durch Deaktivieren des Häkchens wird dieses Problem behoben, und nach erneutem Generieren des kritischen CSS kann es wieder aktiviert werden. Dieses Problem trat hier im Workflow der Schriftgrößenänderung und anderem schon mal auf. Es ist von Vorteil, dies im Auge zu behalten, falls CSS-Veränderungen auftreten, die nicht erklärlich sind.

Kritischen CSS und Page Load Time

Die Performance des kritischen CSS und die Page Load Time variieren je nach Browser. Selbst eine halbe Sekunde weniger kann die Performance verbessern, doch dieser Erfolg schwankt. Unterschiedliche Browser zeigen unterschiedliche Ergebnisse

Die Browser und die 'Page Load Time'

Mein Schnelltest umfasste das Aktivieren und Deaktivieren des Plug-ins sowie das Leeren des Seiten-Caches und des Autoptimize-Caches nach jeder Änderung. Vor und nach jeweils drei Aufrufen einer spezifischen URL habe ich den Browserverlauf gelöscht. Um genaue Werte zu erhalten, nutze ich das Tool WP Page Load Stats 7. Hier sind drei Beispiele der Ergebnisse unterschiedlicher Browser:

Erstes Beispiel:

	Ohne Critical CSS	Mit Critical CSS	Differenzwert
Erstaufruf	2,673 sec.	2,528 sec.	-0,145 sec.
Neuladung	0.529 sec.	0,463 sec.	-0,066 sec.
Neuladung	0,639 sec.	0,392 sec.	-0.247 sec.

Zweites Beispiel:

	Ohne Critical CSS	Mit Critical CSS	Differenzwert
Erstaufruf	4,778 sec.	4,069 sec.	-0,709 sec.
Neuladung	3,916 sec.	3,902 sec.	-0,014 sec.
Neuladung	3,501 sec.	3,615 sec.	+0.114 sec.

Drittes Beispiel:

	Ohne Critical CSS	Mit Critical CSS	Differenzwert
Erstaufruf	2,591 sec.	1,011 sec.	-1,580 sec.
Neuladung	1,021 sec.	0,730 sec.	-0,291 sec.
Neuladung	0,935 sec.	0,822 sec.	-0.113 sec.

Die Browser zeigen unterschiedliche Ergebnisse in Bezug auf die Page Load Time. Diese Zeit variiert erheblich und kann um mehr als das Doppelte sowie darüber hinaus schwanken. Die Optimierungen beeinflussen im Allgemeinen alle Browser, aber die individuellen Leistungsunterschiede zwischen den Browsern bleiben bestehen.

Die CSS-Bereitstellung selbst optimieren

Ich habe einmal manuell folgende Schritte durchgeführt! Es wurde nicht so erfolgreich. Ebenda folgt dazu eine weitere Bemerkung, welches aber nicht heißen muss, dass das bei dir funktionieren könnte.

In diesem Zusammenhang bietet Autoptimize die Option Inline* and Defer CSS, was so viel bedeutet wie CSS-Code inline einfügen und verschieben.

*Inline CSS bezieht sich auf die Einbindung von CSS-Stilen direkt in den HTML-Code einer Webseite, anstatt sie in einer separaten CSS-Datei zu speichern. Bei der Verwendung von Inline CSS werden die CSS-Regeln direkt innerhalb des HTML-Elements definiert, auf das sie angewendet werden sollen.

Wie ist kritisches, unkompliziertes CSS einzubinden, um die CSS-Bereitstellung zu optimieren? Siehe WpFaster.org.

Schritt 1
Identifiziere das gesamte CSS der Website

Öffne Autoptimze (Einstellungen → Autoptimze) und aktiviere das Kontrollkästchen "Gesamten CSS-Code Inline einfügen?"
Öffne Autoptimze (Einstellungen → Autoptimze) und aktiviere das Kontrollkästchen "Gesamten CSS-Code Inline einfügen?"
Klicke anschließend unten im Autoptimize-Dashboard auf "Einstellungen speichern und Cache leeren". Im Zusammenhang mit Seitencaching Plug-in auch dessen Cache leeren.
Öffne in einem anderen Browser-Tab mit leerem Cache (Privatfenster) den Quellcode der Website (Rechtsklick → 'Seitenquelltext einblenden').
Das HTML wird (wahrscheinlich) jetzt riesig sein. Kopiere bitte alles zwischen den Tags <style type = "text / css" media = "all"> ← und → </ style>.

Schritt 2
EXTRAhiere das kritische CSS

Öffne diesen CSS-Generator für kritische Pfade und gebe unter Nummer 1. URL die entsprechende URL der Website in das Feld ein.
Füge den Quellcode, den Du aus der Website kopiert hast, in das Feld unter # 2. FULL CSS ein.
Füge den Code, den Du aus dem Quelle der Website kopiert hast, in das Feld unter # 2 (FULL CSS) ein.
Klicke obig auf die Schaltfläche #3 'Create Critical Path CSS' (CSS für kritischen Pfad erstellen).
Kopiere den generierten CSS-Code unter CRITICAL PATH CSS.
Kopiere den generierten CSS-Code unter CRITICAL PATH CSS.
Der erzeugte Code ist noch nicht ganz optimal, siehe Allerstorfer.at – er muss erst minified werden. Also das soeben erzeugte CRITICAL PATH CSS Code im CSS-Minifier bei Input CSS einfügen:
Also den soeben erzeugten CRITICAL PATH CSS Code kopieren und im CSS-Minifier bei Input CSS einfügen
Danach auf Minify klicken. Der fertige CSS-Code für Autoptimize ist dann bei Minified Output:
Der fertige CSS-Code für Autoptimize ist dann bei Minified Output.

Schritt 3
WENDE das kritische CSS an

Kehre zu Autoptimize zurück und aktiviere das Kontrollkästchen "CSS-Code Inline einfügen und verschieben?".
Gebe den Code, den Du aus dem Critical Path CSS Generator kopiert und in Minify optimiert hast, in das Feld unter dem Optionsfeld "CSS-Code Inline einfügen und verschieben?" ein:
Gebe den Code, den Du aus dem Critical Path CSS Generator kopiert und in Minify optimiert hast, in das Feld unter dem Optionsfeld 'CSS-Code inline einfügen und verschieben' (Inline and Defer CSS) ein.
Klicke unten im Autoptimize-Dashboard auf "Einstellungen speichern und Cache leeren".

Und das ist es! Sie sind gut zu gehen.

Das kritische CSS extrahiert, die Bereitstellung optimiert und die Bemerkungen! – eine Erfahrung:

Folglich sollte bei Websites mit vielen Anpassungen Vorsicht geboten sein! Die CSS-Dateien werden mit Autoptimize später (Defer) geladen, daher kann es in den ersten Sekunden zu einer gestörten Darstellung kommen, insbesondere auf mobilen Betriebssystemen. Ein Beispiel dafür ist die Website 'wegerl.at', bei der aufgrund umfangreicher Theme-Anpassungen dieses Phänomen sichtbar würde. Im Gegensatz dazu funktioniert es gut auf mobilen Betriebssystemen, wenn keine Änderungen am Theme selbst vorgenommen wurden, wie zum Beispiel bei https://ditmars.bplaced.net/wiki/.

Das kritische CSS und HTTP 2

Der kritische Pfad, insbesondere im Kontext des kritischen CSS, bleibt auch unter HTTP/2 relevant, wenn auch mit einigen Unterschieden im Vergleich zu HTTP/1.

Der Fokus hat sich leicht verschoben, da HTTP/2 Multiplexing ermöglicht, was bedeutet, dass mehrere Ressourcen gleichzeitig über eine Verbindung geladen werden können. Dadurch wird das Blockieren des Renderings durch CSS weniger kritisch, da der Browser mehrere Ressourcen gleichzeitig anfordern und verarbeiten kann. Dennoch bleibt die Optimierung des kritischen CSS von Bedeutung, da es immer noch den anfänglichen Renderprozess beeinflusst.

Indem man das für das Rendering wesentliche CSS priorisiert und optimiert, kann man weiterhin die Ladezeiten verbessern. Zudem ermöglicht das kritische CSS auch unter HTTP/2 eine schnellere visuelle Darstellung der Seite, indem essentielle Stile priorisiert und früher geladen werden, was die wahrgenommene Ladezeit reduziert.

Obwohl HTTP/2 einige Verbesserungen in Bezug auf das Laden von Ressourcen bringt, bleibt die Optimierung des kritischen Pfads, einschließlich des kritischen CSS, ein wichtiger Aspekt für eine effiziente Seitendarstellung.