Info echo

Ist der Classic-Editor schon zu kennen? –

"Advanced Editor Tools – ist so klasse!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

---

Info echo

Anklickt Classic-Editor mit Advanced Editor Tools

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

---

Info echo

Klassischen Editor anwenden! – und …

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

---

Info echo

… 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

Advanced Editor Tools aktive Installationen: 2+ Millionen

"Advanced Editor Tools – ist so fabelhaft!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

---

Info echo

Ansprechend! – so gehts hier zur Lancierung

"Advanced Editor Tools – ist de luxe!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

---

Info echo

… und NEU! – Classic Widgets

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

---

Info echo

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

---

Hier gehts um die Performanz mit Autoptimize. Dazu auch Beobachtung mit Plug-in Async JavaScript. Das ist weniger ein Thema für eine Website, deren Theme so belassen ist, wie es ist. Ob des Frontends nur sehr wenig Plug-ins sind. Ganz anders ist es einer Website der Ausstattung durch Plug-ins und in Variation des CSS. Demnach kann die Ladezeit oder zumindest können die Messergebnisse zu wünschen lassen. Somit gibt es so Gadgets wie Autoptimize + Async JavaScript. Das alles in Einarbeitung scheint sehr verkompliziert.  – Widersprüche ergeben sich. – aber auch der Erfolg!

Performanz Plug-in
der Messwerte ist mir das nicht …

Warum machst du Performance-Tests?
Um einen Score zu erreichen oder um Vorschläge zur Verbesserung deiner Website zu bekommen, die du anschließend versuchst umzusetzen?

Und kannst du die gemachten Vorschläge umsetzen? Einen Score von 100 % zu erreichen ist in den meisten Fällen unrealistisch und auch nicht dienlich. Niemand besucht deine Website, weil sie so einen guten PageSpeed-Score hat. Selbst für Suchmaschinen sind die Ergebnisse irrelevant.

Bego WordPress.ORG

Mein TEST ZUR PERFORMANZ

Performance und PageSpeed… dabei ist all das so relativ —

Das alles funkt so mit der bplaced Hosting-Engine* am besten: ohne ein Caching-Plugin, ohne HTTP/2 Server Pusch und ohne… so hab ich das schon mal geschrieben.

 *Die Schleichwerbung da als Dank für den sehr guten Support!

…und der Website mit guten Input?! – Die Performanz ist nur mehr der Messwerte 🙂 Also gar zu Bemerkenswert ist das im Heute nicht mehr. So TEST mit Lighthouse bspw der Website ditmars.bplaced.net

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

Die Ergebnisse der Tests sind als so zum Bessermachen. Aber alles von Punkten kann vergebliche Liebesmüh…

Nun, was passt für Deine Website?

Das Verständnis zu den Plug-ins gleicht wie dem anderen. Also, und wenn auch. Das ist im Folgenden des Themas zu Autoptimize + Async JavaScript. …zur Nachlese als Lernschritt, und zur erfolgreichen Anwendung!

Und nun zum Erfahrungswert(!)
von Einstellungen

Und so möchte Dich da nicht vergaloppieren, denn normalerweise ist so ohne von Plug-in zur Performanz sehr gut! –  das allein mit bplaced Hosting-Engine.

Im Folgenden ist das ein TEST, ob dessen der Entwicklung von HTTP/2, PHP 8, OP-Cache und dem Optimierungspotenzial der Server. Somit ist schon gesagt, dass die weitere Optimierung schwerlich möglich ist. D. h. im Heute auch für Webspace über Share-Webhosting-Services – soweit durch die Teilung am Server und der User in Vollbesetzung – nur mehr sehr minimal wenn Überhaut merklich ist. In Folge ginge es zur Performanz auch nur mehr um Nuancen.

Evtl. mit 'Autoptimize + Async JavaScript' für Erstanklicken der Website und nach der Lesezeit von so Beitrag dann ein-zwei Ticks Unterschieds herausholen? Denn ob mit oder ohne Optimierungen ist dem Durchklicken so wie kein Unterschied mehr möglich. 'Noch mehr' geht hervor durch Reduzierung von Features der Website.

… und das Ganze ist als Lernschritt nett

Mit Plug-in Autoptimize ist aus dem CMS* der Input bzw. Output zu optimieren. Als solches verbessert das Plug-in die Performanz der Website. Mit HTTP/2 umso mehr! (steht auf dem Blatt) Dazu gehört auch das Plug-in Async JavaScrip und ferner ein Seitencaching Plug-in wie Cache Enabler (testen, ob?). Weiters kann das mit dem CDN für Skripte durch das Plug-in Use Google Libraries, von nutzen sein?! S. im Titel CDN und Google AMP.

^{* CMS, das sind Content-Management-Systeme, bspw WordPress.}

Autoptimize und Async JavaScript

• Nachlese von FAQ Autoptimize und Async JavaScript.

Weitere Performanz aus dem CMS ist schwerlich möglich. … Der Website 'Wegerl' mit Menge an Features von Plug-ins sind es zu Performanz mit Plug-in Autoptimize und Async JavaScript etwa 73 Punkte. Zuletzt mit dem TEST der Plug-ins + Cache Enabler noch weniger.

Die Einstellung von Plug-in Autoptimize und Async JavaScript in Versuchsreihe. Da für 'wegerl.at' sind u. a. bspw jeder Seite das Plug-in News Ticker und Page Loading Effects. Ferner ist hier wie da und dort das Tabby Responsive Tabs. So manch des JavaScripts ist da zu berücksichtigen. In Zeitspanne ist auch automatisch Dunkel-Modus.

