Willkommen beim WP Wegerl.at 'Lesemodus'!
Entspanntes Lesen und spannende Artikel warten auf dich.
Entdecke unsere besten Beiträge und genieße den Lesemodus.
Autoptimize
smilies.4-user.de

Autoptimize
+ Async JavaScript?
… hier von Erfolg

Bild, Automatisierung von byrev
Info echo
OpenClipart-Vectors-katze-1

Ist der Classic-Editor schon zu kennen? –
"Advanced Editor Tools – ist so klasse!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-2

Anklickt Classic-Editor mit Advanced Editor Tools
"Advanced Editor Tools – ist das ausgezeichnete!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-3

Klassischen Editor anwenden! – und …
"Advanced Editor Tools – ist so sehr gut !"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-7

… die Welt gehört dem, der sie genießt.
"Advanced Editor Tools – und tut sehr gut!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-4

Advanced Editor Tools aktive Installationen: 2+ Millionen
"Advanced Editor Tools – ist so fabelhaft!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-5

Ansprechend! – so gehts hier zur Lancierung
"Advanced Editor Tools – ist de luxe!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-6

… und NEU! – Classic Widgets
"Classic Widgets – sind so grandiose!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-8a

Werkraum ist Werkraum und Frontend ist Frontend
Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker
"Advanced Editor Tools – ist so fein!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Die Verbesserung der Website-Performance mithilfe von Autoptimize und Async JavaScript ist nicht nur auf komplexe Websites beschränkt. Während sich diese Tools möglicherweise weniger für Websites eignen, deren Themenstruktur unverändert bleibt und nur wenige Plug-ins aufweist, können sie dennoch auch auf normalen Websites von Nutzen sein.

Auf einer Seite mit einer Vielzahl von Plug-ins und variierenden CSS-Stilen können Autoptimize + Async JavaScript jedoch eine herausfordernde Einarbeitung darstellen. Die Anwendung dieser Gadgets kann zwar anfangs kompliziert erscheinen und möglicherweise zu Widersprüchen in den Messergebnissen führen, aber sie bieten auch Erfolge bei der Optimierung der Ladezeiten. Es ist wichtig zu beachten, dass selbst auf Standard-Websites diese Tools die Performance verbessern können, wenn sie richtig angewendet werden.

Warum Performance-Tests? Ein Performanz-Plugin ist nicht nur wegen der Messwerte wichtig, sondern vor allem, um die daraus resultierenden Verbesserungsvorschläge umzusetzen.

Bei der Durchführung von Pagespeed-Tests steht nicht allein der Perfektionismus eines hohen Scores im Vordergrund. Es geht vielmehr darum, die konkreten Vorschläge zur Verbesserung der Website-Leistung zu erhalten und diese umzusetzen. Ein Score von 100 % ist in den meisten Fällen unrealistisch und nicht zwingend erstrebenswert. Der primäre Fokus sollte auf der Anwendung der empfohlenen Optimierungen liegen, um die Funktionalität und das Benutzererlebnis zu verbessern.

Mein TEST ZUR PERFORMANZ:

imagePerformance und PageSpeed… dabei ist all das so relativ —

Die optimale Funktionalität wird durch die Hosting-Engine (OPcache) gewährleistet, selbst ohne Nutzung eines Caching-Plugins oder HTTP/2 Server Push. Das war bereits Teil meiner früheren Beschreibung.

Und was bringt eine Website ohne angemessenen Input? Die Performance ist schließlich mehr als nur Messwerte. Das allein ist heutzutage kaum noch bemerkenswert. Führe doch beispielsweise einen Test mit Lighthouse auf der Website ditmars.bplaced.net durch.

PerformanzGeschwindigkeitsindex
Ohne Plug-in*882,9 s
Autoptimize952,4 s
AsyncJavaScript932,4 s
Autoptimice + AsyncJavaScript991,7 s
Asset CleanUp: Page Speed Booster932,6 s

*Ohne Plug-in, d. h. der Form welche in der Tabelle sind.

Überlege, was für deine Website am besten geeignet ist. Das Verständnis für Plug-ins ähnelt oft anderen. Schauen wir uns nun genauer an, wie sich Autoptimize + Async JavaScript in dieses Thema einfügen. Dies dient sowohl als Leseempfehlung für vertiefende Kenntnisse als auch für eine erfolgreiche Umsetzung!

