Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Das kritische CSS, auch bekannt als kritischer Pfad, ist der entscheidende Pfad zum Rendern einer Webseite. Es ist von großer 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 durchlaufen muss, und durch das Einbetten in die Seite (Entfernen der HTTP-Anforderung) lässt sich die Seite erheblich schneller rendern. Das ist in etwa das Hauptprinzip des kritischen CSS, wie es oft beschrieben wird.
Aber weißt Du nun, was der kritische Pfad
ist und wie das zu verstehen ist? …
Folgender Hinweis erklärt das richtig. – und
hier: Was ist Critical CSS?
Dieser Beitrag ist im Anschluss von Autoptimize + Async JavaScript.
Das kritische CSS und
dem Stand mit HTTP 2
Beim Seitenaufbau stellt das Laden von Dateien ein Problem dar. Mit HTTP1.1 können nur eine begrenzte Anzahl von Dateien in einem Roundtrip übertragen werden, was das Rendern der Seite verlangsamt. Glücklicherweise wurde dieses Problem mit dem neuen Standard HTTP2 behoben. Durch HTTP2 werden alle Anfragen an den Server gebündelt und die Dateien in einem einzigen Rückgabepaket übertragen. Dadurch wird die Effizienz verbessert, wodurch die Einbindung von Inline CSS nicht mehr so entscheidend ist wie zuvor.
Indessen, die maßgeblichen Schritte sind hier nachvollzogen! – musste doch sein, das so zu probieren … dazu ist im Anschluss auch noch wichtige Bemerkung.
Die CSS-Bereitstellung optimieren
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? S. 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 bspw. Cache Enabler 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, s. 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!
Folglich sollte bei Websites mit vielen Anpassungen Vorsicht geboten sein! Die CSS-Dateien werden später 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/.
Aktualisiert im Jahr 2022-Juni
