Autoptimize

Autoptimize
+ Async JavaScript?
… hier von Erfolg

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

Ist der Classic-Editor schon zu kennen? –
“Classic und TinyMCE – ist so klasse!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-2

Anklickt Classic-Editor mit TinyMCE Advanced
“Classic und TinyMCE – ist das ausgezeichnete!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-3

Klassischen Editor anwenden! – und …
“Classic und TinyMCE – ist so sehr gut !”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-7

… die Welt gehört dem, der sie genießt.
“Classic und TinyMCE – und tut sehr gut!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-4

TinyMCE aktive Installationen: 2+ Millionen
“Classic und TinyMCE – ist so fabelhaft!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-5

Ansprechend! – so gehts hier zur Lancierung
“Classic und TinyMCE – ist de luxe!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-6

… und NEU! – Classic Widgets
“Classic Widgets – sind so grandiose!”
Anklickt Classic! – TinyMCE; 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
“Classic und TinyMCE – ist so fein!”
Anklickt Classic! – TinyMCE; 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

imagePerformance 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

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.


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

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
Google Lighthouse. Wegerl.at Performance Tagmodus 75 vs. automatisch Dunkelmodus 50 Punkte
Google Lighthouse. Wegerl.at Performance Tagmodus 75 vs. autom. Dunkelmodus 50

– 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.
 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!
    • Weil dazu gereicht es zu einer Bemerkung. Es ergab sich mal, dass die Mediathek nicht mehr zu öffnen war oder einem Beitrag eine Media-Datei hinzuzufügen. Dessen ist von vorhergehenden, misslichen Arbeitsablauf entstanden. Infolge nach deaktivieren der ‘Abfragezeichenfolgen von statischen Ressourcen entfernen’ war das Problem behoben. Im Anschluss wurden welche Bilder der Annahme von Störung entfernt. Danach der Aktivierung war dessen wieder okay. Ob aber die Entfernung der gewissen Bilder relevant ist, kann ich noch nicht schreiben.
  • 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.

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?


Aktualisiert im Jahr 2022-April

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert