Autoptimize optimal einrichten

Autoptimize ist ein Plugin für WordPress, das mit dem Versprechen antritt, die Performance deiner Webseite drastisch zu verbessern. Mit welchen Einstellungen du die besten Resultate erhältst, erfährst du im Folgenden.

Wenn du dir lieber ein Video ansiehst, habe ich für dich die komplette Einrichtung von Autoptimize in einen kleinen Film verpackt:


Mit dem Laden des Videos akzeptieren sie die Datenschutzerklärung von YouTube

Auf dieser Seite zeige ich dir die für meine Bedürfnisse besten Einstellungen für Autoptimize. Da jede Seite unterschiedlich ist, können die optimalen Einstellungen bei dir anders sein. Da musst du einfach etwas rumprobieren.

Warum brauche ich Autoptimize?

Die Performance deiner Webseite ist ein entscheidender Faktor für deinen Erfolg. Das liegt einmal an Google. Mittlerweile ist der PageSpeed ein Rankingfaktor.

Je schneller also deine Seite ist, desto besser sind deine Chancen auf eine gute Platzierung in den Suchergebnissen. Allerdings muss man hier schon die Kirche im Dorf lassen. Das Tempo ist nur einer von sehr vielen Faktoren bei Google.

Ohne tolle Inhalte und ohne Backlinks wird auch die schnellste Seite niemals gut ranken.

Fast noch wichtiger ist das Tempo einer Seite für die Nutzererfahrung. Wenn deine Seite zu lange zum Laden braucht, klicken die Leute einfach weg und gehen auf eine schnellere Webpage.

Damit verlierst du Nutzer und auch viel Geld, wenn du eine kommerzielle Webseite betreibst. Es ist erwiesen, dass langsame Seiten auch eine schlechtere Conversionsrate haben.

Besonders wichtig ist die Leistung am Smartphone. Aktuell kommen auf meinen Seiten mehr als 2/3 der Besucher über mobile Geräte.

Für Werbelinks auf dieser Seite zahlt der Händler ggf. eine Provision. Werbelinks sind durch den Zusatz „Werbung“ oder am (*) erkennbar. Der Verkaufspreis für dich bleibt gleich. Mehr Infos

Wie teste ich den Speed meiner Seite?

Ich verwende zur Bestimmung der Ladegeschwindigkeit meiner Seiten verschiedene Tools.

Das Wichtigste für mich ist PageSpeed Insights von Google. Ganz einfach deswegen, weil für das Ranking die Beurteilung durch Google entscheidend ist.

Daneben gibt es auch noch einen Test auf die Optimierung für mobile Geräte. Hier wird überprüft, ob deine Seite mit Mobilgeräten einwandfrei funktioniert.

Zusätzlich nutze ich noch GTMetrix. In der Standardkonfiguration misst GTMetrix die Leistung auf einem Desktop in Vancouver in Kanada. Wenn du dich registrierst, kannst du die Einstellungen auch ändern.

PageSpeed Insights und GTMetrix geben dir auch Tipps, wie du die Leistung deiner Webseite verbessern kannst. Dabei brauchst du aber nicht zu übertreiben.

Es gibt echte Speed-Freaks, die unbedingt auf eine PageSpeed von 100 kommen wollen. Das ist meiner Meinung nach aber gar nicht nötig. Wenn die Leistung bei PageSpeed Insights über 90 liegt und die Google Search Console bei den Core Web Vitals nicht meckert, reicht das völlig aus.

Diese Vorteile hat Autoptimize

Enorme Verbesserung bei der Ladezeit

Als kleines Beispiel die Werte meiner Seite über Luftreiniger bei PageSpeed Insights.

Erst vor der Optimierung:

Und jetzt die Werte mit den weiter unten empfohlenen Einstellungen von Autoptimize:

Auf den ersten Blick ist die klare Steigerung zu erkennen.

Kostenlos

Autoptimize ist ein WordPress-Plugin, das enorm viel bringt. Echt außergewöhnlich ist die Tatsache, dass es auch noch gratis ist.

Support

