TechBlogSD - Alles für WordPress und WEB-Entwicklung
WEB- und WordPress-Anleitungen, Neuigkeiten, Rezensionen zu Themes und Plugins

Wie richte ich Autoptimize in der WordPress-Site richtig ein?

28

Autoptimize ist eines der beliebtesten Plugins, um Ihre WordPress- Site zu beschleunigen. Es gibt mehr als 1 Million aktive Installationen dieser Plugins mit einer durchschnittlichen Bewertung von 4,7 von 1K+ Benutzern. Es kann nicht falsch sein, dass so viele Leute dieses Plugin installieren und verwenden, um ihre Website zu optimieren. Sie müssen jedoch die richtige Einrichtung sicherstellen, damit das Plugin für Sie funktioniert.

Verwandte: Top 8 Caching-Plugins für WordPress.

Was macht Autooptimize?

Zunächst müssen Sie verstehen, dass Autoptimize kein Caching-Plugin wie WP Rocket oder W3 Total Cache ist. Es ist ein Optimierungs-Plugin, das Ihnen hilft, die folgenden Dinge zu tun:

  • Kombinieren Sie alle CSS- und JavaScript-Dateien
  • Verkleinern Sie die komprimierten Dateien und cachen Sie sie, verkleinern Sie auch den HTML-Code, indem Sie Kommentare und Leerzeichen entfernen
  • Fügen Sie den Dateien einen Ablaufheader hinzu, um die zwischengespeicherte Version bereitzustellen
  • CSS in die Kopfzeile und Skripte in die Fußzeile verschieben

Später fügten die Entwickler auch die Bildoptimierung für Lazy Loading und Serving von WebP-Bildern hinzu, um Mediendateien zu beschleunigen. Wie auf der Plugin-Seite auf WordPress.org erwähnt, können HTTP/2-Server viele der Dinge automatisch tun, die dieses Plugin tut. Daher sollten Sie mit Testversionen testen, um sicherzustellen, dass das Plugin tatsächlich einen Mehrwert für Ihre Installation bietet.

Wie richte ich Autoptimize in WordPress richtig ein?

Autoptimize ist eines der am einfachsten einzurichtenden Plugins. Gehen Sie nach der Installation und Aktivierung des Plugins zum Menü "Einstellungen > Autoptimize". Es bietet die Optionen zur Optimierung von JS, CSS, HTML und Bildern auf Ihrer Website.

Wie richte ich Autoptimize in der WordPress-Site richtig ein?

Einstellungen automatisch optimieren

JS-, CSS- und HTML-Einstellungen

Diese Registerkarte bietet mehrere Optionen zum Trennen und Optimieren der Dateien auf Ihrer Website. Autoptimize aggregiert und minimiert Skripte, CSS und HTML aus deinem Theme und deinen Plugins. Daher kann die Auswahl einiger der Optionen Ihre Website beschädigen, insbesondere wenn Sie ein jQuery-basiertes Thema verwenden.

JavaScript-Optionen

  • JavaScript-Code optimieren – Aktivieren Sie diese Option, um die JavaScript-Dateien zu verkleinern. Dadurch werden die Skriptdateien auf Ihrer Site komprimiert und verkleinert.
  • JS-Dateien aggregieren? – Aktivieren Sie diese Option, um alle JavaScript-Dateien und den Server asynchron zu kombinieren, wenn Seiten auf Ihrer Site geladen werden. Dies wird Ihnen helfen, das Problem mit dem Render-Blockierungsskript im Google PageSpeed ​​Insights-Tool zu entfernen. In den meisten Fällen wird Ihre Website jedoch beschädigt. Die beste Option ist, dies zu aktivieren und die Ausnahmen bereitzustellen, damit die Seite ohne Unterbrechung geladen werden kann. Dies führt jedoch zu Problemen mit der Renderblockierung in PageSpeed ​​Insights. Sie können diese Option deaktivieren und nur "JavaScript-Code optimieren" aktivieren, um nur die Dateien zu verkleinern.
  • Auch Inline-JS aggregieren? – Wir empfehlen Ihnen, diese Option zu deaktivieren, wenn Ihr Theme oder Plugin viele Skripte dynamisch einfügt. Wenn Sie dies aktivieren, kann die Cachegröße schneller und größer werden, was die Leistung beeinträchtigt, anstatt sich zu verbessern.

