Autoptimize + Async JavaScript

Bild, Automatisierung von byrev

Mit Autoptimize ist aus dem CMS der Website der Input bzw. Output zu optimieren. Als solches verbessert das Plug-in die Performanz der Website. Mit HTTP/2 umso mehr! Dazu gehört auch das Plug-in Async JavaScrip und ferner ein Seitencaching Plug-in. Des Letztern ist hier des Hinweis zu WordPress.org 'Optimization' Caching-Plugins, das Plug-in WP Super Cache in Anwendung.

Der Inhalt in diesem Beitrag

Als Leser würde ich mir erst mal folgende Einführung von AO und deren FAQ studieren.

Das Plug-in Autoptimize kann

  • Skripte und Stile aggregieren, minimieren und zwischenspeichern.
  • CSS standardmäßig in den Seitenkopf einfügen, aber auch kritisches CSS einbinden und das aggregierte vollständige CSS aufschieben.
  • Skripte in die Fußzeile verschieben und HTML minimieren.
  • Bilder optimieren (und sogar in WebP konvertieren) und verzögern.
  • Google Fonts optimieren.
  • Nicht aggregiertes JavaScript a-Synchronisieren.
  • WordPress-Kern-Emojicruft entfernen und so manches mehr.

Des Weiteren zur Performanz

Wenn Du den WebsiteSpeed für wichtig hältst, so solltest Du eines der Caching-Plug-ins verwenden. Hiermit wird dann aus dem CMS das Seiten-Caching durchgeführt. Einige gute Kandidaten, um Autoptimize auf diese Weise zu ergänzen, sind bspw. WP Super Cache, HyperCache, Comet Cache oder der Cache Enabler von KeyCDN .

DIE WERBUNG IN EIGENER SACHE
Premium-Support: Großartigen Autoptimize Pro-Support und Web Performance Optimization-Service, siehe das Angebot unter https://autoptimize.com/.

Die Autoptimize Pro Services umfasst:

Optimale CSS & JS Autoptimize Konfiguration,
zugeschnitten auf Ihre Website.

Daher auch für 1 Seite die kritische CSS-Extraktion,
um noch bessere Ergebnisse zu erzielen.

Personalisierte Expertentipps für
weitere Optimierungsmöglichkeiten.

Für eine zusätzliche Leistung können wir auch das
Autoptimize criticalcss.com Power-up konfigurieren.

Melden Sie sich auf unserer Website an und
wir melden uns umgehend bei Ihnen.

 

Hier sind 47 FAQ zu Autoptimize

Inhaltsverzeichnis

Tab 8: Benchmarktests in Relation (3)
Tab 7: Probleme mit anderen Plug-ins sind hier gelöst (6)

Tab 6: Autoptimize und der Cache (3)
Tab 5: Reiter 'Extras', die Einstellungen für die Google Fonts, Emojis, Preconnect, You Tube usw. (5)

Tab 4: Reiter 'Bilder', Funktion der Bildoptimierung (3).
Tab 3: Das 'Inline und Defer CSS', zur Erklärung ein paar Worte und zur Ausführung mehr. (3)

Tab 2: Die Konfigurierung und manches zur Fehlerbehebung (6)
Tab 1: Autoptimize im Prinzip (3)

Der Tabs anschließend:
Folgendes ist im Info Button von wegen das Tab-Menü der langen Codes nicht klarkommt.

Info: Die meisten technischen Anfragen (11)
Info: Autoptimize, Fragen um Features des Premiums (4)

 

Autoptimize im Prinzip (3)

1) Was macht das Plugin, um meine Website zu beschleunigen?

Es verkettet alle Skripte und Stile, verkleinert und komprimiert sie. Zudem fügt es abgelaufene Header hinzu, speichert sie im Cache und verschiebt die Stile in den Seitenkopf und Skripte (optional) in die Fußzeile. Es minimiert auch den HTML-Code selbst und macht die Website leicht.

2) Die Website ist auf HTTP/2 – braucht das Autoptimize?