Der Support von Autoptimize ist wirklich ultraschnell. Oft kommt eine Antwort schon innerhalb einer Stunde. Das ist nicht nur für ein kostenloses Plugin extrem bemerkenswert.

Die Installation von Autoptimize

Am einfachsten ist die Installation eines Plugins für WordPress aus dem Plugin-Verzeichnis.

Dazu klickst du im Menü auf Plugins > installieren

Wordpress Plugins installieren

Damit kommst du auf die Seite Plugins hinzufügen. Hier gibst du in das Feld Plugins durchsuchen rechts oben den Begriff Autoptimize ein. Die Suche beginnt automatisch.

Plugins hinzufügen

Auf der folgenden Seite klickst du im Feld Autoptimize auf den Button Jetzt installieren.

Autoptimize installieren

Wenn die Installation abgeschlossen ist, wird der Button blau und es erscheint Aktivieren. Einfach darauf klicken.

Wordpress Plugin aktivieren

Nach der Aktivierung befindest du dich auf der Seite Installierte Plugins. Mit einem Klick auf Einstellungen kommst du direkt zur Konfiguration von Autoptimize.

Oder gehe in deiner WordPress Menüleiste auf Einstellungen > Autoptimize

Nachfolgend zeige ich dir die Einstellungen, die sich auf meinen Seiten am besten bewährt haben. Die Einstellmöglichkeiten sind in mehrere Bereiche unterteilt.

Als Erstes sehen wir uns die Einstellungen im Reiter „JS, CSS & HTML“ an. Auch wenn du von JavaScript, CSS und HTML keine Ahnung hast, kannst du hier eine Menge Geschwindigkeit für deine Website herausholen.

Der Bereich JavaScript-Optionen

Autoptimize Javascript

JavaScript optimieren? – aktivieren

JS-Dateien zusammenfügen? – aktivieren

Auch Inline-JS zusammenfügen? – deaktivieren

Das Aktivieren dieser Option brachte bei mir keine Verbesserung der Geschwindigkeit. Deswegen lasse ich sie deaktiviert. Ein übertriebenes Anwachsen des Autoptimize-Cache konnte ich aber auch nicht feststellen.

JavaScript im <head> erzwingen? – deaktivieren

Wenn JavaScript im HTML-Element <head> geladen wird, besteht die Chance, dass deine Webseite deutlich langsamer wird. Falls für deine Seite unbedingt JavaScript-Dateien im <head> geladen werden müssen, kannst du diese Scripte unter dem Punkt Folgende Skripte von Autoptimize ausschließen: eintragen.

Try-Catch-Block hinzufügen? – deaktivieren

Wie ohnehin angeführt, ist diese Option eher für das Troubleshooting geeignet. Wenn du diese Einstellung aktivieren musst, damit deine Webseite klaglos läuft, solltest du die verantwortliche JavaScript-Datei identifizieren.

Folgende Skripte von Autoptimize ausschließen:

Hier kannst du eintragen, welche Dateien und Verzeichnisse du von der Optimierung ausschließen willst. Diese Möglichkeit dient dazu, um Fehler auf deiner Website zu verhindern, die durch das Zusammenfügen der JS-Dateien auftreten können.

Da ich das Theme Generatepress verwende, halte ich mich an die entsprechenden Empfehlungen für die Konfiguration.

Zusätzlich schließe ich auch noch „js/jquery/jquery.min.js“ aus.

Bei dir kann dieser Eintrag auch anders aussehen. Das ist abhängig vom verwendeten Theme und den Plugins.

Unbenutztes JavaScript entfernen?

Das ist nur eine Information für den Fall, dass Google PageSpeed Insights über unbenutztes JavaScript meckert.

Auch wenn das so ist, musst du nicht unbedingt reagieren, solange deine Seite bei den Core Web Vitals im grünen Bereich liegt.

Im nächsten Abschnitt findest du die CSS-Optionen.

CSS-Code optimieren? – aktivieren

CSS-Dateien zusammenfügen? – aktivieren

Mit dieser Option bündelt Autoptimize die CSS-Dateien. Das Aktivieren führt bei meinen Seiten zu einem dramatischen Anstieg der Geschwindigkeit.