Ich möchte dich hier nicht verwirren, denn in der Regel funktioniert die Performanz ohne zusätzliche Plug-ins sehr gut, insbesondere mit der Hosting-Engine der heutigen Server.

Möglicherweise kann durch 'Autoptimize + Async JavaScript' ein minimaler Unterschied beim ersten Laden der Website erzielt werden, nachdem der Beitrag gelesen wurde.

Das Ganze dient als Schritt zum Lernen.

Das Plug-in Autoptimize optimiert sowohl den Input als auch den Output von WordPress. Dadurch verbessert es die Website-Performance, insbesondere in Verbindung mit HTTP/2. Dazu gehören auch das Plug-in Async JavaScript sowie ein Seiten-Caching-Plug-in wie WP Super Cache. Zudem könnte die Verwendung des Plug-ins 'Use Google Libraries' für Skripte in Verbindung mit einem CDN von Vorteil sein. Beachte dazu den Titel CDN und Google AMP.

TEST-Aufzeichnung aus dem Jahr 2019: Benchmarktest auf PageSpeed Insights
  • Website https://wegerl.at/autoptimize-und-async-javascript
    • Die Darstellung des Ergebnisses ist für Desktop. In Mobil 67 von 100 Punkten.
  • Website https://ditmars.bplaced.net/wiki/webspace-registrieren/
    • Die Darstellung des Ergebnisses ist für Mobil. In Desktop 100 von 100 Punkten.

Bemerkung: die Werte waren nicht jedem Test identisch. Und inwieweit das im Heute gewichtet wird, das sei dahingestellt.

Im heutigen Pagespeed-Test lassen die Ergebnisse eher wünschen übrig. Das liegt daran, dass diese Website viele Features (Animationen) hinzugefügt hat. Als Webmaster muss ich eingestehen, dass meine Fähigkeiten in Bezug auf Performance nicht gerade herausragend sind …

Die Konfiguration von Plug-in Autoptimize und Async JavaScript wird in einer Testreihe untersucht. Für 'wegerl.at' beinhalten einzelne Seiten verschiedene Plug-ins wie den News Ticker und Page Loading Effects. Außerdem werden Tabby Responsive Tabs sowohl hier als auch dort verwendet, was bedeutet, dass das JavaScript sorgfältig berücksichtigt werden muss. Zusätzlich ist auch ein automatischer Dunkel-Modus während bestimmter Zeitspannen aktiv.

Bspw.
Google Lighthouse. Wegerl.at Performance Tagmodus 75 vs. automatisch Dunkelmodus 50 Punkte
Google Lighthouse. Wegerl.at Performance Tagmodus vs. autom. Dunkelmodus.

– also das ist so des Erstaufrufs der Website.

Autoptimize und Async JavaScript

Bevor wir uns in die Details der Einstellungen begeben, möchte ich dir eine kurze Einführung zu den FAQ zu Autoptimize und Async JavaScript geben. Dieser Abschnitt bietet auch einen Überblick über die folgende Beschreibung der Einstellungen.

Nachlese FAQ Autoptimize und Async JavaScript

Obwohl sich anfänglich Widersprüche zeigten und ich in Erwägung zog, 'Autoptimize' abzulehnen, führte letztlich der erzielte Erfolg dazu, dass ich das Plug-in weiterhin verwende.

Der Erfolg wird erst nach dem Test auf deiner Website ersichtlich. Unser Ziel ist es, eine ideale Vorlage für komplexe Szenarien wie dieses zu schaffen, um jede Website optimal zu gestalten. Viel Erfolg wünschen wir euch, liebe Leserinnen und Leser!

Die folgenden Einstellungen sind nun genauso ’schön', wie es unsere Website sein möchte.

Inhalsverzeichnis

Tab 1: 'Autoptimize' ist für die HTML-, CSS- und JavaScript-Optimierungen.
Tab 2: Die Funktion von 'Async JavaScript', um das Laden von JS zu verbessern.

Autoptimize

Autoptimize

Einstellungen Autoptimize

Mit Autoptimize funktioniert das mit Ausschlüssen von gewissen JavaScript. Alles in allem, da auch noch all den Browserb passen sollte. Browser Firefox machte da mal missfallen.

 JS, CSS & HTML