HTTP/2 ist mit ein großer Fortschritt, da es die Auswirkung mehrerer Anforderungen von demselben Server erheblich verringert. Indem dieselbe Verbindung zum Ausführen mehrerer gleichzeitiger Anforderungen verwendet. Abgesehen davon ist die Verkettung von CSS / JS immer noch sehr sinnvoll, wie im Artikel von css-tricks.com und in Blogpost von einem der 'Ebay' Ingenieure beschrieben ist. Die Schlussfolgerung: Konfigurieren, testen, neu konfigurieren, erneut testen, optimieren und schauen. Was funktioniert im Kontext am besten? Ist es nur HTTP/2, eventuell ist es HTTP/2 + Aggregation und Minifikation, ist es eventuell HTTP/2 + Minifikation. Etwas welches auch AO kann. Hebe einfach die Markierung für „aggregierte JS-Dateien“ und / oder „aggregierte CSS-Dateien“ auf.

Autoptimize kann noch viel mehr, als ’nur' die JS & CSS zu optimieren. ;-)

3) Funktioniert Autoptimize mit jedem Blog?

Erst mal, Autoptimize erfolgt ohne Garantie! –, d. h. auch erst mal, nur in richtiger Konfigurierung ist die Funktionalität vorhanden. Hierzu findest Du unter „Fehlerbehebung“ die Informationen zur Konfigurierung und bei Problemen.

Konfigurierung & Fehlerbehebung (6)

1) Konfiguration & Fehlerbehebung Autoptimize

Nach der Installation und Aktivierung des Plug-ins ist der Zugriff auf die Administrationsseite von Autoptimize vorhanden. Somit stehen die HTML-, CSS- und JavaScript-Optimierungen bereit. Der Beginn erfolgt durch alles aktivieren, oder anders, in Einarbeitung eins nach dem anderen.

Wenn der Blog nach dem Aktivieren von Autoptimize nicht normal funktioniert, sind hier passende Hinweise. Besonders durch die erweiterten Einstellungen sind Probleme zu identifizieren und zu beheben:

  • Wenn alles funktioniert, aber Sie bemerken, dass Ihr Blog langsamer ist, stellen Sie sicher, dass Sie ein Seiten-Caching-Plugin installiert haben (WP Super Cache oder ähnliches) und überprüfen Sie die Informationen zur Cachegröße (die Ursache für dieses Problem wirkt sich auch auf die Leistung für nicht zwischengespeicherte Seiten aus) in dieser FAQ als Gut.
  • Falls der Blog komisch Kreativ aussieht, d. h. wenn das Layout durcheinander kommt, gibt es ein Problem mit der CSS-Optimierung. Somit ist zu Versuchen, eine oder mehrere CSS-Dateien von der Optimierung auszuschließen. Oder das Erzwingen, dass CSS nicht aggregiert wird, indem in noptimize-Tags das Design oder Widget einschließen. Auch Dateinamen (für externe Stylesheets) oder Zeichenfolgen (für Inline-Stile) sind zur Ausschlussliste hinzuzufügen.
  • Falls einige Funktionen auf der Website nicht mehr funktionieren bspw. ein Carroussel, ein Menü, die Sucheingabe usw. Die Antwort: Es treten wahrscheinlich Probleme bei der JavaScript-Optimierung auf. Somit sind der Einstellungen für „Aggregate Inline JS“ und / oder „Force JavaScript in Head?“ Änderungen anzuwenden. Und versuche es erneut!
    • Das Ausschließen von 'js/jquery /jquery.js' von der Optimierung (siehe unten) und das optionale Aktivieren von ' Try / Catch-Wrapping hinzufügen' können ebenfalls hilfreich sein.
    • Alternativ – für technisch versierte – können bestimmte Skripte von der automatischen Optimierung ausgeschlossen werden (verschoben und / oder aggregiert). Indem  wird ein String hinzugefügt, der dem fehlerhaften Javascript entspricht. Oder ihn aus den Vorlagendateien auch Widgets ausschließen, indem der Code zwischen noptimize setzen –Stichworte gesetzt werden. Das Erkennen des fehlerhaften JavaScript und die Auswahl der richtigen Ausschlusszeichenfolge kann ein Versuch sein, aber in den meisten Fällen sind Probleme mit der JavaScript-Optimierung auf diese Weise zu beheben. Beim Debuggen von JavaScript-Problemen ist die Fehlerkonsole Ihres Browsers das wichtigste Tool, um zu verstehen, was gerade passiert.
  • Wenn das Theme oder Plug-in jQuery erfordert, kann man entweder 'all in head' erzwingen und / oder 'jquery.js' (und ggf. jQuery-Plugins) ausschließen.
  • Wenn die CSS- oder die JS-Optimierung nicht zum Laufen zu bringen sind, kann man auch weiterhin die beiden anderen Optimierungstechniken verwenden.

