Autoptimize

Beschreibung

Autoptimize macht das Optimieren deiner Website sehr einfach. Es kann zusammenführen, minimieren, Skripte und Stile cachen, standardmäßig CSS in den head der Seite injizieren (aber auch verzögern), es verschiebt und verzögert Skripte in den Footer und minimiert HTML. Die „Extra“-Optionen ermöglichen es dir, Google Fonts und Bilder zu optimieren, nicht-zusammengeführtes JavaScript asynchron zu laden, überflüssigen Emoji-Code aus dem WordPress-Core zu entfernen und mehr. Als solches kann es die Leistung deiner Website steigern, selbst wenn sie bereits auf HTTP/2 läuft! Eine ausführliche API ist verfügbar, um es dir zu ermöglichen, Autoptimize an die bestimmten Anforderungen einer jeden Website anpassen zu können.

Falls dir Geschwindigkeit wichtig ist, solltest du eines der großartigen Caching-Plugins einsetzen, um Seiten zu cachen. Einige gute Kandidaten, die Autoptimize auf diese Weise ergänzen sind z.B. WP Super Cache, HyperCache, Comet Cache oder KeyCDN’s Cache Enabler.

Premium Support
We provide great Autoptimize Pro Support and Web Performance Optimization services, check out our offering on https://autoptimize.com/!

(Speed-surfing image under creative commons by LL Twistiti)

Installation

Installiere einfach über „Plugins hinzufügen“ in WordPress und alles wird gut sein. Eine manuelle Installation ist ebenfalls sehr unkompliziert:

  1. Lade die zip-Datei hoch und entpacke sie im /wp-content/plugins/ Verzeichnis
  2. Aktiviere das Plugin im „Plugins“-Menü in WordPress.
  3. Gehe zu Einstellungen > Autoptimize und aktiviere die gewünschten Optionen. Normalerweise bedeutet dies „Optimiere HTML/ CSS/ JavaScript“.

FAQ

Was macht das Plugin, um dabei zu helfen meine Website zu beschleunigen?

Es verbindet alle Skripte und Styles, minimiert und komprimiert sie, fügt Expires-Headers hinzu, cacht diese, und verschiebt Styles in den Head der Seite, und Skripte (optional) in den Footer. Es minimiert auch den HTML Code selbst, was deine Seite zu einem richtigen Leichtgewicht macht.

Ich bin schon auf HTTP/2, brauche ich da Autoptimize noch?

HTTP/2 ist sicherlich ein großer Schritt nach vorne, reduziert es doch die Last bei mehreren Anfragen vom selben Server deutlich, indem dieselbe Verbindung mehrere gleichzeitige Anfragen verarbeiten kann. Trotzdem kann das Zusammenfügen von CSS/ JS noch immer sehr sinnvoll sein, wie beschrieben in diesem css-tricks.com-Beitrag und in diesem Blog-Beitrag eines Ebay-Technikers. Die Schlussfolgerung: Konfiguriere, teste, konfiguriere um, teste erneut, verfeinere und finde heraus, was in deinem Kontext am Besten funktioniert. Vielleicht ist es reines HTTP/2, vielleicht HTTP/2 + Zusammenführung und Minimierung, vielleicht HTTP/2 + Minimierung (was AO auch beherrscht, wähle einfach die Optionen „CSS-Dateien zusammenfügen“ und/oder „CSS-Dateien zusammenfügen“ ab).

Wird das mit meinem Blog funktionieren?

Auch wenn Autoptimize ohne jegliche Garantien daherkommt, wird es normalerweise reibungslos laufen, wenn du es korrekt konfigurierst. Siehe „Fehlerbehebung“ unten für Informationen wie du es im Fall von Problemen konfigurierst.

Warum jquery.js nicht optimiert wird

Beginnend mit AO 2.1 wird das jquery.js des WordPress-Core aus dem einfachen Grund nicht optimiert, dass viele beliebte Plugins Inline JS erzeugen, das nicht zusammengefügt wird (wegen möglicher Probleme mit der Cachegröße bei einmaligem Code in Inline JS), welches von jquery abhängig ist. Das Ausschließen von jquery.js stellt sicher, dass die meisten Websites auf Anhieb funktionieren. Falls du möchtest, kannst du auch jquery optimieren, du kannst es von der JS-Optimierungs-Ausschlußliste löschen (Du musst vielleicht „Auch inline JS zusammenfügen“ aktivieren, sowie „Erzwinge JavaScript im head“ ).

Warum blockiert von Autoptimize generierter JavaScript-Code das Rendering?

Falls nicht „erzwungen im head“, ist autoptimiertes JS nicht „render blocking“, weil das „defer“-flag hinzugefügt wurde. Es ist aber möglich, dass ein anderes Plugin dieses flag entfernt. Angeblich tut Speed Booster Pack das, aber das Verhalten wurde noch nicht bestätigt (engl.).

Warum wird das autoptimierte CSS noch immer als „render blocking“ bezeichnet?

Mit der Standard-Konfiguration von Autoptimize wird das CDD im head verlinkt, was ein sicherer Standard ist, aber Google PageSpeed Insights beschwert sich darüber. Du kannst dir „Gesamten CSS-Code Inline einfügen“ oder „CSS-Code inline einfügen und verschieben“ näher ansehen, welche auch in dieser FAQ erklärt werden.