JavaScript-Optionen
  • JavaScript-Code optimieren? Ja
  • JS-Dateien zusammenfügen? Ja
    • Es wird häufig angenommen, dass bei der Verwendung von HTTP/2 das Zusammenführen von Dateien nicht erforderlich ist, da HTTP/2 eine parallele Datenübertragung ermöglicht, was die Verwendung mehrerer kleiner Dateien gegenüber einer großen Datei bevorzugt. In der Praxis zeigt sich jedoch, dass das Zusammenführen von Dateien zu besseren Messergebnissen führt. Beim Zusammenführen von JavaScript-Dateien besteht jedoch das bekannte Problem, dass bestimmte Skripte nach dem Zusammenführen nicht mehr richtig funktionieren. Das betrifft häufig Scripte die sogenannte Ajax-Requests ausführen. Weitere Details dazu finden sich im nächsten Punkt.
  • Das folgende wird vom Plu-in selbst nicht empfohlen: Inline-JS zusammenfügen, JavaScript im <head> erzwingen und Try-Catch-Block hinzufügen.
  • Folgende Skripte von 'Autoptimize' ausschließen, das ist ein bspw wie es hier von 'Autoptimize' automatisch eingetragen ist:
    wp-includes/js/dist/, wp-includes/js/tinymce/, js/jquery/jquery.js. Weiter war dann zur Funktionalität noch die Datei anzufügen: js/ple.preloader.min.js, js/tabby.js, js/dark-mode.min.js.
  • Im Gesamten dann: wp-includes/js/dist/, wp-includes/js/tinymce/, js/jquery/jquery.js, js/jquery/jquery.min.js, js/ple.preloader.min.js, js/tabby.js, js/dark-mode.min.js
CSS-Optionen
  • CSS-Code optimieren? Ja
  • CSS-Dateien zusammenfügen? Ja/Nein. Für die Tests auf Wegerl.at lautet die Antwort Nein. Andernfalls würden sich die Dateien gegenseitig beeinflussen, was bereits hier sichtbar ist: Der Such-Button und Ähnliches weichen von ihrer üblichen Form ab, da sie mit anderen Stilen kollidieren.
    • Sonst gilt hier das gleiche wie oben bei den JS-Files.
  • Auch Inline-CSS zusammenfügen? Ja/Nein.
  • Render-blockierendes CSS entfernen?→ CSS-Code als Inline-CSS nach dem Laden der Seite einfügen Nein – für wegerl.at.
    • Das 'Nein' ergibt sich aus der Tatsache, dass bei individuellen Anpassungen an Websites Vorsicht geboten ist, da hier CSS-Dateien von Autoptimize später geladen werden können. Dies kann zu einer verzögerten Anzeige in den ersten Sekunden des Ladevorgangs führen, insbesondere bei mobilen Betriebssystemen. Ein Beispiel hierfür ist die Website 'wegerl.at'. Anpassungen am Theme können hier zu Beeinträchtigungen führen. Es ist ratsam, dem Beitrag Das kritische CSS – was ist dieser kritische Pfad? zu folgen.
  • Gesamten CSS-Code Inline einfügen? Nein
  • Folgende CSS-Dateien von Autoptimize ausschließen:
    wp-content/cache/, wp-content/uploads/, admin-bar.min.css, dashicons.min.css
    (Diese sind von Autoptimize automatisch eingetragen.)
HTML-Optionen
  • HTML-Code optimieren? Ja.
CDN-Optionen
  • CDN-Basis-URL: Nein, keine
    • Mithin einfügend von Libraries* funktioniert hier das Tabmenü nicht mehr und der Pfeil für die ausgehenden Links ist weg. Hingegen ist das mit dem CDN durch Plug-in Use Google Libraries funktionell! Interesses s. CDN und Google AMP
      * https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js
Weitere Optionen
  • Zusammengefügte CSS-/Skript-Dateien als statische Dateien speichern? Ja! – wenn da nicht ja, dann funktioniert Browser Firefox auf Wegerl.at weder der Dunkel-Modus noch das Tab-Menü.
  • Ausgeschlossene CSS- und JS-Dateien minimieren? Angehakt, Ja
  • 404-Fallbacks aktivieren? Ja
  • Auch für angemeldete Benutzer optimieren? Ja das Häkchen belassen.
    • Dank dieser Funktion behalte ich als angemeldeter Administrator stets den Überblick darüber, wie sich Änderungen an den Autoptimize-Einstellungen auf die Website auswirken.
  • Konfiguration pro Beitrag/Seite aktivieren? Ja/Nein