Die obigen Tipps zur Fehlerbehebung sind eine Auswahl und sind erst mal auszuprobieren. Und danach CSS und JS immer noch nicht funktionieren, kannst Du im WordPress Autoptimize-Supportforum um Unterstützung anfragen. Im Link findest Du eine Beschreibung der Informationen, die in Deinem „Trouble Ticket“ angegeben sein sollten.

2) Dateien sind ausgeschlossen, aber diese sind noch automatisch optimiert.

AO minimiert ausgeschlossenes JS / CSS, wenn der Dateiname angibt, dass die Datei noch nicht minimiert ist. Ab AO 2.5 können Sie dies auf der Registerkarte „JS, CSS & HTML“ unter „Sonstiges“ deaktivieren. Optionen durch Deaktivieren von „Ausgeschlossene Dateien minimieren“.

3) Nach dem Aktivieren von Autoptimize liefert die Website nur leere Seite oder einen internen Serverfehler

Stelle sicher, dass nicht gleichzeitig andere HTML-, CSS- oder JS-Minifizierungs-Plugins (BWP-Minifizierung, WP-Minifizierung,…) mit Autoptimize ausführen. Deaktiviere auch die Seiten-Caching-Plug-ins (W3 Total Cache, WP Fastest Cache, etc.). Versuche also nur CSS oder nur die JS-Optimierung zu aktivieren. Danach ist festzustellen, welches Plug-in den Serverfehler verursacht. Somit die allgemeinen Schritte zur Fehlerbehebung befolgen, um die Problemumgehung zu finden.

4) Aber es sind immer noch leere, automatisch optimierte CSS- oder JS-Dateien vorhanden!

Wenn Apache ausführt, kann in einigen Fällen die von Autoptimize geschriebene .htaccess-Datei mit den AllowOverrides-Einstellungen der Apache-Konfiguration in Konflikt stehen (gleich wie dies bei der Standardkonfiguration einiger Ubuntu-Installationen der Fall ist). Darum führt die Einstellung CSS- und JS-Dateien automatisch optimieren zu „internen Serverfehlern“. Somit das AllowOverrides auf All gesetzt wird, ist dies aufzulösen.

5) Die Anmeldung an Multisites mit Domänenzuordnung ist nicht möglich

Multisites mit Domänenzuordnung erfordern die Initialisierung von Autoptimize bei einer anderen WordPress-Aktion. Folgende Codezeile ist zur Datei wp-config.php hinzuzufügen. Damit bspw. in setup_theme:

define( 'AUTOPTIMIZE_SETUP_INITHOOK', 'setup_theme' );
6) Es erscheint keine Fehlermeldung, aber die Websites sind überhaupt nicht optimiert

Autoptimize führt vor der eigentlichen Optimierung eine Reihe von Überprüfungen durch. Wenn eine der folgenden Bedingungen erfüllt ist, werden Ihre Seiten nicht optimiert.

Also wenn:

  • Wenn kein <html Tag geöffnet ist.
  • Wenn die Antwort <xsl:stylesheet (die Ausgabe ist nicht HTML, sondern XML).
  • Wenn <html amp in der Antwort ist (da AMP-Seiten bereits optimiert sind).
  • Wenn die Ausgabe ein RSS-Feed ist (is_feed () Funktion).
  • Wenn die Ausgabe eine WordPress-Administrationsseite ist (Funktion is_admin ())
  • Wenn die Seite mit '? ao_noptimize = 1' angefordert wird, wird sie an die URL angehängt.
  • Wenn sich Code in Autoptimize einfügt, um die Optimierung zu deaktivieren (siehe Thema zu Visual Composer).
  • Wenn andere Plug-ins den Ausgabepuffer inkompatibel verwenden. Also andere Plugins selektiv deaktivieren, um den Fehler zu identifizieren.