Auch Inline-CSS zusammenfügen? – aktivieren

Auch diese Option bringt einen spürbaren Gewinn für den Speed meiner Webseiten.

Data: URIs für Bilder generieren (Inline Images)? – deaktivieren

Mit dieser Funktion bettet Autoptimize kleine Hintergrundbilder im base64-Format in CSS ein. Das hat auf meinen Seiten keinen spürbaren Vorteil gebracht. Deswegen setze ich bei dieser Option keinen Haken.

Render-blockierendes CSS entfernen? – Deaktivieren

Hier geht es um die sogenannte above the fold CSS. Above the fold ist immer jener Bereich der Webseite, der ohne Scrollen sichtbar ist. Das ist aber je nach Bildschirmgröße unterschiedlich und nicht einfach zu bestimmen.

Ich selbst hatte einige Zeit ein Tool zur automatischen Generierung dieser kritischen CSS im Einsatz. Unterschied habe ich eigentlich keinen bemerkt. Überdies stellt sich die Frage, was die Steigerung des PageSpeed Score von 95 auf 97 überhaupt bringt.

Gesamten CSS-Code Inline einfügen? – deaktivieren

Diese Option bringt für mich keinen Gewinn an Speed. Deswegen bleibt sie bei mir deaktiviert.

Folgende CSS-Dateien von Autoptimize ausschließen:

Autoptimize schließt einige Dateien standardmäßig von der Optimierung aus:

  • wp-content/cache/
  • wp-content/uploads/
  • admin-bar.min.css
  • dashicons.min.css

Ich habe den Eindruck, dass diese Option meine Seite etwas langsamer macht. Umgekehrt gibt es auch ohne den Ausschluss dieser Dateien keine Darstellungsprobleme. Deswegen bleibt dieses Feld bei mir leer.

Mein Rat lautet, die Standardeinstellung erst mal zu belassen. Dann kannst du nach und nach die einzelnen Einträge löschen. Tauchen Probleme auf, musst du den entsprechenden Eintrag wieder vornehmen.

Nicht verwendetes CSS entfernen?

Hier gilt sinngemäß, was ich schon beim Eintrag über das Entfernen von JavaScript geschrieben habe. Solange das Tempo deiner Website stimmt, brauchst du hier nichts zu unternehmen.

Weiter zu den HTML-Optionen

HTML-Code optimieren? – aktivieren

Diese Funktion entfernt die Leerzeichen aus dem HTML-Code. Dadurch wird die Größe der Seite reduziert.

HTML-Kommentare beibehalten? – deaktivieren

Für mich gibt es keinen Grund, die HTML-Kommentare im Quelltext zu belassen. Für dich wahrscheinlich auch nicht.

CDN-Optionen

Wenn du ein CDN, also ein Content Delivery Network, verwendest, musst du hier die URL eingeben. Bei der Nutzung von Cloudflare kannst du dir den Eintrag sparen.

Cache-Informationen

Hier findest du Angaben zum Speicherort deines Cache-Ordners, den Berechtigungen und zur Größe der Styles und Skripte in deinem Cache.

Weitere Optionen bieten einige zusätzliche Einstellungen

Weitere Optionen Autoptimize

Zusammengefügte CSS-/Skript-Dateien als statische Dateien speichern? – aktivieren

Diese Funktion solltest du immer aktivieren. Wenn dein Server mit der Komprimierung nicht klarkommt, musst du die Option möglicherweise abwählen.

Ausgeschlossene CSS- und JS-Dateien minimieren? – aktivieren

Damit erreichst du, dass alle CSS und JavaScript-Dateien von Autoptimize minimiert werden. Wenn es mit den ausgeschlossenen Dateien Schwierigkeiten gibt, musst du diese Option deaktivieren.

404-Fallbacks aktivieren? – deaktivieren

Auch für angemeldete Redakteure/Administratoren optimieren? – aktivieren

Mit dieser Funktion behalte ich als angemeldeter Administrator oder Redakteur immer den Überblick, ob und wie sich eine Änderung der Autoptimize-Einstellungen auf meine Website auswirkt.

Konfiguration pro Beitrag/Seite aktivieren? – aktivieren