Das soll heißen, erst im Test zu deiner Website ergeht dann der Erfolg. Aber so als Vorlage von kompliziert, wie hier es ist, möchte das ein Ideal sein. So um jede Website zu optimieren.

… Widersprüche ergeben sich. – so mocht ich schon sagen so wie 'Autoptimize' ade–.

Fazit vorab

(2021-12) Der Website so bspw wie hier Wegerl.at. So ohne Performanz-Plug-in sind es nach Google Lighthouse 50 Punkte.

Und der schon Hausnummern von wegen Punkten, das mag auch schwankend sein …

Autoptimize

So mit Autoptimize sind es um 70 Punkte und das nur so funktioniert mit Ausschlüssen von gewissen JavaScript. Alles in allem, da auch noch der Browser das passen sollte. Browser Firefox machte da mal missfallen. Sonst wär schon so Optimierung von 80 Punkten nach Lighthouse drinnen.

Async JavaScript

Es bleibt nicht viel mit Async JavaScript als das Verhältnis mit Autoptimize 73 Punkte indes von 3 Punkte.

… und mit autom. Dunkelmodus

Also obiges ist samt Begrüßungs-Pop-up. Aber dann nachts noch der Zeit, welche hier automatisch den Dunkelmodus aktiviert. Mithin sind es der Performanz, wenn denn nur mehr um die 50 Punkte. Das Ergebnis ergeht der 'Total Blocking Time' so. Bemerkung: Des Tests automatischen Dunkelmodus ist auf die Zeitverschiebung von dort, wo Lighthouse den Test abruft, zu achten.

Bspw

– also das ist so des Erstaufrufs der Website.

… Also das ist nun hier der Website, welche auch so Touch von "Schön" sein möchte.

Und Euch, liebe Leser, ist viel Erfolg zu wünschen! – denn es geht auch anders.

Einstellungen Autoptimize und Async JavaScript

Das ist so Beispiel wie es hier auf Wegerl.at soweit zum Erfolg gereicht. Das ist hier …

… so Vorlage im Tab-Menü

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.
Tab 3: Bspw so TEST

Autoptimize

 Reiter JS, CSS & HTML 

JavaScript-Optionen

• JavaScript-Code optimieren? Ja
• JS-Dateien zusammenfügen? Ja
  • Ich habe da zwar mal so wo gelesen: Wenn die Website mit HTTP/2 läuft, ist das Zusammenfügen der Dateien nicht anzuwenden. Da mit HTTP/2 die Daten zeitgleich laden, ist dies besser als eine große Datei. Dem ist aber hier nicht so der Funktion und Messergebnisse sind besser mit zusammenfügen. Es gibt beim Zusammenfügen von JavaScript eigentlich nur das Problem, dass es Scripte gibt, die nach dem Zusammenführen nicht mehr funktionieren. Das betrifft häufig Scripte die sogenannte Ajax-Requests ausführen. Siehe nächst Pkt.
• 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. So der Tests gilt hier für Wegerl.at Nein.
  • 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
  • Zum Obigem ein Ja, somit ist / wäre nach dieser Anleitung vorzugehen. Das Nein geht daraus hervor, dass für Websites mit Anpassungen acht zu geben ist! – da die CSS Dateien später laden. Sooft des Ladevorgangs kann es in den ersten Sekunden zu gestörter Wiedergabe kommen. Besonders wenn mobilen Betriebssystemen. Bspw. würde das hier der Website 'wegerl.at' ersichtlich.  D. h. von wegen, Anpassungen des Themes. Hingegen ohne das Theme selbst zu verändern, bspw. https://ditmars.bplaced.net/wiki/ ist das auch in mobilen Betriebssystemen okay! –, aber mit HTTP/2 sind dieser Art Optimierung fast überflüssig!
• 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/Nein
• Konfiguration pro Beitrag/Seite aktivieren? Ja/Nein

 Reiter 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! – aber das geht im Heute aus dem Core von WordPress sowieso das Lazy Load? – also ich habe das durch das Plug-in Disable Lazy Load (By Jeff Starr) weggemacht und dafür das Häkchen dort für "Bilder verzögert laden?" gesetzt. Das brachte dann hier der überladenen Seitenleisten von Animationen immerhin 10 Punkte an mehr der Performances.

 Reiter 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 so selbst gehostet, s. evtl. Google Fonts einbinden. Also ist hier dann das mit Google Fonts entfernen.
• Emojis entfernen: Ja/Nein
• Abfragezeichenfolgen von statischen Ressourcen entfernen: Nein! – also "kein" Häkchen. 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.

Async JavaScript

Einstellungen Async JavaScript

Hier die Website 'wegerl.at' beinhaltet einige Features die mit jQuery sowie JavaScript funktionieren. Infolge gewissen Missfallens ist Async JavaScript hinfällig.

 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 ist aber Defer verbindlich.

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 Page Loading Effects (Preloader), 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.

Wenn Sie aktive Themes / Plugins haben, das von Async Javascript unterstützt ist, sind diese unten aufgeführt.

Plug-in Autoptimize

• Enable Autoptimize Support: ja, ein Häkchen
  • jQuery Method: Defer! – also hier auf Wegerl.at ist so.

TEST

So von TEST Aufzeichnung 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 zu wünschen übrig (es ist schon gut, wenn sie um die 50 Punkte liegen). 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 …

Das Tabmenü ist Offerte von Tabby Responsive Tabs
im Zusammenspiel mit dem das Add-on Tabby Link to Tab.
– und hier gehts zum Beschrieb auf wegerl.at

Weiter so Einstellungen?

• Wenns wem interessiert! – Kritisches CSS Optimieren. – des Passus für HTTP1.1

Aktualisiert im Jahr 2023-August