Wie richte ich Autoptimize in der WordPress-Site richtig ein?

JavaScript-Optionen

  • JavaScript erzwingen? – Am besten laden Sie JavaScript-Dateien in die Fußzeile, damit sie am Ende des Seitenladevorgangs geladen werden. Dadurch werden die Renderblocking- und skriptbezogenen Probleme, die in den Geschwindigkeitsmesstools angezeigt werden, effektiv beseitigt. Wenn Sie jedoch sehen, dass die vorherigen Optionen Ihre Site beschädigen, aktivieren Sie dies, um Skripte in den Header zu laden, um zu testen, ob es hilft. Auch hier wird beim Laden von Skripts im Header eine Warnung zum Blockieren von Rendern im PageSpeed ​​Insights-Tool angezeigt.
  • Skript von Autoptimize ausschließen – das Plugin füllt dieses Feld standardmäßig mit jquery.js und anderen wichtigen Dateien auf Ihrer Site aus. Wenn Sie feststellen, dass bestimmte Theme- oder Plugin-Dateien Ihre Site beschädigen, können Sie die Datei hier einfügen. Denken Sie daran, den relativen Pfad der Datei anzugeben, indem Sie den Domänennamen ignorieren. Außerdem minimiert das Plugin, wie in der Beschreibung erwähnt, die ausgeschlossenen Dateien, es sei denn, Sie schließen sie im Abschnitt "Verschiedenes" aus. Nach dem Testen mit verschiedenen Designs empfehlen wir Ihnen, jquery.js auszuschließen, um Probleme mit dem Layout Ihrer Website zu vermeiden. Manchmal bemerken Sie das Problem möglicherweise nicht auf der Website, aber Sie können den Konsolenfehler in den Google Chrome-Entwicklertools sehen. Der Fehler zeigt etwa „$ oder jQuery ist nicht definiert” oder „unbekannte Funktion” an.
  • Try-Catch-Wrapping hinzufügen? – Aktivieren Sie diese Option, wenn Sie feststellen, dass das Plugin Ihre Website beschädigt. Wir empfehlen Ihnen, diese Option zu deaktivieren und die Datei auszuschließen, die in der Ausnahme unterbricht.

CSS-Optionen

CSS-Optionen sind JavaScript-Optionen fast ähnlich.

  • CSS-Code optimieren? – Aktivieren Sie diese Option, um CSS-Dateien auf Ihrer Website zu komprimieren und zu verkleinern.

Wie richte ich Autoptimize in der WordPress-Site richtig ein?

CSS-Optionen

  • CSS-Dateien aggregieren? – Aktivieren Sie diese Option, um alle CSS-Dateien auf Ihrer Website zu kombinieren und als eine einzige komprimierte und minimierte CSS-Datei zu dienen.
  • Inline-CSS auch aggregieren – aktivieren Sie dies, um Inline-CSS für die Aggregation einzuschließen. Wenn Ihr Theme oder Plugin viel Inline-CSS einfügt, erhöht diese Option die Größe des Caches.
  • Daten generieren: URIs für Bilder? – Aktivieren Sie diese Option, damit Autoptimize die kleinen Bilder, die von Ihrem Theme und Ihren Plugins heruntergeladen wurden, einbinden kann.
  • Inline- und Defer-CSS – um diese Option zu aktivieren, sollten Sie zuerst das kritische CSS für Ihre Website kennen. Leider ist es nicht einfach, kritisches CSS zu erhalten, da jede Vorlage auf Ihrer Website separates kritisches CSS benötigt. Wenn Sie beispielsweise WooCommerce auf Ihrer Website haben, können Sie das post- oder seitenkritische CSS nicht für WooCommerce-Produktseiten verwenden. Unserer Meinung nach sollten Sie diese Option in Autoptimize deaktivieren. Andernfalls können Sie die Premium-API von Criticalcss.com abrufen und in Autoptimize auf der Registerkarte „Critical CSS” integrieren.
  • Alle CSS einbinden – aktivieren Sie diese Option, um alle CSS einzufügen, anstatt sie als Datei zu verlinken. Nachdem Sie diese Option aktiviert haben, können Sie den Quellcode Ihrer Website anzeigen, um die große Menge an CSS zu sehen. Das Einfügen von CSS kann die Geschwindigkeit drastisch verbessern, kann sich jedoch nachteilig auswirken, wenn Sie eine große CSS-Datei haben.
  • CSS von Autoptimize ausschließen – Wenn Sie feststellen, dass die Website fehlerhaft ist, können Sie die spezifischen CSS-Dateien in diesem Textfeld ausschließen. Ähnlich wie bei JavaScript-Dateien müssen Sie den relativen Pfad angeben, indem Sie den Domänennamen ignorieren. Autoptimize schließt standardmäßig auch den Cache, Symbole und andere CSS aus. Sie können auch die relativen Ordner wie „wp-content/uploads/” angeben, um alle CSS-Dateien in diesem Ordner auszuschließen.