Fügt auf der Beitrag bearbeiten Seite eines Artikels ein kleines Kästchen ein. Dort kannst du die verschiedenen Optimierungen für einzelne Beiträge und Seiten abschalten.

Diese Funktion habe ich bis jetzt noch nie gebraucht. Weil sie aber keinerlei Auswirkungen hat, bleibt sie aktiviert.

Nicht vergessen: Du musst noch die Änderungen speichern und den Cache leeren.

Damit hast du schon die wichtigsten Einstellungen in Autoptimize vorgenommen. Das WordPress-Plugin hat aber noch einiges mehr zu bieten. Dazu gehe wieder zurück zum Seitenanfang und wähle den Tab Bilder aus.

Bildoptimierung

Autoptimize Bildoptimierung

Bilder optimieren – deaktivieren

Mit dieser Funktion kannst du deine Bilder automatisch mit Shortpixel optimieren lassen. Neben einer Optimierung werden die Bilder auch im „modernen“ Format WebP bereitgestellt.

Ich selbst nutze diesen Dienst nicht, und zwar aus mehreren Gründen:

Da die Bilder an einen Drittserver gesendet werden, kann es Probleme mit der DSGVO und dem TTDSG geben, wenn erkennbare Personen abgebildet sind.

Ich nutze schon den EWWW Image Optimizer für meine Bilder. Damit habe ich einfach eine bessere Kontrolle über die Einstellungen.

Bilder verzögert laden? – aktivieren

Seit der Version 5.5 ist das verzögerte Laden von Bildern bei WordPress Standard.

Mit dieser Funktion werden Bilder erst dann geladen, wenn sie für den Besucher sichtbar werden. Diese Funktion wird auch als Lazy Load oder Lazy Loading bezeichnet. Sie kann die Ladegeschwindigkeit einer Webseite mit vielen Bildern dramatisch beschleunigen.

Da dieser Job bereits von WordPress selbst übernommen wird, könnte man in Autoptimize eigentlich darauf verzichten.

Allerdings habe ich festgestellt, dass bei meinen Seiten die Lazy Load-Funktion von Autoptimize etwas bessere Ergebnisse bringt. Ob es bei dir auch so ist, musst du ausprobieren.

Du brauchst dir auch keine Sorgen wegen eines doppelten LL zu machen. Wenn diese Funktion in Autoptimize aktiviert ist, wird LL von WordPress automatisch deaktiviert.

Nun kannst du auf den nächsten Reiter klicken:

Kritisches CSS

Kritisches CSS

Wie schon in den Bemerkungen über die CSS-Einstellungen erwähnt, ist das kritische CSS nicht mit ein paar Worten abzuhandeln.

An dieser Stelle nur Folgendes: Ich habe criticalcss.com auf einigen meiner Seiten ausprobiert. Die messbare Beschleunigung der Ladegeschwindigkeit hat mich nicht überzeugt. Da der Dienst auch noch einiges kostet, habe ich wieder gekündigt.

Aber das muss jeder für sich testen und entscheiden. Mit der 30-Tage-Geld-zurück-Garantie gehst du auch kein Risiko ein.

Trotzdem sollte besonders ein nicht so erfahrener Blogger erst an den Inhalten arbeiten, bevor er das letzte Quäntchen Speed aus seiner Seite pressen will.

Noch mehr Optimierungen bietet Autoptimize unter dem Reiter:

Extras

Extras

Google Fonts – Google Fonts entfernen

Auf meinen Webseiten verwende ich keine Google Fonts. Das hat zwei einfache Gründe:

Erstens: Ich sehe keinerlei Vorteile in der Verwendung. Eine Webseite sollte durch tolle Inhalte und nicht durch besondere Schriften beeindrucken.

Zweitens: Bei der standardmäßigen Einbindung von Google Fonts werden die Schriften über den Google Server in den USA geladen. Bei dieser Vorgangsweise sind Probleme mit dem Datenschutz vorprogrammiert.

Nun lassen sich die Google Fonts auch lokal und damit DSGVO-konform einbinden. Aber wie bereits oben erwähnt: Ich brauche sie nicht.