Was ist der Nutzen von „inline oder verzögertem CSS“?

CSS sollte üblicherweise im Head des Dokumentes stehen. Seit kurzem empfiehlt unter anderem Google das verzögerte Ausliefern von nicht-essentiellem CSS, während die Styles inline benötigt werden, um die Seite „above the fold“ aufzubauen. Dies ist besonders wichtig, um Seiten auf Mobilgeräten so schnell wie möglich zu rendern. Seit Autoptimize 1.9.0 ist das leicht; wähle „Inline und Defer CSS“, kopiere den „above the fold“-Block in das Eingabefeld (Textfeld) und du kannst loslegen!

Aber wie finde ich heraus was das „above the fold CSS“ ist?

Es gibt keine einfache Lösung, weil der Bereich „above the fold“ von der Bildschirmgröße abhängt. Es gibt trotzdem verfügbare Tools, die versuchen herauszufinden, was „above the fold“ ist. Diese Liste von Tools ist ein guter Startpunkt. Der Sitelocity critical CSS generator und Jonas Ohlsson’s criticalpathcssgenerator ist eine gute Grundlösung und http://criticalcss.com/ ist eine Premium-Lösung desselben Jonas Ohlsson. Alternativ kann auch dieses Bookmarklet (nur für Chrome) hilfreich sein.

Oder sollte man alles CSS inline setzen?

Kurze Antwort: Wahrscheinlich nicht.

Früher war CSS-Optimierung leicht; platziere alles CSS in deinen Head, füge alles in eine CSS-Datei pro Medientyp zusammen und du konntest loslegen. Aber seitdem Google Mobilgeräte in PageSpeed Insights integriert hat und damit begann, sich über CSS zu beklagen, dass den Seitenaufbau blockiert, kamen die Dinge durcheinander (siehe „CSS verzögern“ an anderer Stelle der FAQ). Eine der Lösungen ist all dein CSS inline zu setzen, was seit Autoptimize 1.8.0 unterstützt wird.

Das Inlining des gesamten CSS hat einen klaren Vorteil (besseren PageSpeed Wert) und einen großen Nachteil; deine HTML Seite wird signifikant anwachsen und falls du viel CSS einsetzt, wird Pagespeed Insights sich über „roundtrip times“ beschweren. Auch wenn du dir einen Test ansiehst, der mehrere Abrufe (sagen wir 5 Seiten) beinhaltet, wird die Geschwindigkeit niedriger sein, da die CSS-Last immer und immer wieder gesendet wird, währenddessen die ausgelagerten CSS-Dateien nicht mehrmals gesendet werden, da sie sich im Cache befinden.

Deine Wahl sollte von deinen Antworten auf manche Website-spezifische Fragen abhängen; Wieviel CSS hast du? Wieviele Seiten pro Besuch fordern deine Besucher an? Falls du eine Menge CSS oder eine hohe Anzahl von Seiten/Besuch hast, sollte das CSS vermutlich besser nicht inline sein.

Du kannst zu diesem Thema mehr Information finden in diesem Blog Post.

Mein Cache wird riesig, leert Autoptimize nicht den Cache?

Autoptimize hat keinen wirksamen Mechanismus für das Leeren des Caches, da dies auch optimiertes CSS/JS entfernen könnte, worauf sich andere Caches noch beziehen, was deine Website unbrauchbar machen würde. Außerdem ist ein schnell wachsender Cache ein Anzeichen für andere zu vermeidende Probleme.

Du kannst die Cachegröße stattdessen auf einem akzeptablen Wert halten entweder durch:

  • Abschalten der Optionen „Inline JS zusammenfügen“- und/oder „Inline CSS zusammenfügen“
  • Ausschluß von JS-Variablen (oder manchmal CSS-Selektoren), welche sich pro Seite ändern (oder Seitenladevorgang). Du erfährst, wie du das tun kannst, in diesem Blog-Beitrag.

Abgesehen von den oben geäußerten Bedenken gibt es Drittanbieter-Lösungen, um den AO-Cache automatisch zu leeren, z. B: diesen Code oder dieses Plugin, aber aus den genannten Gründen solltest du diese nur einsetzen, wenn du wirklich weißt, was du tust.

„Cache leeren“ scheint nicht zu funktionieren?

When clicking the „Delete Cache“ link in the Autoptimize dropdown in the admin toolbar, you might to get a „Your cache might not have been purged successfully“. In that case go to Autoptimizes setting page and click the „Save changes & clear cache“-button.

Moreover don’t worry if your cache never is down to 0 files/ 0KB, as Autoptimize (as from version 2.2) will automatically preload the cache immediately after it has been cleared to speed further minification significantly up.

Kann ich weiterhin den Rocket Loader von Cloudflare benutzen?

Cloudflare Rocket Loader is a pretty advanced but invasive way to make JavaScript non-render-blocking, which Cloudflare still considers Beta. Sometimes Autoptimize & Rocket Loader work together, sometimes they don’t. The best approach is to disable Rocket Loader, configure Autoptimize and re-enable Rocket Loader (if you think it can help) after that and test if everything still works.