WordPress lernen: Sehen Sie sich über 400 kostenlose WordPress-Tutorials an.

HTML-Optionen

Aktivieren Sie ähnlich wie bei JS und CSS die Option „HTML-Code optimieren”, um den HTML-Inhalt auf Ihrer Website zu komprimieren und zu verkleinern. Sie können die Kommentare auch aktivieren oder entfernen, indem Sie „HTML-Kommentare behalten?” verwenden. Möglichkeit. Wir empfehlen, beide Optionen zu aktivieren.

Wie richte ich Autoptimize in der WordPress-Site richtig ein?

HTML-Optionen

CDN-Optionen

Wenn Sie ein CDN verwenden, das eine Zonen-URL erstellt, sollten Sie die Root-URL hier in das Textfeld „CDN-Basis-URL” eingeben. Sie können dies jedoch ignorieren, wenn Sie kein CDN verwenden oder Cloudflare oder andere CDNs verwenden, die DNS- Nameserver verwenden.

Wie richte ich Autoptimize in der WordPress-Site richtig ein?

CDN-Optionen

Cache-Info

Im Abschnitt „Cache-Info” finden Sie den Status des Autoptimize-Cachings. Es zeigt Ihnen den Pfad, die Größe und die Anzahl der zwischengespeicherten Dateien an.

Wie richte ich Autoptimize in der WordPress-Site richtig ein?

Cache-Info

Verschiedene Optionen

  • Aggregierte Skripte/CSS als statische Dateien speichern? – Dies sollte standardmäßig aktiviert sein, da die komprimierten Dateien als statische Ressource bereitgestellt werden müssen, um die Geschwindigkeit zu verbessern. Wie in der Beschreibung erwähnt, deaktivieren Sie diese Option, wenn ein Anzeigeproblem auftritt, und versuchen Sie, dass das hilft.

Wie richte ich Autoptimize in der WordPress-Site richtig ein?

Verschiedene Optionen

  • Ausgeschlossene CSS- und JS-Dateien minimieren? – Das Plugin minimiert automatisch alle CSS- und JS-Dateien, obwohl Sie bestimmte Dateien in den CSS- oder JS-Einstellungen ausgeschlossen haben. Deaktivieren Sie dieses Kontrollkästchen, wenn Sie die Verkleinerung der ausgeschlossenen CSS- und JS-Dateien deaktivieren möchten .
  • Auch für eingeloggte Redakteure / Administratoren optimieren? – Wir empfehlen, diese Option zu deaktivieren, damit Sie die aktuelle Site ohne Autoptimize anzeigen können, wenn Sie als Administrator oder Redakteur angemeldet sind. Andernfalls können Probleme bei der Arbeit mit Page Builder-Plugins auftreten.

Speichern Sie alle Ihre Änderungen, damit das Plugin mit der Arbeit an Ihrer Site beginnen kann.

Bilder

