Autoptimize

Beschreibung

Autoptimize makes optimizing your site really easy. It can aggregate, minify and cache scripts and styles, injects CSS in the page head by default but can also inline critical CSS and defer the aggregated full CSS, moves and defers scripts to the footer and minifies HTML. You can optimize and lazy-load images, optimize Google Fonts, async non-aggregated JavaScript, remove WordPress core emoji cruft and more. As such it can improve your site’s performance even when already on HTTP/2! There is extensive API available to enable you to tailor Autoptimize to each and every site’s specific needs.
If you consider performance important, you really should use one of the many caching plugins to do page caching. Some good candidates to complement Autoptimize that way are e.g. Speed Booster Pack, KeyCDN’s Cache Enabler or WP Super Cache.

Premium Support
Wir bieten großartigen Autoptimize-Pro-Support und Dienstleistungen für Web-Performance-Optimierung (engl.), sieh dir unsere Angebote auf https://autoptimize.com/ (engl.) an!

(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 is a great step forward for sure, reducing the impact of multiple requests from the same server significantly by using the same connection to perform several concurrent requests. That being said, concatenation of CSS/ JS can still make a lot of sense, as described in this css-tricks.com article and this blogpost from one of the Ebay engineers. The conclusion; configure, test, reconfigure, retest, tweak and look what works best in your context. Maybe it’s just HTTP/2, maybe it’s HTTP/2 + aggregation and minification, maybe it’s HTTP/2 + minification (which AO can do as well, simply untick the „aggregate JS-files“ and/ or „aggregate CSS-files“ options). And Autoptimize can do a lot more then „just“ optimizing your JS & CSS off course 😉

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?

The short answer: probably not. Although inlining all CSS will make the CSS non-render blocking, it will result in your base HTML-page getting significantly bigger thus requiring more „roundtrip times“. Moreover when considering multiple pages being requested in a browsing session the inline CSS is sent over each time, whereas when not inlined it would be served from cache. Finally the inlined CSS will push the meta-tags in the HTML down to a position where Facebook or Whatsapp might not look for it any more, breaking e.g. thumbnails when sharing on these platforms.

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.

My site looks broken when I purge Autoptimize’s cache!

When clearing AO’s cache, no page cache should contain pages (HTML) that refers to the removed optimized CSS/ JS. Although for that purpose there is integration between Autoptimize and some page caches, this integration does not cover 100% of setups so you might need to purge your page cache manually.

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 images 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 and your webserver configuration, which will improve real performance (again, load time as measured by e.g. https://webpagetest.org) and your „performance best practice“ 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“:

  • If all works but you notice your blog is slower, ensure you have a page caching plugin installed (WP Super Cache or similar) and check the info on cache size (the soution for that problem also impacts performance for uncached pages) in this FAQ as well.
  • In case your blog looks weird, i.e. when the layout gets messed up, there is problem with CSS optimization. Try excluding one or more CSS-files from being optimized. You can also force CSS not to be aggregated by wrapping it in noptimize-tags in your theme or widget or by adding filename (for external stylesheets) or string (for inline styles) to the exclude-list.
  • 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.

I excluded files but they are still being autoptimized?

AO minifies excluded JS/ CSS if the filename indicates the file is not minified yet. As of AO 2.5 you can disable this on the „JS, CSS & HTML“-tab under misc. options by unticking „minify excluded files“.

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!

If you are running Apache, the .htaccess file written by Autoptimize can in some cases conflict with the AllowOverrides settings of your Apache configuration (as is the case with the default configuration of some Ubuntu installations), which results in „internal server errors“ on the autoptimize CSS- and JS-files. This can be solved by setting AllowOverrides to All.

Can’t log in on domain mapped multisites

Domain mapped multisites require Autoptimize to be initialized at a different WordPress action, add this line of code to your wp-config.php to make it so to hook into setup_theme for example:

define( 'AUTOPTIMIZE_SETUP_INITHOOK', 'setup_theme' );

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 assessment 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“.

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. Important: this can only work for publicly available images, otherwise the image optimization proxy will not be able to get the image to optimize it, so firewalls or proxies or password protection or even hotlinking-prevention might break image optimization.

Can I use image optimization for my intranet/ protected site?

No; Image optimization depends on the ability of the external image optimization service to fetch the original image from your site, optimize it and save it on the CDN. If you images cannot be downloaded by anonymous visitors (due to firewall/ proxy/ password protection/ hotlinking-protection), image optimization will not work.

Where can I get more info on image optimization?

Have a look at Shortpixel’s FAQ.

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');

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');

Ich bekomme Critical-CSS nicht zum Laufen

Check the FAQ on the (legacy) „power-up“ here, this info will be integrated in this FAQ at a later date.

Brauche ich immer noch die Critical-CSS Power-Up, wenn ich Autoptimize 2.7 habe?

When both Autoptimize 2.7 and the separate Critical CSS power-up are installed and active, the power-up will handle the critical CSS part. When you disable the power-up, the integrated critical CSS code in Autoptimize 2.7 will take over.

Was macht „Aktiviere 404-Fallbacks“? Wozu brauche ich es?

Autoptimize caches aggregated & optimized CSS/ JS and links to those cached files are stored in the HTML, which will be stored in a page cache (which can be a plugin, can be at host level, can be at 3rd party, in the Google cache, in a browser). If there is HTML in a page cache that links to Autoptimized CSS/ JS that has been removed in the mean time (when the cache was cleared) then the page from cache will not look/ work as expected as the CSS or JS were not found (a 404 error).

This setting aims to prevent things from breaking by serving „fallback“ CSS or JS. The fallback-files are copies of the first Autoptimized CSS & JS files created after the cache was emptied and as such will based on the homepage. This means that the CSS/ JS migth not apply 100% on other pages, but at least the impact of missing CSS/ JS will be lessened (often significantly).

Wenn diese Option eingeschaltet ist, fügt Autoptimize ein ErrorDocument 404 zur .htaccess-Datei hinzu (wird von Apache-Servern genutzt) und schaltet sich außerdem in den WordPress-Hook template_redirect, um 404’s abzufangen, die von WordPress bearbeitet werden. Wenn du NGINX nutzt, sollte das unten Stehende helfen (ich bin kein NGINX-Spezialist, aber es funktioniert zumindest bei mir);

location ~* /wp-content/cache/autoptimize/.*\.(js|css)$ {
    try_files $uri $uri/ /wp-content/autoptimize_404_handler.php;
}

What open source software/ projects are used in Autoptimize?

The following great open source projects are used in Autoptimize in some form or another:

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

5. August 2020
I configured Autoptimize to automatically merge all the Javascript files into one, in addition to putting all CSS inline. Without Autoptimize active, my site can easily make 40 Javascript requests (from the theme and plugins). After setting up my website on Cloudflare, I obtained a huge performance gain. With Autoptimize, I was able to reduce the number of page requests to 5: one for the page itself, another for minified javascript, in addition to the images that load above the border. On mobile, requests are even less. Thanks to Autoptimize, my site's load time dropped from 2.5 seconds to 1.1 seconds, and an average score from 75 to 99 on mobile - 100 on desktop - on Google Pagespeed.
28. Juli 2020
This is my all-time favourite plugin, the developer answers fast whenever there is issues. I have used it for years 🙂
24. Juli 2020
Scanning plugin for PHP 7.X compatibility returned issues like: FILE: /home/medianasi/public_html/wp-content/plugins/autoptimize/classes/autoptimizeCriticalCSSCron.php FOUND 0 ERRORS AND 1 WARNING AFFECTING 1 LINE --------------------------------------------------------------------------------------------------------------- 17 | WARNING | Global with anything other than bare variables is discouraged since PHP 7.0. Found ${$_option}
Lies alle 1.114 Rezensionen

Mitwirkende & Entwickler

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

Mitwirkende

„Autoptimize“ wurde in 28 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.7.6

  • fix for top frontend admin-bar being invisible when „inline & defer“ is active.
  • fix for 3rd party CSS-files not being deferred when „inline & defer“ is active.
  • small copy changes on Extra settings screen.

2.7.5

  • urgent fix for Google Fonts aggregate & preload that broke badly in 2.7.4.

2.7.4

  • Image optimization: also optimize icon links
  • Image optimization: fix webp-detection for Safari (contributed by @pinkasey)
  • Image lazyload: remove CSS that hides the placeholder image/ sets transistion between placeholder and final image
  • Critical CSS: new advanced option to unload CCSS on onLoad
  • Critical CSS improvement: cache templates in a transient to avoid overhead of having to search filesystem time and time again (contributed by @pratham2003)
  • Critical CSS improvement: better but still experimental jQuery deferring logic
  • Critical CSS fix: prevent MANUAL template-based rules being overwritten
  • CSS Inline & defer: move away from old loadCSS-based approach to Filamentgroup’s new, simpler method
  • 404 fallback enabled by default for new installations
  • changed all occurences of blacklist/ whitelist to blocklist/ allowlist. The filters autoptimize_filter_js_whitelist and autoptimize_filter_css_whitelist still work in 2.7.4 but usage is deprecated and should be replaced with autoptimize_filter_js_allowlist and autoptimize_filter_css_allowlist.
  • updated readme to explicitly confirm this is GPL + praise open source projects used in Autoptimize as praise was long overdue!
  • getestet und als funktionierend bestätigt mit WordPress 5.5 beta 2

2.7.3

  • Critical CSS: cache settings in the PHP process instead of re-fetching them
  • Critical CSS: shorter intervals between calls to criticalcss.com (shortening the asynchronous job queue processing time)
  • inline & defer CSS: fix for some excluded files not being preloaded
  • 404 fallback: only create fallback files for CSS/ JS, not for (background-)images
  • copy changes as suggested by Cyrille (@css31), un grand merci!
  • misc. other minor fixes, see the GitHub commit log.

2.7.2

  • Critical CSS: fix settings page issues with certain translation strings
  • Critical CSS: fix „inline & defer“ not being „seen“ on multisite network settings
  • Critical CSS: add links on path-based rules
  • Critical CSS: fix for non-asci URL’s not matching rules
  • Improvement: auto-disable autoptimize on misc. page builder URL’s
  • Improvement: don’t change non-aggregated CSS if it already has an onload attribute
  • Image lazyload improvement: remove &quot; from around background images

2.7.1

2.7.0

  • Integration of critical CSS power-up.
  • New option to ensure missing autoptimized files are served with fallback JS/ CSS.
  • Batch of misc. smaller improvements & fixes, more info in the GitHub commit log.

2.6.2

  • auto-exclude images from lazyload when they have loading="eager" attribute.
  • bugfix: don’t take querystring into account when deciding as-value for preloaded resources.
  • bugfix; ensure lqip images (used when both image optimization and lazyload are active) always work by normalizing the URL before sending it to shortpixel.
  • minimum WordPress version bumped to 4.4.

2.6.1

  • bugfixes for multiple lazyload bugs causing images not to load or load incorrectly
  • bugfixes for multiple multisite bugs causing settings-screen to be unavailable
  • bugfix re-added 3rd parameter to autoptimize_filter_js_minify_excluded-filter to ensure backwards-compatibility and thus avoid breaking Smart Cookie Kit which expected that 3rd parameter.

2.6.0

  • New: Autoptimize can be configured at network level or at individual site-level when on multisite.
  • Extra: new option to specify what resources need to be preloaded.
  • Extra: add display=swap to Autoptimized (CSS-based) Google Fonts.
  • Images: support for lazyloading of background-images when set in the inline style attribute of a div.
  • Images: updated to lazysizes 5.2.
  • CSS/ JS: no longer add type attributes to Autoptimized resources.
  • Improvement: cache clearing now also integrates with Kinsta, WP-Optimize & Nginx helper.
  • Added „Critical CSS“ tab to highlight the criticalcss.com integration, which will be fully included in Autoptimize 2.7.
  • Batch of misc. smaller improvements & fixes, more info in the GitHub commit log.

2.5.1

  • Images: Also optimize & lazyload <picture><source>
  • Images: Misc. improvements to lazyload
  • Images: Updated to LazySizes 5.0.0
  • CSS: improvements to the deferring logic for non-aggregated CSS resources.
  • Settings-page: Show „JS, CSS & HTML“ advanced options by default (many people did not see the button)

2.5.0

  • moved image optimization to a separate tab and move all code to a separate file.
  • added lazyloading (using lazysizes)
  • added webp support (requires image optimization and lazyloading to be active)
  • added option to enable/ disable the minification of excluded JS/ CSS files (on by default)
  • misc. bugfixes and smaller improvements

older