Autoptimize ist ein kostenloses WordPress-Optimierungs-Plugin. Zusätzlich zur HTML-, CSS- und JavaScript-Optimierung enthält Autoptimize auch Optimierungsfunktionen, die auf andere Aspekte moderner WordPress Webseiten abzielen.
In diesem Beitrag stellen wir die besten Autoptimize-Plugin-Einstellungen vor, um die Leistung und Seitengeschwindigkeit deiner WordPress Webseite zu verbessern.
Warum Autoptimieren?
Bevor wir in die besten Autoptimize-Einstellungen eintauchen, lasse uns kurz drei Gründe durchgehen, warum Autoptimize ein großartiges Optimierungs-Plugin ist.
- Die kostenlose Version von Autoptimize verfügt über einen kompletten Funktionsumfang zur Optimierung deiner WordPress Webseite.
- Autoptimize ist ein reines Optimierungs-Plugin und führt keine Zwischenspeicherung von HTML-Seiten durch. Das bedeutet, dass es mit allen Web-Hosts kompatibel ist – auch mit solchen mit benutzerdefinierten Seiten-Caching-Konfigurationen wie Kinsta.
- Autoptimize hat über 1 Million aktive Installationen im WordPress-Repository und wird ständig mit neuen Funktionen und Fehlerbehebungen aktualisiert.
Autoptimieren von JS-, CSS- und HTML-Einstellungen
HTML, CSS und JavaScript sind das Brot und die Butter von Autoptimize. Wie auch bei anderen Optimierungs-Plugins kann es eine entmutigende Aufgabe sein, sich in den umfangreichen Funktionen und Einstellungen von Autoptimize zurechtzufinden. Um die Dinge einfacher zu machen, haben wir die besten Autoptimize-Einstellungen zur Verbesserung der Leistung deiner Webseite zusammengestellt.
JavaScript-Optionen
Optimieren von JavaScript-Code
Wir empfehlen, diese Option zu aktivieren. Wenn „JavaScript-Code optimieren“ aktiviert ist, verkleinert Autoptimize deine JavaScript-Dateien.
JS-Dateien aggregieren
Die Option „JS-Dateien zusammenfassen“ von Autoptimize fasst alle deine JavaScript-Dateien in einer einzigen Datei zusammen. In der Vergangenheit war das Kombinieren von JS- und CSS-Dateien ein wichtiger Schritt in der WordPress-Optimierung. Bei Kinsta verwenden wir moderne HTTP/2-Server, die parallele Downloads und Multiplexing unterstützen – das bedeutet, dass das Kombinieren von Dateien nicht mehr so wichtig ist wie früher, da HTTP/2 das gleichzeitige Herunterladen mehrerer Dateien ermöglicht. Abgesehen davon wird das Aggregieren von CSS- und JS-Dateien bei bestimmten Arten von WordPress-Webseiten immer noch zu einem Geschwindigkeitsanstieg führen, daher empfehlen wir, deine Seitengeschwindigkeit bei aktivierter und deaktivierter Option zu testen.
Auch Aggregat Inline JS
Die Option „auch Inline-JS aggregieren“ extrahiert Inline-JS in deiner HTML-Datei und kombiniert sie mit der optimierten JS-Datei von Autoptimize. Da diese Option einen schnellen Anstieg der Cache-Größe von Autoptimize verursachen kann, empfehlen wir, diese Option deaktiviert zu lassen, es sei denn, du hast einen besonderen Grund, sie zu aktivieren.
JavaScript erzwingen in
In den meisten Fällen raten wir davon ab, JavaScript-Dateien in das HTML-Element <head> deiner Webseite zu laden. JS zu zwingen, frühzeitig zu laden, kann zu Render-Blockierungen von Elementen führen, die die Geschwindigkeit deiner Seite verlangsamen können. Wenn du JavaScript-Dateien hast, die im <head>-Element geladen werden müssen, empfehlen wir, diese Skripte von Autoptimize auszuschließen.
Exclude Scripts from Autoptimize
Mit dieser Option kannst du bestimmte Verzeichnisse und JavaScript-Dateien von der Aggregation ausschließen. Standardmäßig schließt Autoptimize die folgenden Skripte aus.
- wp-includes/js/dist/
- wp-includes/js/tinymce/
- js/js/jquery/jquery.js
Beachte, dass das Hinzufügen eines auszuschließenden Skripts sich standardmäßig nur auf die Aggregation auswirkt. Ausgeschlossene JavaScript-Dateien werden weiterhin minimiert, es sei denn, die Option „Ausgeschlossene CSS- und JS-Dateien minimieren“ ist unter „Diverse Optionen“ deaktiviert.
Try-Catch Wrapping hinzufügen
Durch Aktivieren der Option „try-catch wrapping hinzufügen“ wird dein JavaScript-Code in try-catch-Blöcke verpackt. Diese Option ist nützlich, um Probleme zu debuggen, die durch JS-Minifikation und Aggregation verursacht werden. Wenn deine Webseite nur mit aktiviertem „add try-catch wrapping“ funktioniert, empfehlen wir, mit einem Entwickler zusammenzuarbeiten, um die JavaScript-Dateien durchzusehen und den Verursacher des Problems zu identifizieren, da die übermäßige Verwendung von Try-Catch-Blöcken die JS-Leistung verringern kann.
CSS-Optionen
CSS-Code optimieren
Wir empfehlen, diese Option zu aktivieren. Wenn „CSS-Code optimieren“ aktiviert ist, verkleinert Autoptimize deine CSS-Dateien.
Aggregierte CSS-Dateien
Die Option „CSS-Dateien zusammenfassen“ von Autoptimize fasst alle deine CSS-Dateien in einer einzigen Datei zusammen. Wie wir bereits erwähnt haben, kommt diese Funktion Webseiten, die HTTP/2 unterstützen, möglicherweise nicht zugute. Wir empfehlen, diese Option auf deiner Webseite A/B zu testen, um festzustellen, ob sie sich positiv auf die Seitengeschwindigkeit auswirkt.
Auch aggregiertes Inline-CSS
Diese Option verschiebt Inline-CSS in die CSS-Datei von Autoptimize. Obwohl das Verschieben von Inline-CSS in eine im Browser zwischenspeicherbare CSS-Datei die Seitengröße verringern kann, empfehlen wir, diese Option in den meisten Fällen deaktiviert zu lassen.
Daten generieren: URLs für Bilder
Wenn diese Option aktiviert ist, wird Autoptimize kleine Hintergrundbilder base64-kodieren und in CSS einbetten. Wir empfehlen, diese Option auszuprobieren, um die Auswirkungen auf die Geschwindigkeit deiner Seite abzuschätzen. Während die Kodierung von Bildern in das base64-Format die Anzahl der HTTP-Anfragen reduziert, sind base64-Darstellungsdateien normalerweise 20-30% größer als ihre binären Gegenstücke.
Inline und Defer CSS
Das Einbinden kritischer CSS kann bei einigen Webseiten zu einem erheblichen Geschwindigkeitsschub führen. Die Idee hierbei sind Inline-Stile, die für Elemente erforderlich sind, die „above the fold“ sind. In der Praxis zielt Inline-CSS in der Regel auf Elemente wie Strukturelemente, globale Schriftfamilien und -größen sowie Navigationsstile ab.
Durch das Einfügen dieser Schlüsselelemente kann die größere vollständige CSS-Datei zu einem späteren Zeitpunkt geladen werden, ohne das Aussehen der Seite zu beeinträchtigen. Es ist zwar möglich, kritische Stile manuell zu extrahieren, aber wir empfehlen die Verwendung eines Tools wie dieses, um die Stile als Ausgangspunkt zu generieren.
Nachdem man das kritische CSS generiert hat, kopiert man es und fügt es in die Autoptimize-Einstellungen ein.
Der nächste Schritt besteht darin, die Front-End-Erfahrung deiner Webseite zu testen. Wenn du einige merkwürdige Aufblitze von ungestylten Inhalten (FOUC) bemerkst, musst du diese ungestylten Elemente wahrscheinlich identifizieren und die entsprechenden Stile in Autoptimize für die Einfügung hinzufügen.
Autoptimize bietet ein „Power-Up“, das automatisch kritische CSS für deine WordPress-Seiten generiert. Unserer Erfahrung nach kann diese Funktion deine Webseite gelegentlich verlangsamen, da sie externe API-Aufrufe zur Generierung des kritischen CSS verwendet. Daher hängt die anfängliche kritische CSS-Generierung von der Reaktionsfähigkeit eines externen Servers ab. In den meisten Fällen ist die oben erwähnte Methode, die keine externen API-Aufrufe erfordert, eine sauberere Lösung.
Inline des gesamten CSS
Für die meisten Webseiten raten wir davon ab, sämtliches CSS einzufügen, da dies die Seitengröße drastisch erhöhen kann. Darüber hinaus macht das Einfügen des gesamten CSS es für den Webbrowser unmöglich, CSS zwischenzuspeichern.
CSS von der Autoptimierung ausschließen
Standardmäßig schließt Autoptimize die folgenden Verzeichnisse und CSS-Dateien von der Aggregation aus. Wenn du Autoptimize daran hindern möchtest, deine CSS-Dateien zu aggregieren, kannst du sie dieser Liste hinzufügen. Ähnlich wie beim JavaScript-Ausschluss verhindert das Standardverhalten dieser Funktion nicht, dass CSS-Dateien verkleinert, sondern nur aggregiert werden.
- wp-content/cache/
- wp-content/uploads/
- admin-bar.min.css
- dashicons.min.css
HTML-Optionen
Die HTML-Optimierung von Autoptimize kann dazu beitragen, die Größe deiner Seiten zu reduzieren, indem Leerzeichen entfernt werden.
HTML-Code optimieren
Wir empfehlen, die Funktion „HTML-Code optimieren“ zu aktivieren, da sie die Seitengröße durch Entfernen unnötiger Leerzeichen in deinem HTML-Code reduziert. Obwohl diese Funktion mit den meisten Webseiten kompatibel ist, kann das Entfernen von Whitespace auf einigen Webseiten zu Störungen führen. Wir empfehlen daher, die HTML-Code-Optimierung gründlich zu testen, bevor du sie in einer Produktionsumgebung einsetzt.
HTML-Kommentare behalten
Aktiviere diese Funktion, wenn du HTML-Kommentare für deine optimierten Seiten behalten möchtest.
CDN-Optionen
Wenn du Kinsta CDN oder einen Proxy-Dienst mit CDN-Funktionen wie Cloudflare verwendest, musst du in den CDN-Optionen von Autoptimize nichts konfigurieren. Um deine Optimierung noch schneller und einfacher zu machen, kannst du deinen Code minifizieren. Das kannst du direkt im Dashboard von MyKinsta mit der Code-Minifizierungsfunktion machen.
Wenn du jedoch einen anderen CDN-Dienst nutzt, um deine Assets zu beschleunigen, musst du die CDN-URL in dieses Feld eingeben.
Cache-Informationen
Die „Cache-Info“ von Autoptimize zeigt wichtige Informationen wie den Speicherort und die Berechtigungen des Cache-Ordners sowie die Gesamtgröße der zwischengespeicherten Stile und Skripte an. Wenn du „Nein“ neben „Können wir schreiben?“ siehst, musst du mit deinem Host zusammenarbeiten, um die Berechtigungen des Ordners zu korrigieren.
Diverse Optionen
Autoptimize hat einige verschiedene Optimierungseinstellungen. Wenn du Probleme hast, optimierte CSS- und JS-Dateien zum Laden auf deine Webseite zu bekommen, musst du möglicherweise einige der folgenden Einstellungen neu konfigurieren.
Aggregierte Skripte/CSS als statische Dateien speichern
Wir empfehlen, diese Option zu aktivieren, um aggregierte Dateien als statische Dateien lokal zu speichern. Möglicherweise musst du sie deaktivieren, wenn dein Server nicht für die Komprimierung und den Ablauf von Dateien konfiguriert ist.
Ausgeschlossene CSS- und JS-Dateien verkleinern
Wir empfehlen, diese Option zu aktivieren, um sicherzustellen, dass alle CSS- und JS-Dateien minimiert sind. Wenn du jedoch bei einigen deiner ausgeschlossenen CSS- und JS-Dateien Probleme mit der Minifizierung feststellst, kannst du diese Option deaktivieren.
Auch für angemeldete Redakteure/Administratoren optimieren
Wir empfehlen, dies zu aktivieren, um sicherzustellen, dass die Assets für angemeldete Redakteure und Administratoren optimiert sind. Dies ist wichtig, wenn du als angemeldeter Benutzer die Autoptimize-Einstellungen testen möchtest.
Bildoptimierung bei der automatischen Optimierung
Autoptimize bietet eine integrierte Integration mit ShortPixel zur Optimierung von Bildern. Zusätzlich zu einer Einstellung der Bildqualität ermöglicht die Integration von Autoptimize auch die Erzeugung und Bereitstellung von WEBP-Versionen deiner Bilder.
Für Kinsta-Benutzer empfehlen wir die Verwendung der Bildoptimierungsfunktion in Autoptimize nicht. Stattdessen empfehlen wir die Verwendung der voll ausgestatteten Plugins von ShortPixel oder Imagify direkt. Mit dem vollständigen Plugin hat man eine genauere Kontrolle über die Optimierungseinstellungen, einschließlich des Neuschreibens von Bildern zur Verwendung des <picture>-Tags, der für die WEBP-Unterstützung in Kinsta erforderlich ist.
Die automatische Optimierung umfasst auch eine Lazy-Loading-Funktion für Bilder. Wir empfehlen, diese Funktion zu aktivieren, um die Seitengeschwindigkeit bei bildlastigen Seiten zu verbessern. Bei aktivierter Lazy-Loading-Funktion kannst du mit der Auto-Optimierung bestimmte Bildklassen und Dateinamen vom Lazy-Loading ausschließen.
Die Ausschlusseinstellung ist nützlich für Bilder wie Logos, soziale Symbole und andere wichtige Bildelemente, die nicht lazy geladen werden sollen. Wenn du nach einer Lösung suchst, die mehr Kontrolle über das Lazy-Loading bietet, schau dir unseren Leitfaden zum Lazy-Loading von Bildern und Videos in WordPress an.
Zusätzliche Optimierungen in Autoptimize
Google-Schriften
Autoptimize bietet einige verschiedene Optionen zur Optimierung von Google-Schriften. Welche Option für dich die beste ist, hängt davon ab, wie deine Webseite Google-Fonts verwendet.
- Lassen wie sie sind.
- Google-Schriftarten entfernen.
- Kombinieren und im Header verlinken.
- Kombinieren und im Header vorladen.
- Kombinieren und lade Schriften asynchron mit webfont.js.
Wir raten davon ab, die Option „Lassen wie sie sind“ zu verwenden, da sie keinen Geschwindigkeitsvorteil bietet.
Wenn Google-Schriftarten keine geschäftskritische Anforderung für deine Webseite ist, kann das Entfernen dieser Schriftarten und die Verwendung eines Systemschriftartenstapels stattdessen eine enorme positive Auswirkung auf die Geschwindigkeit deiner Seite haben.
Wenn du Google-Schriftarten auf deiner Webseite behalten möchtest, empfehlen wir dir, die letzten drei Optionen auszuprobieren, um herauszufinden, welche für deine Webseite am besten geeignet ist.
Emojis entfernen
Diese Autoptimize-Option entfernt CSS und JavaScript im Zusammenhang mit WordPress-Kernemojis. Wir empfehlen, diese Option zu aktivieren, da sie dazu beitragen kann, die Größe deiner Seite zu verringern. Außerdem werden die meisten gängigen Betriebssysteme mit Schriftartenstapeln ausgeliefert, die Emoticons enthalten. Natürlich gibt es auch andere Möglichkeiten, Emoticons auf deiner Webseite zu deaktivieren.
Abfragezeichenfolgen aus statischen Ressourcen entfernen
Wenn du Abfragezeichenfolgen (z.B. ?ver=) aus statischen Ressourcen entfernen möchtest, kannst du diese Option aktivieren. Das Entfernen von Abfragezeichenfolgen wirkt sich nicht auf die Ladezeit aus, kann aber dazu beitragen, die Punktzahl deiner Webseite in GTmetrix, Google Pagespeed und anderen Leistungstestservices zu verbessern.
Vorabverbindung zu 3rd-Party-Domains
Die Preconnect-Anweisung erlaubt es deinem Browser, sich mit bestimmten Domains zu verbinden, um DNS-Lookups und SSL-Handshake-Verhandlungen zu verarbeiten, bevor eine vollständige HTTP-Anfrage gesendet wird.
Wenn deine Webseite zum Beispiel ein Logobild hat, das von https://site.kinsta.cdn.com/logo.png bereitgestellt wird, kannst du Autoptimize anweisen, eine Preconnect-Direktive hinzuzufügen, um die anfänglichen DNS- und SSL-Verbindungen im Element <head> zu behandeln, bevor die HTTP-Anfrage im Element <body> deines HTML gestellt wird.
Du kannst die Entwickler-Tools oder den Inspektor deines Browsers verwenden, um wichtige externe Domains zu finden, zu denen du eine Vorabverbindung herstellen kannst. In der Beispielseite unten gibt es externe Anfragen an die folgenden Domains.
https://cdn.brianli.comhttps://www.google-analytics.comhttps://www.googletagmanager.com
Diese drei Bereiche können der Preconnect-Liste von Autoptimize hinzugefügt werden.
Aus Leistungsgründen empfehlen wir, der Preconnect-Liste von Autoptimize nicht mehr als sechs Domains hinzuzufügen, da die Angabe von Preconnect-Anweisungen für zu viele Domains zu einem Leistungseinbruch führen kann.
Spezifische Anfragen vorladen
Vorladeanweisungen weisen deinen Webbrowser an, ein Asset so schnell wie möglich herunterzuladen. Diese Direktive ist nützlich für das Herunterladen von Assets, die sehr früh im Seitenladeprozess benötigt werden. In der Praxis wird das Vorladen häufig verwendet, um die Ladezeiten für benutzerdefinierte Schriften zu beschleunigen, indem diese geladen werden, bevor sie im CSS der Seite angefordert werden.
Wir empfehlen, sich mit einem Entwickler darüber zu beraten, welche Assets, wenn überhaupt, auf deiner WordPress Webseite vorgeladen werden sollen. Wie bei vielen anderen leistungsbezogenen Optimierungen kann das Vorladen zu vieler Assets dazu führen, dass deine Webseite langsamer geladen wird.
Asynchrone JavaScript-Dateien
Mit der Funktion „asynchrone JavaScript-Dateien“ von Autoptimize kannst du bestimmte externe JavaScript-Dateien angeben, die asynchron über das async HTML-Flag geladen werden sollen. Während das asynchrone Laden von JS-Dateien die Seitengeschwindigkeit verbessern kann, empfehlen wir, angemessene Tests durchzuführen, um sicherzustellen, dass die Funktionalität der Webseite nicht beeinträchtigt wird.
Zusammenfassung
Wenn du weißt, wie du die Einstellungen anpassen kannst, ist das Autoptimize-Plugin eine solide Option für WordPress-Benutzer, die die Leistung ihrer Webseite verbessern möchten.
Mit grundlegenden Funktionen wie der HTML- und CSS-Optimierung und fortgeschrittenen Funktionen wie der Möglichkeit, Preconnect- und Preload-Direktiven festzulegen, bietet Autoptimize alles, was du brauchst, um die Leistung deiner WordPress-Seite im Frontend zu optimieren.
Wenn du mehr über die WordPress-Optimierung und die Optimierung des Backends deiner Webseite erfahren möchtest, solltest du dir unseren umfassenden Leitfaden zur WordPress-Performance ansehen.
Brian has been a WordPress user for over 10 years, and enjoys sharing his knowledge with the community. In his free time, Brian enjoys playing the piano and exploring Tokyo with his camera. Connect with Brian on his website at brianli.com.
Schreibe einen Kommentar