Bilder

  • Bilder ohne Vorbereitung optimieren und ausliefern mit Shortpixel’s globalem CDN*. Nein.
    * S. Info im Titel CDN und Google AMP
  • Bilder verzögert laden? Ja (dieses erfolgt sehr dezent). Oder auch Nein, wenns nicht gefällt! Im heute geht das Lazy Load aus dem Core von WordPress – also das wäre durch das Plug-in Disable Lazy Load (By Jeff Starr) wegzumachen, aber hier im Zusammenspiel mit Autoptimize, wird Lazy Load von WordPress automatisch deaktiviert, wenn das Häkchen dort für "Bilder verzögert laden?" gesetzt ist. Das brachte dann hier der überladenen Seitenleisten (siehe in der Headerleiste LESEMODUS VS.) von Animationen immerhin 10 Punkte an mehr der Performances.

 Extras 

Weitere Auto-Optimierungen
  • Google Fonts
    • Fonts kombinieren und asynchron laden mit webfont.js
    • oder: Im Head kombinieren und verlinken (Fonts laden schnell, aber blockieren das Rendern). Je nachdem wie das mit dem Laden funktioniert. Bspw. hier auf wegerl.at war das 'im Head kombinieren und verlinken' besser. Inzwischen sind hier die Fonts selbst gehostet, s. evtl. Google Fonts einbinden. Also ist hier dann das mit Google Fonts entfernen.
    • Doch die Sache mit dem Entfernen konnte nicht wirklich reibungslos ablaufen, deshalb: Siehe Google Fonts, WordPress-Themes und die DSGVO. 1er-Fix! – das Einzweck-Plug-in Local Google Fonts erkennt Google-Schriftquellen und um sie lokal zu verwenden. – und 2er-Fix! – die Plug-ins laden so oft Google-Fonts: nicht mit Disable Google Fonts!
  • Emojis entfernen: Ja/Nein
  • Abfragezeichenfolgen von statischen Ressourcen entfernen: Nein! – also "kein" Häkchen setzen. Im TEST mit "ja" ergab sich folgendes:
    • Es kam vor, dass die Mediathek nicht mehr geöffnet werden konnte oder es nicht möglich war, einem Beitrag eine Mediendatei hinzuzufügen. Dieses Problem wurde durch vorherige unglückliche Einstellungen verursacht. Nachdem die Option 'Abfragezeichenfolgen von statischen Ressourcen entfernen' deaktiviert wurde, war das Problem behoben. Anschließend mussten bestimmte Bilder entfernt werden, die eine Störung verursacht haben könnten. Nach der Reaktivierung war alles wieder in Ordnung.
  • WordPress-Block-CSS entfernen: Ja/Nein
  • Zu Dritt-Domains vorverbinden (Fortgeschrittene Benutzer)
    • Ja/Nein, hierzu fehlt mir der Anschluss.
  • Asynchrone JavaScript-Dateien (Fortgeschrittene Benutzer) und da der Zeile: Du hast 'Async JavaScript' installiert, "Konfiguration von asynchronem JavaScript am besten dort vornehmen." – ebenda so:
Tab 2: Die Funktion von 'Async JavaScript', um das Laden von JS zu verbessern.

Async JavaScript

Das Plug-in Async JavaScript

Async JavaScript

"Autoptimize" hat normalerweise eine Funktion, um JavaScript automatisch ans Ende der Seite zu verschieben. Dabei blockiert das JavaScript das Rendering der Seite, bis der gesamte HTML-Inhalt geladen ist, was eventuell zu längeren Ladezeiten führen kann.

Wenn du gleichzeitig das Plug-in "Async JavaScript" verwendest und die Option "Asynchrones JavaScript für Autoptimice" darauf aktivierst, kann dies die Situation verbessern. Das bedeutet, dass bestimmte JavaScript-Dateien asynchron geladen werden. Dadurch wird das Blockieren des Renderings verringert, was zu einer schnelleren Ladezeit und einer früheren Interaktivität der Seite führen kann.