Emojis entfernen – aktiviert

Wenn du auf deiner Seite Emojis verwenden willst, deaktiviere diese Option. Ansonsten setze den Haken.

Abfragezeichenfolgen von statischen Ressourcen entfernen – aktivieren

Mit dieser Option lädt deine Seite zwar nicht schneller, aber du bekommst keine diesbezüglichen Fehlermeldungen etwa in GTMetrix oder Pingdom.

Zu Dritt-Domains vorverbinden(Fortgeschrittene Benutzer)

Damit kann sich der Browser zu bestimmten Domains verbinden, bevor eine HTTP-Anfrage an den Server gesendet wird. Interessant etwa für Google Fonts oder Google Analytics.

Da ich nichts davon verwende, bleibt das Feld leer.

Spezifische Anfragen im Voraus laden (Für Fortgeschrittene)

Mit dieser Option lassen sich bestimmte Ressourcen mit höchster Priorität vorab laden. Meiner Ansicht nach ist das für meine Seiten nicht notwendig. Darüber hinaus können zu viele Einträge die Webseite verlangsamen.

Deshalb trage ich hier auch nichts ein.

Asynchrone JavaScript-Dateien (Fortgeschrittene Benutzer)

Wenn JavaScript-Dateien asynchron geladen werden sollen, kannst du das hier angeben. Mit dieser Funktion kannst du dir allerdings auch richtige Probleme in Bezug auf die Darstellung und die Funktionalität deiner Webseite einhandeln.

Deswegen musst du deine Seite auf Herz und Nieren prüfen, wenn du hier etwas eingibst.

Wesentlich bequemer wird das Ganze mit dem Plugin Async JavaScript. Ich selbst habe es auf einigen meiner Seiten im Einsatz und werde es auch demnächst in einem eigenen Artikel behandeln.

Optimiere YouTube-Videos

Wie du siehst, habe ich auf dieser Seite das Plugin WP YouTube Lyte installiert.

Es dient dazu, Videos verzögert zu laden und beschleunigt damit deine Webseite.

WP YouTube Lyte lädt nur ein Vorschaubild von deinem Server und nicht das komplette Video von YouTube. Damit sollte es auch mit der DSGVO keine Probleme geben.

Anmerkung: Ich bin kein Jurist und das ist nur meine persönliche Meinung und keine Rechtsberatung. Der Einsatz jedes Plugins erfolgt auf eigene Gefahr.

Über WP YouTube Lyte ist auch schon ein eigener Artikel in Planung.

Gratuliere! Damit hast du die Konfiguration von Autoptimize geschafft und kannst dich über eine rasend schnelle Webseite freuen.

In den Einstellungen von Autoptimize bleibt jetzt noch ein Reiter übrig:

Mehr optimieren!

Aktualisiert am 16.11.2022: Seit Neuestem gibt es auch eine Bezahlversion, die sich Autoptimize Pro nennt. Aktuell ist sie noch in der Beta-Version. Sie verspricht einen noch größeren Boost für die Performance.

Da ich mit dem Speed meiner Seiten vollauf zufrieden bin, erspare ich mir die zusätzlichen Kosten.

Zusätzlich findest du noch einige Tools, um deine Website noch weiter zu optimieren. Für ausgewiesene Speed-Freaks sicher interessant, aber nicht unbedingt notwendig.

Fazit für Autoptimize

Meiner Ansicht nach ist Autoptimize ein absolutes Must-Have für jede WordPress-Webseite. Der Gewinn an Geschwindigkeit ist enorm und schlägt sich in einer besseren Nutzererfahrung und einem besseren Ranking bei Google nieder.

Ich denke, das sind schlagende Argumente. Wer auf Autoptimize verzichtet, ist selbst schuld.

Gerhard Rogenhofer

Ich bin Gerhard, ein erfahrener WordPress-Enthusiast mit langjähriger Expertise. Mit umfangreichem Wissen und einer Leidenschaft für die Plattform teile ich auf meiner Website aktuelle Empfehlungen für die besten WordPress-Plugins.

Finde hier die Lösungen, die deine Website braucht, um zu glänzen.