Der Reiter „Bilder” bietet Optionen zum Optimieren von Bildern.

  • Bilder optimieren – Mit dieser Option können Sie das globale Shortpixel-CDN verwenden, um Ihre Bilder unterwegs zu optimieren und bereitzustellen. Shortpixel ist eine Premium-Bildkomprimierungslösung, mit der Sie 150 Bilder pro Monat optimieren können. In diesem Abschnitt können Sie den aktuellen Status und die Kontingentnutzung anzeigen.

Wie richte ich Autoptimize in der WordPress-Site richtig ein?

Bildoptimierung

  • Qualität der Bildoptimierung – Sie können zwischen den Optionen Hochglanz, Verlust oder Verlust wählen. Sie können die Unterschiede zwischen diesen Optionen überprüfen und Ihre Bilder auf der Shortpixel-Seite testen. Dies wird Ihnen helfen, die beste Option für Ihren Bedarf auszuwählen.
  • WebP in unterstützten Browsern laden? – Wählen Sie diese Option, um WebP-Bilder für Chrome und andere unterstützte Browser bereitzustellen.
  • Lazy-Load-Bilder?Lazy Load verschiebt die Off-Screen-Bilder und lädt nur, wenn der Benutzer die Bildposition im Browser erreicht. Aktivieren Sie diese Option, um die Ladegeschwindigkeit und die Punktzahl im Google PageSpeed ​​Insights-Tool zu verbessern.
  • Lazy-Load-Ausschlüsse – hier können Sie die Bildtypen oder Dateinamen eingeben, um sie vom Lazy-Loading auszuschließen.

Beachten Sie, dass die meisten Plugins und Themes mit Lazy Loading als integrierte Option ausgestattet sind. Zum Beispiel haben das Zeitungsthema, das Jetpack-Plugin, das WP Smush- Plugin und das SG Optimizer- Plugin für SiteGround- Benutzer alle die Option zum Lazy Loading. Wir empfehlen Ihnen, Lazy Loading nur zu verwenden, wenn Sie keine ähnlichen Optionen für andere Plugins oder Themes auf Ihrer Site verwenden. Aktivieren Sie auf ähnliche Weise Shortpixel nur, wenn Sie kein externes CDN für das Bild-Caching haben. Verwenden Sie dies auch mit Vorsicht, da dies eine Nutzungsbeschränkung hat.

Extra

Die Verwendung von Ressourcen von Drittanbietern auf der Website wirkt sich auf die Ladegeschwindigkeit der Seite aus. Die Registerkarte „Extra” bietet zusätzliche Optionen zur Optimierung einiger Standardinhalte von Drittanbietern auf Ihrer Website.

  • Google Fonts – Wenn Sie Google Fonts auf Ihrer Website verwenden, haben Sie Optionen zum Deaktivieren oder Kombinieren.
  • Emojis entfernen – WordPress verwendet standardmäßig Unicode-Emoji-Skript, um Emoji-Symbole auf Ihrer Website hinzuzufügen. Wenn Sie keine Emojis verwenden, empfehlen wir Ihnen, diese Option zu aktivieren, um Emojis zu deaktivieren.
  • Entfernen Sie Abfragezeichenfolgen aus statischen Ressourcen – CSS- und JS-Dateien verwenden die Versionskontrolle und fügen einen Parameter in der URL mit „ver” hinzu. Wenn Sie eine statische Website haben (dies ist bei den meisten WordPress-Sites mit Ausnahme von Foren und benutzerdefinierten Sites der Fall), besteht keine Notwendigkeit, die Versionsverwaltung zu verwenden, da die Dateien ebenfalls statisch sind. Wenn Sie alle CSS- und JS-Dateien aggregieren, stellt das Plugin die zwischengespeicherte Datei automatisch als statische Ressource bereit. Wenn Sie jedoch einige Dateien ausgeschlossen haben oder CSS oder JS nicht aggregieren, aktivieren Sie diese Option, um die Versionen aus der URL zu entfernen.

Wie richte ich Autoptimize in der WordPress-Site richtig ein?