Wenn das Asynchrones JavaScript für Plugins mit Autoptimize reibungslos funktioniert, dann hat das von SinN, aber nicht wenn du "Async JavaScript" so konfigurierst, dass es die JavaScript-Dateien verschiebt, ähnlich wie es "Autoptimize" tut, könnte das in gewisser Weise redundant sein. Beide Plug-ins würden dann versuchen, die JavaScript-Dateien an das Ende der Seite zu verschieben, was zu einem ähnlichen Ergebnis führen könnte wie bei der Verwendung von "Autoptimize" allein.

Autoptimize ermöglicht es aber, bestimmte Skripte von der Optimierung auszuschließen – welche ohnehin ausgeschossen sein müssen. Wenn diese ausgeschlossenen Skripte jedoch gleichzeitig asynchron geladen werden sollten, um die Leistung oder Funktionalität der Website sicherzustellen, könnte "Async JavaScript" helfen, diese Skripte separat und asynchron zu laden.

In diesem Szenario könnte "Async JavaScript" als Ergänzung zu Autoptimize verwendet werden, um sicherzustellen, dass die ausgeschlossenen Skripte, die nicht von Autoptimize optimiert werden, dennoch asynchron geladen werden, um eine optimale Leistung der Website zu gewährleisten.

Einstellungen Async JavaScript

 Settings 

Enable Async JavaScript
  • Enable Async JavaScript? Ja.
  • Auch Async JavaScript für angemeldete Benutzer aktivieren? Ja/Nein
Async JavaScript Method
  • Method: Async/Defer. – egal so. – der Messwerte sind so auf und ab da und dort minimalste. Hier der Website wäre aber Defer verbindlich. Weiter siehe die Bemerkung am Schluss.
jQuery
  • jQuery Method: Exclude
    Hier ist dies auch meist die Empfehlung!
Script Exclusion

Das kann hier nun ein bspw sein, aber dies war hier ein muss:

js/ple.preloader.min.js

Aber dann sollte doch das gesamte Plug-in ausgeschlossen sein, siehe nächst Plugin Exclusion.

Plugin Exclusions

Das ist hier das Plug-in Tabby Link to Tab, Tabby Responsive Tabs' und WP Dark Mode.

Async JavaScript For Plugins

Obwohl nicht empfohlen, können einige Themes / Plugins JavaScript-Dateien laden, ohne die Funktion wp_enqueue_script zu verwenden. In einigen Fällen ist dies für die Funktionalität des Themes / Plugins erforderlich.

Wenn diese Themes / Plugins einen Hook enthalten, mit dem das Laden der JavaScript-Datei manipuliert werden kann, kann Async Javascript diese Themes / Plugins möglicherweise unterstützen.

Plug-in Autoptimize, hier im Scenario der Website
  • Fallbeispiel: Enable Autoptimize Support: ja, ein Häkchen.
    • Bei der jQuery-Methode: Async/Defer! – Hier auf Wegerl.at empfiehlt sich die Einstellung auf 'Defer', um die reibungslose Funktionalität der Website zu gewährleisten. Dadurch wird das Plug-in 'Async JavaScript' überflüssig. Mit Autoptimize wird das JavaScript automatisch ans Ende der Seite verschoben. Damit ist aber auch das Häkchen bei 'Enable Autoptimize Support' nicht erforderlich, also ist das nicht anzuhaken und Autoptimize bleibt außen vor.
    • Darüber hinaus könnte das Plug-in "Async JavaScript" bei ausgeschlossenen Skripten in "Autoptimize" und bei 'Async JavaScript Method: async' diese ausgeschlossenen Skripte separat und asynchron laden. Jedoch sollte das Häkchen bei 'Enable Autoptimize Support' dabei nicht gesetzt sein.

Als Fazit entscheide ich mich dafür, die Website ohne das 'Async JavaScript'-Plugin zu betreiben, da die Browser an verschiedenen Stellen unterschiedlich reagieren. Dadurch erweist es sich hier als ineffizient. Ich bevorzuge, auf solch ausgefeilte Technik zu verzichten und bin zufrieden, solange alles reibungslos funktioniert.

Empfohlene ähnliche Artikel

Unter diesem Beitrag findest du in der Rubrik 'Das könnte dich auch ansprechen' die Themen 'WP: Caching unter der Lupe – Einblicke in die Unterschiede' und 'WP: Docket Cache – Object caching + OPcache', als zusätzliche Empfehlungen zum Thema Cache.

zeitmaschine, gifzentrale.com

Aktualisiert im Jahr 2023-August