Inline und Defer CSS (3)

1) Was ist die Verwendung von „Inline und Defer CSS“?

Das CSS sollte im Allgemeinen im Head des Dokuments stehen. Google fördert nun die Zurückstellung von nicht unbedingt erforderlichem CSS. Dies ist besonders wichtig, um Seiten auf Mobilgeräten so schnell wie möglich zu rendern. Darum fügt es gleichzeitig die Stile ein, die zum Erstellen der Seite über Above-the-Fold erforderlich sind.

Was meint Above-the-Fold?

Above the fold beschreibt den Teil einer Website, der für den User, ohne Scrollen zu sehen ist. In Deutsch heißt das wie „über der Falz“. Above the fold geht aus dem im Printbereich hervor. Hier beschreibt diese Bezeichnung den Teil der Zeitung, welcher oberhalb der Faltung zu sehen ist.

Ab Autoptimize 1.9.0 ist es einfach. Wähle „CSS-Code inline einfügen und verschieben?“ und füge den Block in das Eingabefeld (Textbereich) ein. Siehe folgend:

2) Wie kann man herausfinden, was das „über dem Falz CSS“ ist?

Es gibt keine einfache Lösung, da es „über der Falte“ abhängt, wo sich die Falte befindet. Dabei hängt das von der Bildschirmgröße ab. Weiter gibt es einige Tools, die (versuchen) genau zu identifizieren, was sich „über der Falte“ befindet. Hier ist diese Liste von Werkzeugen ein guter Ausgangspunkt. Ferner sind der kritische CSS-Generator von Sitelocity und der kritische Pfadgenerator von Jonas Ohlsson nette Basislösungen. Im Link http://criticalcss.com/ ist eine Premiumlösung von Jonas Ohlsson. Alternativ kann auch der Bookmarklet (nur Chrome) dienlich sein.

→ Der Workflow hierzu ist hier im Beitrag auf Seite 2 / Die CSS-Bereitstellung optimieren (der interne Link öffnet im neuen Tab) – Los geht’s!

Der Erweiterung von Autoptimize criticalcss.com power-up  erfolgen nach der Aktivierung in Autoptimize der Reiter CriticalCSS. Weiter der Erstellung geht das über eine API Key. Dieses ist dann so was wie die Pro-Version von Autoptimize. S https://criticalcss.com. Desselben mit dem CritcalCSS ist aber auch für eine Seite der Website alleinig in Autoptimize zu erstellen. Meiner Annahme: Da die Websites, bspw. der Beiträge, ohnehin alle selbes Outfit haben, sollte dies auf Ähnliches herauskommen.

3) Oder sollte alles CSS eingebunden werden?

Die kurze Antwort: wahrscheinlich nicht. Denn ist alles CSS eingebettet, wird das CSS zwar nicht gerendert, aber die Basis-HTML-Seite vergrößert sich sehr. Infolge sind mehr „Roundtrip-Zeiten“ erforderlich. Sind mehrere Seiten in einer Browsersitzung anzufordern, wird das Inline-CSS jedes Mal gesendet. Indes wenn es nicht eingebunden ist, wird es aus dem Cache bereitgestellt.

 Reiter Bilder  (3)

Funktion der Bildoptimierung.

1) Wie funktioniert die Bildoptimierung?

Wenn die Bildoptimierung aktiviert ist, sucht Autoptimize in Bild-Tags und in den CSS-Dateien, die von der eigenen Domain zu laden sind. Demnach sind das PNG-, GIF- und JPEG-Dateien (JPG-Dateien) und ändert den Quellcode in das ShortPixel-CDN.

2) Bilder verzögert laden

Das verzögerte Laden von Bildern erfogt das Laden von nicht sichtbaren Bildern eine Verzögerung. Damit ist dem Browser ermöglicht, alle Ressourcen für den „above the fold“-Teil der Seite zuerst zu laden.