At the moment (June 2017) it seems RocketLoader might break AO’s „inline & defer CSS“, which is based on Filamentgroup’s loadCSS, resulting in the deferred CSS not loading.

I tried Autoptimize but my Google Pagespeed Scored barely improved

Autoptimize is not a simple „fix my Pagespeed-problems“ plugin; it „only“ aggregates & minifies (local) JS & CSS and allows for some nice extra’s as removing Google Fonts and deferring the loading of the CSS. As such Autoptimize will allow you to improve your performance (load time measured in seconds) and will probably also help you tackle some specific Pagespeed warnings. If you want to improve further, you will probably also have to look into e.g. page caching, image optimization and your webserver configuration, which will improve real performance (again, load time as measured by e.g. https://webpagetest.org) and your „performance best practise“ pagespeed ratings.

Was kann ich mit der API anfangen?

Eine ganze Menge, es gibt Filter, die du benutzen kannst, um Autoptimize auf Anfrage zu deaktivieren, die CSS- und JS-Ausschlüsse zu ändern, die Grenze für das Inlining für CSS background-Bilder zu ändern, zu definieren, welche JS-Dateien hinter die zusammengefügten geschoben werden, das defer-Attribut der zusammengefügten JS-Skript-Tags zu ändern, … Es gibt Beispiele für einige Filter in der autoptimize_helper.php_example und in diesen FAQ.

Wie funktioniert ein CDN?

Seit Version 1.7.0 ist CDN aktiviert sobald das CDN Stammverzeichnis eingegeben wurde (z.B. http://cdn.example.net/wordpress/). Falls dieser URL vorliegt, wird er für alle von Autoptimize generierten Dateien benutzt (z.B. verknüpftes CSS und JS), inklusive Hintergrundbilder innerhalb von CSS (falls du nicht data-uri’s benutzt).

Falls deine hochgeladenen Bilder ebenso auf dem CDN liegen sollen, kannst du den upload_url_path deiner WordPress Konfiguration (/wp-admin/options.php) zum CDN-Upload-Zielverzeichnis ändern (z.B. http://cdn.example.net/wordpress/wp-content/uploads/). Bedenke dass dies nur für Bilder funktioniert die von da an hochgeladen werden, nicht für bereits hochgeladene Bilder. Danke an BeautyPirate für den Tipp!

Warum werden meine Fonts nicht per CDN ausgeliefert?

Autoptimize unterstützt das, aber es ist nicht standardmäßig aktiv, weil nicht lokale Fonts evtl eine extra Konfiguration benötigen. Aber wenn deine cross-origin Anfrage Strategie in Ordnung ist, kannst du Autoptimize anweisen die Fonts dem CDN hinzuzufügen durch Hook in die API, durch Setzen von autoptimize_filter_css_fonts_cdn auf true auf folgende Art;

add_filter('autoptimize_filter_css_fonts_cdn',__return_true);
Ich nutze Clouflare, was sollte ich als CDN-Stammverzeichnis eingeben?

Nichts, wenn du bei Cloudflare bist, ist dein autoptimiertes CSS/JS bei Cloudflare automatisch auf dem Cloudflare-CDN.

Wie kann ich erzwingen, dass die zusammengefügten Dateien statisches CSS oder JS anstelle von PHP sind?

Falls dein Webserver ordentlich konfiguriert ist, um mit Kompression (gzip oder deflate) und cache expiry (Expire und Cache-Steuerung mit ausreichender Cache-Möglichkeit) umzugehen, brauchst du Autoptimize nicht, um das für dich zu regeln. In diesem Fall kannst du die „Zusammengefügte CSS / Skript-Dateien als statische Dateien speichern?“-Option wählen, welche Autoptimize zwingt, die zusammengefügten Dateien als .css und .js-Dateien zu speichern (das bedeutet es wird kein PHP benötigt um diese Dateien auszuliefern). Diese Einstellung ist der Standard seit Autoptimize 1.8.

Wie funktioniert das „Ausschliessen von der Optimierung“?

Sowohl CSS- wie auch JS-Optimierung kann Code von der Zusammenführung und Minimierung auslassen, durch Hinzufügen von „Identifikatoren“ zu der Komma getrennten Ausschlussliste. Die exakte Identifizierungszeichenfolge kann auf folgende Arten bestimmt werden:

  • Falls du nur eine spezifische Datei ausschliessen willst, z.B. wp-content/plugins/funkyplugin/css/style.css, kannst du einfach „funkyplugin/css/style.css“ ausschliessen
  • Falls du alle Dateien eines bestimmten Plugins ausschliessen möchtest, z.B. wp-content/plugins/funkyplugin/js/*, kannst du z.B. „funkyplugin/js/“ oder „plugins/funkyplugin“ ausschliessen
  • Falls du inline code ausschliessen möchtest, musst du eine spezifischen, einzigartige Zeichenfolge in diesem Teil des Codes finden und diesen zu der Ausschlussliste hinzufügen. Beispiel: Um <script>funky_data='Won\'t you take me to, Funky Town'</script> auszuschliessen, wäre der Identifikator „funky_data“.
Konfiguration & Fehlerbehebung von Autoptimize

Nachdem das Plugin installiert und aktiviert ist, kannst du auf einer Einstellungsseite HTML, CSS und JavaScript Optimierungen einschalten. Wenn du magst, kannst du einfach alle davon einschalten, oder wenn du vorsichtiger bist eine nach der anderen.

Falls dein Blog nach dem Einschalten von Autoptimize nicht normal funktioniert, sind hier ein paar Hinweise, um solche Vorkommnisse zu identifizieren & zu lösen, unter Benutzung der „Erweiterten Einstellungen“:

  • Falls alles funktioniert, du aber feststellst, dass dein Blog langsamer ist, stelle sicher, dass du ein Caching Plugin (WP Super Cache oder ähnliche) hast und kontrolliere auch die Informationen über die Cachegröße (Die Lösung für dieses Problem betrifft auch die Geschwindigkeit ungecachter Seiten) in den FAQ.
  • Falls dein Blog seltsam aussieht, z.B. wenn das Layout durcheinander gerät, liegt ein Problem mit der CSS-Optimierung vor. In diesem Fall kann du die Option „Nur im Head nach CSS suchen?“ wählen und schauen, ob dies das Problem löst. Du kannst auch erzwingen, dass CSS nicht zusammengefügt wird, indem du es in deinem Theme oder Widget in noptimize-Tags packst oder den Dateinamen (für externe Style-Dateien) oder die Zeichenfolgen (für Inline-Styles) zu der Ausschlussliste hinzufügst.
  • Falls die Funktionalität deiner Website gestört ist (ein Slider-Karussell, ein Menü, das Suchfeld, …) hast du es vermutlich mit einem Problem bei der Optimierung von JavaScript zu tun. Deaktiviere die Option „Auch inline JS zusammenfügen“ und aktiviere „JavaScript im Head erzwingen?“ und versuche es erneut. Das Ausschliessen von ´js/jquery/jquery.js´ von der Optimierung (siehe unten) und optional das Aktivieren von „Try-Catch Block hinzufügen?„) kann auch helfen. Alternativ – für die Technikversteher – kannst du spezifische Skripte von der Behandlung durch Autoptimize ausschließen (verschieben und/oder zusammenfügen), indem du eine Zeichenfolge hinzufügst, die dem störenden Javascript entspricht oder innerhalb deiner Template-Dateien oder Widgets durch Einschließen des Codes zwischen noptimize-Tags. Das Identifizieren des störenden JavaScript und die Wahl der korrekten Ausschluss-Zeichenfolge kann durch Ausprobieren erfolgen, aber in der Mehrheit der Fälle können Probleme mit der JavaScript Optimierung auf diese Weise behoben werden. Beim Debuggen von JavaScript-Problemen ist die Fehlerkonsole des Browsers das wichtigste Tool, das dir dabei hilft zu verstehen, was vor sich geht.
  • Falls dein Theme oder Plugin jQuery benötigt, kannst du entweder das Laden im Head erzwingen und/oder jquery.js (und jQuery-Plugins falls benötigt) ausschliessen.
  • Falls du keine CSS oder JS Optimierungen zum Laufen bringst, kannst du natürlich immer noch die beiden anderen Optimierungstechniken benutzen.
  • Falls du die obigen Fehlerbehebungs-Tipps versucht hast und du noch immer nicht CSS und JS zum laufen bekommst, kannst du im WordPress Autoptimize Support-Forum nach Hilfe fragen. Weiter unten findest du eine Beschreibung, welche Information du in deinem „Problem-Ticket“ angeben solltest.
Hilfe, ich erhalte eine weiße Seite oder einen „internal server error“ nach dem Aktivieren von Autoptimize!

Make sure you’re not running other HTML, CSS or JS minification plugins (BWP minify, WP minify, …) simultaneously with Autoptimize or disable that functionality your page caching plugin (W3 Total Cache, WP Fastest Cache, …). Try enabling only CSS or only JS optimization to see which one causes the server error and follow the generic troubleshooting steps to find a workaround.

Aber ich habe immer noch leere autoptimierte CSS oder JS-Dateien!

Falls du Apache laufen hast, kann in manchen Fällen die von Autoptimize geschriebene htaccess-Datei Konflikte mit den AllowOverrides-Einstellungen deiner Apache-Konfiguration auslösen (das ist der Fall bei der Standard-Konfiguration mancher Ubuntu-Installationen), was bei autoptimierten CSS- und JS-Dateien zu „Internen Serverfehlern“ führen kann. Dies kann durch Setzen der AllowOverrides auf All gelöst werden.

Ich bekomme keinen Fehler, aber meine Seiten sind überhaupt nicht optimiert?

Autoptimize macht einige Tests, bevor es tatsächlich optimiert. Wenn eine der folgenden Bedingungen zutrifft, werden deine Seiten nicht optimiert:

  • wenn im Customizer
  • falls es keinen öffnenden <html-Tag gibt
  • if there is <xsl:stylesheet in the response (indicating the output is not HTML but XML)
  • if there is <html amp in the response (as AMP-pages are optimized already)
  • if the output is an RSS-feed (is_feed() function)
  • if the output is a WordPress administration page (is_admin() function)
  • if the page is requested with ?ao_noptimize=1 appended to the URL
  • if code hooks into Autoptimize to disable optimization (see topic on Visual Composer)
  • if other plugins use the output buffer in an incompatible manner (disable other plugins selectively to identify the culprit)
Visual Composer, Beaver Builder und ähnliche Page Builder Lösungen sind defekt!!

Deaktiviere diese Option, damit Autoptimize für angemeldete Benutzer aktiv ist und leg los mit „Draggen und Droppen“ 😉

Hilfe, das Bezahlen in meinem Shop funktioniert nicht mehr!!

Deaktiviere diese Option, um die Warenkorb- oder Checkout-Seiten (funktioniert mit WooCommerce, Easy Digital Downloads und WP eCommerce) zu optimieren.

Revolution Slider läuft nicht mehr!

Stelle sicher, dass js/jquery/jquery.js sich in der Komma-separierten Liste von JS-Optimierungs-Ausnahmen befindet (in der Standard-Konfiguration ist es nicht enthalten).

Ich erhalte Fehler „jQuery is not defined“-Fehler

In diesem Fall hast du nicht zusammengeführtes JavaScript, das zum Laden jQuery benötigt. Füge dafür js/jquery/jquery.js zur Komma-separierten Liste von JS-Optimierungs-Ausnahmen hinzu.

Ich nutze NextGen Galleries und eine Menge JS ist nicht zusammengeführt/ minimiert?

NextGen Galleries tut raffinierte Dinge, um JavaScript hinzuzufügen. Damit Autoptimize in der Lage ist, dies trotzdem zusammenzufassen, kannst du entweder Nextgen Gallerys Ressourcen-Verwaltung mit diesem Codeschnipsel abschalten: add_filter( 'run_ngg_resource_manager', '__return_false' );. Oder du kannst Autoptimize an einem früheren Punkt starten, indem du diesen Code zu deiner wp-config.php hinzufügst: define("AUTOPTIMIZE_INIT_EARLIER","true");

Was ist noptimize?

Starting with version 1.6.6 Autoptimize excludes everything inside noptimize tags, e.g.:
<!--noptimize--><script>alert(‚this will not get autoptimized‘);</script><!--/noptimize-->

Du kannst das im Inhalt einer Seite/Beitrag tun, in Widgets und in deinen Theme-Dateien (Bedenke das Erstellen eines Child Themes, um zu verhindern, dass deine Änderungen durch Theme Updates überschrieben werden).

Kann ich den Ordner & Dateinamen der gecachten Autoptimize Dateien ändern?

Ja, falls du Dateien von z.B. /wp-content/resources/aggregated_12345.css anstelle von standardmässig /wp-content/cache/autoptimize/autoptimize_12345.css ausliefern möchtest, dann ergänze folgendes zu der wp-config.php:

define('AUTOPTIMIZE_CACHE_CHILD_DIR','/resources/');
define('AUTOPTIMIZE_CACHEFILE_PREFIX','aggregated_');
Kann das erzeugte JS/CSS mit gzip vorkomprimiert werden?

Ja, doch das ist standardmäßig deaktiviert. Du kannst es aktivieren durch die Übergabe von ´true´ an ´autoptimize_filter_cache_create_static_gzip´. Du musst offenbar auch deinen Webserver für die Benutzung dieser Dateien anstelle der nicht komprimierten konfigurieren, um die Zusatzlast durch on-the-fly-Komprimierung zu verhindern.

Was bewirkt „Emojis entfernen“?

This new option in Autoptimize 2.3 removes the inline CSS, inline JS and linked JS-file added by WordPress core. As such is can have a small positive impact on your site’s performance.

Ist „Abfrage-Zeichenfolgen entfernen“ nützlich?

Although some online performance assessement tools will single out „query strings for static files“ as an issue for performance, in general the impact of these is almost non-existant. As such Autoptimize, since version 2.3, allows you to have the query string (or more precisely the „ver“-parameter) removed, but ticking „remove query strings from static resources“ will have little or no impact of on your site’s performance as measured in (milli-)seconds.

(Wie) sollte ich Google Fonts optimieren?

Google Fonts are typically loaded by a „render blocking“ linked CSS-file. If you have a theme and plugins that use Google Fonts, you might end up with multiple such CSS-files. Autoptimize (since version 2.3) now let’s you lessen the impact of Google Fonts by either removing them alltogether or by optimizing the way they are loaded. There are two optimization-flavors; the first one is „combine and link“, which replaces all requests for Google Fonts into one request, which will still be render-blocking but will allow the fonts to be loaded immediately (meaning you won’t see fonts change while the page is loading). The alternative is „combine and load async“ which uses JavaScript to load the fonts in a non-render blocking manner but which might cause a „flash of unstyled text“. Starting form Autopitimize 2.4 „aggregate & preload“ allows to aggregate all Google Font-files in one CSS-file that is preloaded, which should not be considered render blocking, but the fonts are available sooner (so less of a flash of unstyled text).

Sollte ich „preconnect“ benutzen?

Preconnect is a somewhat advanced feature to instruct browsers (if they support it) to make a connection to specific domains even if the connection is not immediately needed. This can be used e.g. to lessen the impact of 3rd party resources on HTTPS (as DNS-request, TCP-connection and SSL/TLS negotiation are executed early). Use with care, as preconnecting to too many domains can be counter-productive.

When can(‚t) I async JS?

JavaScript files that are not autoptimized (because they were excluded or because they are hosted elsewhere) are typically render-blocking. By adding them in the comma-separated „async JS“ field, Autoptimize will add the async flag causing the browser to load those files asynchronously (i.e. non-render blocking). This can however break your site (page), e.g. if you async „js/jquery/jquery.js“ you will very likely get „jQuery is not defined“-errors. Use with care.

How does image optimization work?

When image optimization is on, Autoptimize will look for png, gif, jpeg (.jpg) files in image tags and in your CSS files that are loaded from your own domain and change the src (source) to the ShortPixel CDN for those.

Where can I get more info on image optimization?

Have a look at Shortpixel’s FAQ.

Can I disable the minification of excluded JS/ CSS?

As from AO 2.4 excluded JS/ CSS are minified if the (filename indicates the) file is not minified yet. You can disable this with these filters;

add_filter('autoptimize_filter_js_minify_excluded','__return_false');
add_filter('autoptimize_filter_css_minify_excluded','__return_false');
Can I disable AO listening to page cache purges?

As from AO 2.4 AO „listens“ to page cache purges to clear its own cache. You can disable this behavior with this filter;

add_filter('autoptimize_filter_main_hookpagecachepurge','__return_false');
Why can’t I upgrade from 2.3.4 to 2.4.0 (or higher)?

Main reason (apart from occasional hickups that seem to be inherent to plugin upgrades) is that AO 2.4 requires you to be running PHP 5.3 or higher. And let’s face it; you should actually be running PHP 7.x if you value performance (and security and support), no?

Some of the non-ASCII characters get lost after optimization

By default AO uses non multibyte-safe string methods, but if your PHP has the mbstring extension you can enable multibyte-safe string functions with this filter;

add_filter('autoptimize_filter_main_use_mbstring', '__return_true');
The Shortpixel image optimizing notice cannot be dismissed?

In some rare cases the logic to dismiss the notice does not work due to the transient (WordPress cache) not keeping the dismissed state. If this happens you can use this code snippet to make the notice go away;

add_filter( 'autoptimize_filter_main_imgopt_plug_notice', '__return_empty_string' );
Wo bekomme ich Hilfe?

You can get help on the wordpress.org support forum. If you are 100% sure this your problem cannot be solved using Autoptimize configuration and that you in fact discovered a bug in the code, you can create an issue on GitHub. If you’re looking for premium support, check out our Autoptimize Pro Support and Web Performance Optimization services.

Ich will raus, wie sollte ich Autoptimize entfernen?
  • Deaktiviere das Plugin (dies wird alle Einstellungen und den Cache löschen)
  • Entferne das Plugin
  • Lösche jeden Cache der sich evtl. auf Seiten mit Autoptimiertem CSS/JS bezieht (z.B. die eines Caching Plugins wie WP Super Cache)
Wie kann ich helfen/mich beteiligen?

Erstelle einfach einen „Fork“ für Autoptimize auf Github und programmiere los!

Rezensionen

Great product, fantastic support

Used Autoptimize for almost a year with great PageSpeed results. Suddenly my site lost Google rankings and I tracked the problem down to loss in PageSpeed Insight score – as low as 25!
Tried adding the CriticalCSS Powerup but found out that AO wasn’t aggregating the CSS files.
After contacting AO support and discussing the issue with Frank and also my webhost helpdesk, I found out that my webhost recently implemented a built-in SiteSpeed feature that already does the same things as AO and blocks AO from doing the same thing again. It is a feature that cannot be removed without breaking my site so I’m stuck with it. Although it does give decent results on PageSpeed now with AO removed.
Frank was exceptionally helpful throughout the trouble-shooting process and I’m disappointed that I have to delete Autoptimize just because my webhost doesn’t give me a choice.
I would like to have tested the results of one vs the other to see which gives better results. If I change my webhost in the future, I will reinstall AO.

Great Support and Plugin!

The plugin is very effective for aggregation and minification! The support is amazing, responds very fast and helps to solve issues!

Lies alle 713 Rezensionen

Mitwirkende & Entwickler

„Autoptimize“ ist Open-Source-Software. Folgende Menschen haben an diesem Plugin mitgewirkt:

Mitwirkende

„Autoptimize“ wurde in 23 Sprachen übersetzt. Danke an die Übersetzerinnen und Übersetzer für ihre Mitwirkung.

Übersetze „Autoptimize“ in deine Sprache.

Interessiert an der Entwicklung?

Durchstöbere den Code, sieh dir das SVN Repository an oder abonniere das Entwicklungsprotokoll per RSS.

Änderungsprotokoll

2.4.4

  • bugfix: safer way of removing extra cronjobs

2.4.3

  • improved Google Fonts optimzation, praise to @nextendweb (of Smartslider3 fame)!
  • improved deferring of non-aggregated CSS when „inline & defer“ is active
  • bugfix: extra ao_cachechecker scheduled jobs & improve scheduling logic
  • bugfix: some extra checks on vars to avoid PHP notices

2.4.2

  • misc. improvements to image optimization logic
  • update PAnD framework to latest version to fix issues with notices not staying dismissed
  • patched JS minifying component to not break template literals as reported by Alex Kozack
  • bugfix for Google fonts subset concatenation by Rocco Aliberti, thanks!
  • bugfix not to remove querystrings if that option is not on in „Extra“, kudo’s to Diego Versiani for pointing out the inconsistency
  • tested and confirmed working with WordPress 5.0 (beta 5)

2.4.1

  • bugfix for CSS minifier throwing a HTTP 500 error when a } is missing.
  • bugfix for slowness when iconv was used for multibyte string replacements (ditched iconv).
  • bugfix for occasional issues with broken/ missing strings due to mbstring (also for multibyte string replacement) weirdness.
  • bugfix for wrong sizes in image optimization.
  • bugfix for Google Font subset getting lost in optimization.

2.4.0

  • refactored significantly (no more „classlesses“, all is OO), classes are autoloaded, tests added (travis-ci) by zytzagoo who deserves praise for his hard work!
  • new: image optimization (see „Extra“-tab) using Shortpixel’s smart image optimization proxy
  • new: you can now disable JS/ CSS-files being aggregated, having them minified individually instead
  • new: Google Fonts can now be „aggregated & preloaded“, this uses CSS which is loaded non render-blocking
  • new: Autoptimize „listens“ to page caches being cleared, upon which it purges it’s own cache as well. Support depends on known action hooks firing by the page cache, supported by Hyper Cache, WP Rocket, W3 Total Cache, KeyCDN Cache Enabler, Swift, WP Super Cache, WP Fastest Cache and Comet Cache.
  • new: local JS/ CSS-files that are excluded from optimization are minified by default (can be overridden by filter)
  • improvement: updated minifiers (with very significant improvements for YUI CSS compressor PHP port)
  • improvement: „remove all Google Fonts“ is now more careful (avoiding removing entire CSS blocks)
  • misc. under the hood improvements (e.g. more robust cache clearing, better support for multibyte character sets, improved CDN rewrite logic, avoid PHP warnings when writing files to cache, …)

2.3.4

  • bugfix: is_plugin_active causing errors in some cases as reported by @iluminancia and @lozula
  • bugfix: added language domain to 4 __/_e functions, un grand merci à Guillaume Blet!

2.3.3

  • improvement: updated to latest version of Filamentgroup’s loadCSS
  • improvement: by default exclude wp-content/cache and wp-content/uploads from CSS optimization (Divi, Avada & possibly others store page-specific CSS there)
  • bugfix: stop double try/catch-blocks
  • misc. bugfixes (see GitHub commit log)
  • heads-up: this is (supposed to be) the last minor release of the 2.3 branch, 2.4 is a major change with some big under-the-hood and functional changes

2.3.2

  • workaround for stale options-data in external object cache such as Redis, Memcached (core bug) resulting in Autoptimize continuously executing the upgrade-procedure including clearing the cache and trying to preload it with HTTP-requests with „cachebuster“ in the query string, thanks to Haroon Q. Raja and Tomas Trkulja for their great assistance!
  • fixes for „undefined index“ notices on Extra settings page
  • now removing respective dns-prefetch resource hints when „remove emojis“ or when Google Fonts are optimized or removed.
  • changed JS code to load webfont.js deferred instead of asynced to make sure the js-file or fonts are not consider render blocking.

2.3.1

  • fix for issue with update-code in some circumstances, thanks to Rajendra Zore to report & help fix!

2.3.0

  • new: optimize Google fonts with „combine & link“ and „combine and load async“ (with webload.js), intelligently preconnecting to Google’s domains to limit performance impact even further
  • new: Async JS, can be applied to local or 3rd party JS (if local it will be auto-excluded from autoptimization)
  • new: support to tell browsers to preconnect (= dns lookup + tcp/ip connection + ssl negotiation) to 3rd party domains (depends on browser support, works in Chrome & Firefox)
  • new: remove WordPress‘ core’s emoji CSS & JS
  • new: remove (version parameter from) Querystring
  • new: support to clear cache through WP CLI thanks to junaidbhura
  • lots of bugfixes and small improvements done by some seriously smart people via GitHub (thanks all!!), including a fix for AO 2.2 which saw the HTML minifier go PacMan on spaces in some circumstances.

2.2.2

  • roll-back to previous battle-tested version of the CSS minifier
  • tweaks to Autoptimize toolbar menu (visual + timeout of „delete cache“ AJAX call)
  • readme update

2.2.1

  • fix for images being referenced in CSS not all being translated to correct path, leading to 404’s as reported by Jeff Inho
  • fix for „[] operator not supported for strings“ error in PHP7.1 as reported by falk-wussow.de
  • fix for security hash busting AO’s cache in some cases (esp. in 2.1.1)

2.2.0

  • new: Autoptimize minifies first (caching the individual snippets) and aggregrates the minified snippets, resulting in huge performance improvements for uncached JS/ CSS.
  • Neu: Option zum An-/Abschalten von AO für angemeldete Benutzer (standardmäßig eingeschaltet).
  • Neu: Option zum De-/Aktivieren von AO im Warenkorb- oder Check-Out-Bereich von WooCommerce, Easy Digital Downloads oder WP eCommerce (standardmäßig aktiv).
  • improvement: switched to rel=preload + Filamentgroup’s loadCSS for CSS deferring
  • improvement: switched to YUI CSS minifier PHP-port 2.8.4-p10 (so not to the 3.x branch yet)
  • improvements to the logic of which JS/ CSS can be optimized (getPath function) increasing reliability of the aggregation process
  • security: made placeholder replacement less naive to protect against XSS and LFI vulnerability as reported by Matthew Barry and fixed with great help from Matthew and Tomas Trkulja. Thanks guys!!
  • API: Eine Menge an neuen Filtern um AO (noch) flexibler zu machen.
  • Lots of bugfixes and smaller improvements (see GitHub commit log)
  • tested and confirmed working in WordPress 4.8

2.1.2

  • fix for security hash busting AO’s cache in some cases (esp. in 2.1.1)
  • identical to 2.1.0 except for the security fix backported from 2.2.0

2.1.1

  • identical to 2.1.0 except for the security fix backported from 2.2.0

2.1.0

  • new: Autoptimize now appears in admin-toolbar with an easy view on cache size and the possibility to purge the cache (pass false to autoptimize_filter_toolbar_show filter to disable), a big thanks to Pablo Custo for his hard work on this nice feature!
  • new: An extra „More Optimization“-tab is shown (can be hidden with ´autoptimize_filter_show_partner_tabs´-filter) with information about related optimization tools- and services.
  • new: If cache size becomes too big, a mail will be sent to the site admin (pass false to autoptimize_filter_cachecheck_sendmail filter to disable or pass alternative email to the autoptimize_filter_cachecheck_mailto filter to change email-address)
  • new: power-users can enable Autoptimize to pre-gzip the autoptimized files by passing true to autoptimize_filter_cache_create_static_gzip, kudo’s to (Draikin)[https://github.com/Draikin] for this!
  • improvement: admin GUI updated (again; thanks Pablo!) with some responsiveness added in the mix (not showing the right hand column on smaller screen-sizes)
  • improvement: settings-screen now accepts protocol-relative URL for CDN base URL
  • improvement: new (smarter) defaults for JS (don’t force in head + exclude jquery.js) and CSS optimization (include inline CSS)
  • Misc. bugfixes & small improvements (see commit-log on GitHub)
  • Minimal version updated from 2.7 (!) to 4.0
  • Tested and confirmed working on WordPress 4.6

2.0.2

  • Fehlerbehebung: Verbiete das Verschieben von nicht zusammengefügtem JS per Standard (kann durch die Übergabe von false an autoptimize_filter_js_unmovable reaktiviert werden)
  • Fehlerbehebung: Hook von autoptimize_action_cachepurged in init, um hässliche Fehlermeldungen für Benutzer von ZenCache (CometCache) zu vermeiden
  • Fehlerbehebung, um Autoptimize die Arbeit mit PHP 5.2 zu ermöglichen, (auch wenn du unbedingt upgraden solltest)

2.0.1

  • Improvement: Autoptimize now also tries to purge WP Engine cache when AO’s cache is cleared
  • Improvement: for AMP pages (which are pretty optimized anyway) Autoptimize will not optimize to avoid issues with e.g. „inline & defer“ and with AO adding attributes to link-tags that are not allowed in the subset of HTML that AMP is
  • Improvement: refactored the page cache purging mechanism (removing duplicate code, now nicely hooking into AO’s own autoptimize_action_cachepurged action)
  • Improvement: Re-enable functionality to move non-aggregated JS if „also aggregate inline JS“ is active (can be disabled with autoptimize_filter_js_unmovable filter)
  • Improvement: script tags with data-noptimize attribute will be excluded from optimization
  • Bugfix: Better support for renamed wp-content directories
  • Bugfix: Multiple fixes for late-injected CSS/ JS (changes in those files were not always picked up, fonts or background images were not being CDN’ed, …)
  • Misc. other fixes & improvements, go read the commit-log on GitHub if you’re that curious
  • Tested & confirmed working with WordPress 4.5 (beta 3)

2.0.0

  • On average 30% faster minification (more info in this blogpost)!
  • New: Option to (de-)activate aggregation of inline JS and CSS.
  • New: Option to remove Google Fonts.
  • New: Cache-size will be checked daily and a notice will be shown on wp-admin if cache size goes over 512 MB (can be changed by filter).
  • New: Small autoptimized CSS (less then 256 characters, can be changed by filter) will be inlined instead of linked.
  • New in API: filters to declare a JS and CSS whitelist, where only files in that whitelist are autoptimized and all others are left untouched.
  • New in API: filters to declare removable CSS and JS, upon which Autoptimize will simply delete that code (emoji CSS/JS for example, if you prefer not to dequeue them).
  • New in API: filter to move fonts to CDN as well.
  • lots of small and bigger bugfixes, I won’t bother you with a full list but have a look at the commmit log on GitHub.
  • tested and confirmed working with PHP7

older