Der Classic-Editor zeichnet sich durch Stabilität und Zuverlässigkeit aus, was für professionellen Anwender von Bedeutung ist.
Werbung
Mehr schaffen in weniger Zeit – Der Advanced Editor für kreative Köpfe.
Optimieren Sie Ihre Bearbeitung: Advanced Editor Tools
Mit dem Advanced Editor können Designer und Content Creatoren kreative Ideen umsetzten.
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.
Die optimale Funktionalität wird durch die Hosting-Engine (OPcache) gewährleistet, selbst ohne Nutzung eines Caching-Plug-ins 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.
Performanz
Geschwindigkeitsindex
Ohne Plug-in*
88
2,9 s
Autoptimize
95
2,4 s
AsyncJavaScript
93
2,4 s
Autoptimice + AsyncJavaScript
99
1,7 s
Asset CleanUp: Page Speed Booster
93
2,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
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.
Die Darstellung des Ergebnisses ist für Desktop. In Mobil 67 von 100 Punkten.
Die Darstellung des Ergebnisses ist für Mobil. In Desktop 100 von 100 Punkten.
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 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.
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!
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 würde: 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." – in '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.
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.
Der Beitrag wurde mit fachlicher Unterstützung erstellt.
Schaffe mit WordPress und Advanced Editor schöne Websites. Hier ist für dich, euch eine leicht lesbare und freundliche Anleitung.
Die Website verwendet funktionelle Cookies. Sie verwendet keine Cookies von Drittanbietern.
Aber hallo! – zur Begrüßung eine Rundfrage?
🧡 … das so zum Zeit entschleunigen.
Die Erstellung von Website-Inhalten erfordert oft kreative Ideen. Es wäre interessant zu erfahren, wo Ideen für die Gestaltung der Website-Inhalte gefunden werden und wie diese gestaltet werden. Bitte mitteilen, wie typischerweise Inspiration für die Website-Inhalte gefunden wird.
Sie können die Tastaturnavigation nutzen: Tab zum Fokussieren, Leertaste zum Auswählen und Esc zum Schließen der Rundfrage.
Wird geladen ...
Falls alle Optionen ausgewählt werden sollen, empfiehlt es sich, im Ausschlussverfahren festzustellen, auf welche am ehesten verzichtet werden kann, und dann das auszuwählen, was am wichtigsten erscheint.
Hinweis zur Tastaturnavigation: Sobald Sie die Website scrollen, können Sie die Enter-Taste drücken, um den Inhalt direkt zu fokussieren, ohne den Tabindex zu durchlaufen. Das zweite Enter aktiviert das Element.
🎶 Während des Besuchs kann es neben informativen Ergebnissen auch zu Klangeffekten kommen, um bestimmte Elemente hervorzuheben. – Viel Spaß beim Erkunden!
Zur Optimierung unserer Website nutzen wir Tools wie 'Statify' und 'Visit Duration', die anonymisierte Daten wie die Verweildauer erfassen.
'Ist das Plug-in Docket-Cache (neuer Tab) schon zu kennen?
Pop-up
Das zur Umfrage ist von WP-Polls und das Pop-up ist von Boxzilla.
Lesen Sie die Inhalte nicht bequem?
Erhöhen Sie die Schriftgröße über die der Headerzeile oder gleich hier:
NORMAL, LARGE oder X-LARGE
Möchten Sie das Licht an- oder ausschalten?
Bitte sehr: Licht Ein/Aus
… auch Kontrast -/+ anpassen.
Sie können auch die Tastatur verwenden: Fokus mit Tab, Auswahl mit Space und Schließen mit Esc.
Im Inhalt die Tastaturnavigation:
Sobald Sie die Website scrollen, können Sie die Enter-Taste drücken, um den Inhalt direkt zu fokussieren, ohne den Tabindex zu durchlaufen. Das zweite Enter aktiviert das Element.
Tabulator (Tab): Navigiert durch interaktive Elemente.
Shift + Tab: Gehe zurück zum vorherigen Element.
Enter: Erste Betätigung fokussiert, zweite aktiviert.
Pfeiltasten: Scrollen in Texten oder Menüs.
Leertaste: Aktiviert Header-Buttons und scrollt im Content.