3) Wo kann ich weitere Informationen zur Bildoptimierung erhalten?

Schaue bitte die FAQ von Shortpixel an.

 Reiter Extras  (5)

Google Fonts, Emojis, Abfragezeichenfolge, Preconnect (Zu Dritt-Domains vorverbinden), Asynchrone JavaScript-Dateien (s. Plug-in Async JavaScript), Optimiere YouTube-Videos, s. Plug-in WP YouTube Lite.

1) (Wie) sollte ich Google Fonts optimieren?

Google Fonts werden normalerweise von einer mit „Render Blocking“ verknüpften CSS-Datei geladen. Verwendet das Thema und die Plug-ins die Google Fonts, sind womöglich mehrere solche CSS-Dateien vorhanden. Mit Autoptimize (seid Version 2.3) sind jetzt die Auswirkungen von Google Fonts zu verringern. Entweder indem diese vollständig zu entfernen sind oder die Art und Weise, wie sie geladen werden, zu optimieren.

Es gibt zwei Varianten zur Optimierung
  • Das erste ist „Kombinieren und Verknüpfen“. In dieser Variante sind alle Anforderungen für Google Fonts in eine Anforderung ersetzt. Diesem erfolgt zwar weiterhin das Rendern, ermöglicht jedoch das sofortige Laden der Schriftarten; d. h, man sieht keine Änderungen an den Schriftarten, während die Seite ladet.
  • Die Alternative ist „Async kombinieren und laden“. Dabei ist JavaScript zum Laden der Schriftarten in Verwendung und hiermit wird das Rendern nicht blockiert. Dies kann jedoch zu einem 'Aufblitzen von nicht formatiertem Text' führen.
2) Was macht „Emojis entfernen“?

Diese neue Option in Autoptimize 2.3 entfernt Inline-CSS, Inline-JS und verknüpfte JS-Dateien, die vom WordPress-Kern hinzugefügt wurden. Dies kann sich geringfügig positiv auf die Leistung der Website auswirken.

3) Ist das Entfernen von Abfragezeichenfolgen hilfreich?

Obwohl einige Online-Tools zur Leistungsbewertung „Abfragezeichenfolgen für statische Dateien“ als Leistungsproblem herausstellen, ist die Auswirkung dieser Tools im Allgemeinen so gut wie nicht vorhanden. Mit Autoptimize ist seid Version 2.3 die Abfragezeichenfolge (oder genauer den Parameter „ver“) zu entfernen. Wenn Du jedoch „Abfragezeichenfolgen von statischen Ressourcen entfernen“ aktivierst, so hat dies nur geringe oder keine Auswirkungen auf die Leistung der Website, gemessen in (milli-) Sekunden.

4) Warum „preconnect“ verwenden?

Preconnect ist eine etwas erweiterte Funktion. Hiermit wird der Browser (sofern der Unterstützung) angewiesen, eine Verbindung zu bestimmten Domänen herzustellen. Auch wenn die Verbindung nicht sofort benötigt wird. Dies ist z. B. zur Verwendung, um die Auswirkung von Ressourcen von Drittanbietern auf HTTPS zu verringern (da DNS-Anforderungen, TCP-Verbindungen und SSL / TLS-Aushandlungen vorzeitig ausgeführt werden). Dieses ist vorsichtig anzuwenden, da eine Vor-Verbindung mit zu vielen Domänen kontraproduktiv sein kann.

5) Wann ist JS nicht zu a-synchronisieren?

JavaScript-Dateien, die nicht automatisch optimiert sind, bspw. weil sie ausgeschlossen wurden oder weil sie an anderer Stelle gehostet werden, blockieren normalerweise das Rendern. Durch das Hinzufügen dieser Dateien im durch Kommas getrennten Feld „Async JS“ fügt Autoptimize das Async-Flag hinzu. Das veranlasst den Browser, diese Dateien asynchron zu laden, d. h. nicht renderndes Blockieren. Hingegen kann dies aber nicht funktionieren und die Website beschädigen. Wenn Du z. B. „js / jquery / jquery.js“ a-synchron laden, kommt höchstwahrscheinlich die Fehlermeldung „jQuery ist nicht definiert“. Also ist das mit Vorsicht zu verwenden.