Zusätzliche Optionen

  • Preconnect zu Domains von Drittanbietern – Preconnect ermöglicht die Verbindung mit dem Server eines Drittanbieters, bevor die HTTP-Browseranfrage tatsächlich gesendet wird. In diesem Textfeld können Sie die Domänen hinzufügen, die Sie vorab verbinden möchten.
  • Spezifische Anfragen vorab laden – Preload hilft beim Laden der verlinkten URLs und erhöht so die Ladegeschwindigkeit der Seite. Geben Sie zum Vorladen beliebige Drittanbieter-Domains wie fonts.google.com ein.
  • Asynchrone JavaScript-DateienGeben Sie JS-Dateien von Drittanbietern ein, die Sie asynchron mit der Eigenschaft „async” laden möchten.
  • YouTube-Videos optimieren – Diese Option benötigt ein zusätzliches Plugin, um YouTube-Videos träge zu laden.

Häufige Probleme mit Autoptimize

Bei richtiger Optimierung kann das Autoptimize-Plugin die Geschwindigkeit Ihrer Website und die Punktzahl im Google PageSpeed ​​Insights-Tool verbessern. Es hat jedoch wenige Probleme, wenn es als Lösung zur Geschwindigkeitsoptimierung verwendet wird.

1 Verwendung mit anderen Plugins

Das Problem bei Autoptimize ist, dass dies kein Caching ist, sondern die Hälfte der Optimierungsoptionen beinhaltet, die ein vollwertiges Caching-Plugin bietet. Sie müssen Plugins wie WP Super Cache auswählen, um mit Autoptimize zu arbeiten, um redundante Optionen zu vermeiden. Andernfalls müssen Sie Autoptimize nicht verwenden, wenn Sie Plugins wie W3 Total Cache oder WP Rocket haben.

2 Upselling-Integrationen

Mit den wenigen verfügbaren Optionen können Sie sehen, dass das Plugin die Integration mit Shortpixel, WP YouTube Lyte und Criticalcss.com verkauft. Jede Integration erfordert ein zusätzliches Plugin oder Konto, das nicht erforderlich ist, wenn Sie sich für ein Premium-Caching-Plugin wie WP Rocket mit einem guten CDN entscheiden. Darüber hinaus gibt es ein separates „Mehr optimieren!” Registerkarte zum Verkauf der Partnerprodukte.

3 Kritische CSS

Kritisches CSS ist das CSS, das erforderlich ist, um den Inhalt oberhalb des Falz auf einer Seite zu laden. Das Problem ist, dass jedes Seitenlayout wie Beitrag, Seite, Produkt, Portfolio usw. separate kritische CSS benötigt, um die oben genannten Seiten richtig zu laden. Dies ist eine komplizierte Aufgabe, um kritisches CSS mit einem anderen Plugin "Autoptimize Criticalcss.com Power-up" und einem Premium-API-Schlüssel von crtialcss.com zu generieren.

4 Das Layout der Website unterbrechen

In den meisten Fällen wird das Plugin das Layout Ihrer Website unterbrechen. Sie müssen manuell überprüfen und analysieren, um das Skript oder die Option zu finden, die Ihre Website beschädigt, und sie vom Autoptimize-Plugin ausschließen.

5 Wachsende Cache-Größe

Durch das Inlining von CSS und JS wird die Cachegröße drastisch anwachsen. Wir haben mit dem beliebten Zeitungsthema getestet, um herauszufinden, dass die Cachegröße an einem einzigen Tag 100% erreicht. Das Problem ist, dass das Plugin diese Optionen ohne automatische Cache-Bereinigung bietet. Das bedeutet, dass Sie sich manuell beim Dashboard anmelden und den Cache jedes Mal löschen müssen, wenn die Größe anwächst.

Wie richte ich Autoptimize in der WordPress-Site richtig ein?

Cache voll automatisch optimieren

Abschluss

Unserer Meinung nach funktioniert dieses Plugin gut, wenn Sie ein einfaches Thema haben und einfache Caching-Plugins wie WP Super Cache verwenden. Die meisten Benutzer werden jedoch die Standard-Plugins wie Jetpack oder W3 Total Cache auf ihrer Website verwenden. In diesem Fall ist Autoptimize eine redundante Option, bei der Sie entweder das Plugin nicht vollständig ausführen oder bestimmte Optionen deaktivieren.

Aufnahmequelle: www.webnots.com

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen