Autoptimize + Async JavaScript

Inline-Inline-Inline-Optimierung

Inline-Inline-Inline-Optimierung

Inline-Inline-Inline-Optimierung

Im Folgenden ist für Websites individueller Anpassungen acht zu geben! Da dieser Option die CSS Dateien später laden, kann es in den ersten Sekunden des Ladevorgangs zu gestörter Wiedergabe kommen. Insbesondere mobiler Betriebssysteme.

Die CSS-Bereitstellung optimieren

Kritisches CSS – was ist dieser kritische Pfad?

Der kritische Pfad ist der Pfad zum Rendern einer Webseite. Dieser ist wichtig, bevor dies geschehen kann. CSS Stylesheets blockieren das Rendern. Solange der Browser die Stylesheets nicht angefordert, empfangen, heruntergeladen und analysiert hat, bleibt die Seite leer. Durch die Reduzierung der CSS-Menge, die der Browser durchlaufen muss und durch das Einfügen in die Seite (Entfernen der HTTP-Anforderung) ist die Seite viel, viel schneller zu rendern.

Dessen Zusammenhangs hat Autoptimize die Option 'Inline and Defer CSS' auf gut Deutsch, 'CSS-Code inline einfügen und verschieben'

Wie ist kritisches, unkompliziertes CSS einzubinden, um die CSS-Bereitstellung zu optimieren? S. WpFaster.org und in Übersetzung.

Die maßgeblichen Schritte sind hier nachvollzogen:

Schritt 1: Identifiziere das gesamte CSS der Website

  1. Ö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?“
  2. 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.
  3. Öffne in einem anderen Browser-Tab mit leerem Cache (Privatfenster) den Quellcode der Website (Rechtsklick → 'Seitenquelltext einblenden').
  4. 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

  1. Öffne diesen CSS-Generator für kritische Pfade und gebe unter Nummer 1. URL die entsprechend URL der Website in das Feld ein.
  2. 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.
  3. 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.
  4. Kopiere den generierten CSS-Code unter CRITICAL PATH CSS.
  5. Der erzeugte Code ist noch nicht ganz optimal, s. Allerstorfer.at – er muß 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

  1. Kehre zu Autoptimize zurück und aktiviere das Kontrollkästchen „CSS-Code Inline einfügen und verschieben?“.
  2. 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.
  3. Klicke unten im Autoptimize-Dashboard auf „Einstellungen speichern und Cache leeren“.

Und das ist es! Sie sind gut zu gehen.

War der Beitrag hilfreich?