Cache (3)

1) Der Autoptimize Cache ist riesig. Leert Autoptimize den Cache nicht?

Autoptimize verfügt über keinen Mechanismus zur Cache-Bereinigung, da hierdurch optimiertes CSS / JS entfernt werden kann. Dort würde das dann auf in anderen Cache verweisen und die Website beschädigen. Ferner ist ein schnell wachsender Cache ein Hinweis auf andere Probleme, die zu vermeiden sind.

Die Cache-Größe ist auf akzeptables Niveau zu halten, indem entweder:

  • Deaktivieren der Optionen „Aggregate Inline JS“ und / oder „Aggregate Inline CSS“.
  • Ausgenommen JS-Variablen (oder manchmal CSS-Selektoren), die sich pro Seite ändern. Wie das geht, in diesem Blogpost.

Der oben genannten Einwände gibt es dennoch die Lösungen von Drittanbietern, die den AO-Cache automatisch leeren. Zum Beispiel  diesen Code oder Plugin. Aus den oben genannten Gründen sind diese nur zu verwenden, wenn Du weißt, was Du tust.

2) „Cache leeren“ scheint nicht zu funktionieren?

In der Admin-Symbolleiste ist auch die Schaltfläche 'Autoptimize'. Mithin anklicke in der Dropdown-Liste „Cache löschen“, erfolgt eventuell die Meldung „Ihr Cache wurde möglicherweise nicht erfolgreich geleert“. In diesem Fall ist in der Einstellungsseite von Autoptimize auf die Schaltfläche „Änderungen speichern und Cache leeren“ zu klicken.

Darüber hinaus sollten keine Bedenken sein, wenn der Cache niemals auf 0 Dateien / 0 KB reduziert wird, da Autoptimize (ab Version 2.2) den Cache automatisch vorlädt. Also sobald er geleert wurde, um die weitere Minimierung zu beschleunigen.

3) Der Cache von Autoptimize wurde gelöscht und die Website sieht beschädigt aus?

Im Leeren des Caches von AO, sollten keine Seiten-Cache Seiten (HTML) enthalten sein. Da diese noch auf das entfernte optimierte CSS / JS verweisen. Zu diesem Zweck gibt es zwar eine Integration zwischen Autoptimize und einigen Seiten-Caches, diese Integration deckt jedoch nicht 100% der Setups ab. Darum ist der Seiten-Cache des Cache-Plug-ins, bspw. 'Cache Enabler', manuell zu leeren.

Probleme mit anderen Features (6)

1) Kann Cloudflares Rocket Loader mit Autoptimize verwendet werden?

Cloudflare Rocket Loader ist eine ziemlich fortschrittliche, aber invasive Methode, um JavaScript nicht zu rendern und zu blockieren. Die Cloudflare wird noch immer als Beta-Version betrachtet. Manchmal arbeiten Autoptimize & Rocket Loader zusammen, manchmal nicht. Ein Ansatz ist, erst mal Rocket Loader zu deaktivieren. Danach das Autoptimize konfigurieren und danach Rocket Loader wieder aktivieren (wenn Du glaubst, dass es helfen kann). Und testen, ob alles noch funktioniert.

Im Moment (Juni 2017) scheint RocketLoader das Inline & Defer-CSS von AO zu brechen, das auf dem loadCSS von Filamentgroup basiert , was dazu führt, dass das verzögerte CSS nicht geladen wird.

2) Visual Composer, Beaver Builder und ähnliche Page Builder-Lösungen sind inkompatibel

Deaktivieren Sie die Option, die automatische Optimierung für angemeldete Benutzer zu aktivieren, und ziehen Sie sie einfach per Drag & Drop ;-)

3) Die Kaufabwicklung / Bezahlung funktioniert im Netz nicht

Deaktiviere bitte die Option zur Optimierung der Warenkorb- / Checkout-Seiten (funktioniert für WooCommerce, Easy Digital Downloads und WP eCommerce).

4) Revolution Slider ist inkomplett

Bist Du sicher, dass 'js/jquery/jquery.js' in der durch Kommas getrennten Liste der JS-Optimierungsausschlüsse enthalten ist (dies ist in der Standardkonfiguration ausgeschlossen).

5) Die Fehlermeldung „jQuery is not defined“

In diesem Fall ist nicht aggregiertes JavaScript, für das jQuery geladen werden muss. Daher muss  js/jquery/jquery.js durch Kommas getrennten Liste der JS-Optimierungsausschlüsse hinzufügt sein.

6) Ich benutze NextGen Galleries und viele JS sind nicht aggregiert / minimiert?

NextGen Galleries macht einige raffinierte Dinge, um JavaScript hinzuzufügen. Damit Autoptimize dies aggregieren kann, können Sie entweder Nextgen Galleries Ressourcenverwaltung mit diesem Code-Snippet add_filter( 'run_ngg_resource_manager', '__return_false' ); Oder Sie können Autoptimize anweisen, früher zu initialisieren, indem Sie dies zu Ihrer wp-config.php hinzufügen:

define("AUTOPTIMIZE_INIT_EARLIER","true");

Benchmarktests (3)

1) Autoptimize ist konfiguriert, aber Google Pagespeed Scored hat sich kaum verbessert.

Autoptimize ist kein einfaches Plug-in zur Behebung von Problemen von wegen PageSpeed. Es aggregiert „nur“ und verkleinert (lokale) JS & CSS und Bilder und ermöglicht einige nette Extras wie das Entfernen von Google Fonts und das Verzögern des Ladens des CSS.

Du kannst mit Autoptimize die Ladezeit der Website verbessern (Ladezeit in Sekunden) und dadurch auch bestimmte Pagespeed-Warnungen beheben. Zur weiteren Performanz ist es wahrscheinlich, sich mit einem Seiten-Caching Plug-in, wie Cache Enabler, und der Web-Server-Konfiguration zu befassen. Dieses kann dann die tatsächliche Leistung – wiederum die Ladezeit – verbessern.  Bspw. durch Messungen bei https://webpagetest.org. Dabei kann man sich durch die Bewertungen wie Messungen zur „besten Leistung“ üben.

2) Warum blockiert Autoptimized JS Render?

Wenn dies nicht „im Core erzwungen“ ist, wird Autoptimized JS nicht blockiert, da das Flag „Zurückstellen“ hinzugefügt wurde. Es ist jedoch möglich, dass ein anderes Plugin das „Defer“ -Flag entfernt. Speed ​​Booster Pack hat dies gemeldet, aber das Verhalten wurde noch nicht bestätigt .

3) Warum wird das automatisch optimierte CSS immer noch als Renderblocker bezeichnet?

Der Konfigurierung von Autoptimizeist ist Standads das CSS im Head verlinkt. Dies ist eine sichere Einstellung, welches jedoch der Google PageSpeed ​​Insights beanstandet. Folglich kannst Du nach „Inline all CSS“ (einfach) oder, besser, nach „Inline und DeferCSS“ suchen.

Info für Technisches und Fragen um Features des Premiums

Technisches (11)

Fragen im Zusammenhang mit Premium-Support (4)

… und hier gehts zum Tab-Menü:


 

Autoptimize +
Plug-in Async JavaScript

Beseitige Async JavaScripts, die Javascrips die das Rendern blockieren. Infolge ist die Leistung der WordPress-Website zu optimieren.

Durch das Rendern von Javascript ist zu verhindern, dass Inhalte auf der Website über den above-the-fold rendern. Daher kann sich dies auf den Speed der Website und auf das Ranking in Suchmaschinen auswirken. Das Plug-in Async JavaScript gibt die Kontrolle darüber, welche Skripte ein Async- oder Defer-Attribut hinzufügen oder ausschließen sollen.

FAQ

 



Weiter ist hier ist ein Erfahrungswert
Einstellung der Plug-ins Autoptimize und Async JavaScript hier auf 'wegerl.at'

… und hier gehts zum Tab-Menü:

War der Beitrag hilfreich?