Autoptimize

Opis

Autoptimize sprawia, że optymalizacja twojej witryny jest naprawdę prosta. Może agregować, minimalizować i buforować skrypty i style, domyślnie wstrzykuje CSS do nagłówka strony ale może także wbudowywać critical CSS i opóźniać zagregowany pełen CSS, opóźniać i przenosić skrypty do stopki oraz minimalizować HTML. Możesz optymalizować lazy-loading obrazków (ze wsparciem dla formatów WebP i AVIF), optymalizować Google Fonts, asynchronizować nieagregowany JavaScript, usunąć kod WordPress odpowiedzialny za emoji i wiele innych. Dzięki temu może poprawić wydajność twojej witryny nawet jeżeli korzystasz już z HTTP/2! Dostępne jest rozległe API które pozwala dopasować Autoptimize do każdej witryny.
Jeżeli wydajność jest dla ciebie ważna to powinieneś użyć jednej z wtyczek buforujących aby buforować strony. Dobrymi kandydatami aby uzupełnić Autoptimize z tej strony są np. Speed Booster pack, KeyCDN’s Cache Enabler,WP Super Cache lub jeżeli korzystasz z Cloudflare WP Cloudflare Super Page Cache.

Wsprawcie Premium
Ofertujemy świetne Wsparcie Autoptimize Pro i usługi optymalizacji wydajności web, sprawdźcie naszą ofertę na https://accelera.autoptimize.com/!

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

Instalacja

Just install from your WordPress „Plugins > Add New” screen and all will be well. Manual installation is very straightforward as well:

  1. Upload the zip file and unzip it in the /wp-content/plugins/ directory
  2. Włącz wtyczkę w menu 'Wtyczki” w WordPressie
  3. Go to Settings > Autoptimize and enable the options you want. Generally this means „Optimize HTML/ CSS/ JavaScript”.

Najczęściej zadawane pytania

What does the plugin do to help speed up my site?

It concatenates all scripts and styles, minifies and compresses them, adds expires headers, caches them, and moves styles to the page head, and scripts (optionally) to the footer. It also minifies the HTML code itself, making your page really lightweight.

But I’m on HTTP/2, so I don’t need Autoptimize?

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 😉

Will this work with my blog?

Although Autoptimize comes without any warranties, it will in general work flawlessly if you configure it correctly. See „Troubleshooting” below for info on how to configure in case of problems.

Why is jquery.min.js not optimized

Starting from AO 2.1 WordPress core’s jquery.min.js is not optimized for the simple reason a lot of popular plugins inject inline JS that is not aggregated either (due to possible cache size issues with unique code in inline JS) which relies on jquery being available, so excluding jquery.min.js ensures that most sites will work out of the box. If you want optimize jquery as well, you can remove it from the JS optimization exclusion-list (you might have to enable „also aggregate inline JS” as well or switch to „force JS in head”).

Dlaczego Autoptimizowany JS blokuje renderowanie?

If not „forced in head”, Autoptimized JS is not render blocking as it has the „defer” flag added. It is however possible another plugin removes the „defer”-flag. Speed Booster Pack was reported doing this, but the behavior has not been confirmed yet.

Dlaczego autoptimizowany CSS ciągle jest wywoływany jako blokujący renderowanie?

With the default Autoptimize configuration the CSS is linked in the head, which is a safe default but has Google PageSpeed Insights complaining. You can look into „inline all CSS” (easy) or „inline and defer CSS” (better) which are explained in this FAQ as well.

What is the use of „inline and defer CSS”?

CSS in general should go in the head of the document. Recently a.o. Google started promoting deferring non-essential CSS, while inlining those styles needed to build the page above the fold. This is especially important to render pages as quickly as possible on mobile devices. As from Autoptimize 1.9.0 this is easy; select „inline and defer CSS”, paste the block of „above the fold CSS” in the input field (text area) and you’re good to go!

But how can one find out what the „above the fold CSS” is?

There’s no easy solution for that as „above the fold” depends on where the fold is, which in turn depends on screensize. There are some tools available however, which try to identify just what is „above the fold”. This list of tools is a great starting point. The Sitelocity critical CSS generator and Jonas Ohlsson’s criticalpathcssgenerator are nice basic solutions and http://criticalcss.com/ is a premium solution by the same Jonas Ohlsson. Alternatively this bookmarklet (Chrome-only) can be helpful as well.

Or should you inline all CSS?

Krótka odpowiedź: prawdopodobnie nie. Aczkolwiek wstawianie całego CSS spowoduje że CSS nie będzie blokował renderowania. Spowoduje też że twój bazowa strona HTML będzie znacząco większa przez co wymagać będzie więcej „czasu”. Co więcej biorąc pod uwagę że wiele stron jest pobieranych w trakcie jednej sesji wstawiony CSS przesyłany jest za każdym razem, natomiast niewstawiony będzie pobrany z pamięci podręcznej. Wreszcie wstawiony CSS przesunie meta-tagi w HTML niżej w miejsce gdzie Facebook lub Whatsapp może już ich nie szukać psując np. ikony w trakcie udostępniania przez te platformy.

My cache is getting huge, doesn’t Autoptimize purge the cache?

Autoptimize does not have its proper cache purging mechanism, as this could remove optimized CSS/JS which is still referred to in other caches, which would break your site. Moreover a fast growing cache is an indication of other problems you should avoid.

Instead you can keep the cache size at an acceptable level by either:

  • disactivating the „aggregate inline JS” and/ or „aggregate inline CSS” options
  • excluding JS-variables (or sometimes CSS-selectors) that change on a per page (or per pageload) basis. You can read how you can do that in this blogpost.

Despite above objections, there are 3rd party solutions to automatically purge the AO cache, e.g. using this code or this plugin, but for reasons above these are to be used only if you really know what you’re doing.

„Opróżnij pamięć podręczną” wydaje się nie działać?

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.

Moja witryna wygląda na uszkodzoną kiedy opróżnię pamięć podręczną Autoptimize!

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.

Czy mogę ciągle używać Cloudflare Rocket Loader?

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.

Wypróbowałem Autoptimize ale mój wynik Google Pagespeed ledwo się poprawił

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.

What can I do with the API?

A whole lot; there are filters you can use to conditionally disable Autoptimize per request, to change the CSS- and JS-excludes, to change the limit for CSS background-images to be inlined in the CSS, to define what JS-files are moved behind the aggregated one, to change the defer-attribute on the aggregated JS script-tag, … There are examples for some filters in autoptimize_helper.php_example and in this FAQ.

How does CDN work?

Starting from version 1.7.0, CDN is activated upon entering the CDN blog root directory (e.g. http://cdn.example.net/wordpress/). If that URL is present, it will used for all Autoptimize-generated files (i.e. aggregated CSS and JS), including background-images in the CSS (when not using data-uri’s).

If you want your uploaded images to be on the CDN as well, you can change the upload_url_path in your WordPress configuration (/wp-admin/options.php) to the target CDN upload directory (e.g. http://cdn.example.net/wordpress/wp-content/uploads/). Do take into consideration this only works for images uploaded from that point onwards, not for images that already were uploaded. Thanks to BeautyPirate for the tip!

Why aren’t my fonts put on the CDN as well?

Autoptimize supports this, but it is not enabled by default because non-local fonts might require some extra configuration. But if you have your cross-origin request policy in order, you can tell Autoptimize to put your fonts on the CDN by hooking into the API, setting autoptimize_filter_css_fonts_cdn to true this way;

add_filter( 'autoptimize_filter_css_fonts_cdn', '__return_true' );

I’m using Cloudflare, what should I enter as CDN root directory

Nothing, when on Cloudflare your autoptimized CSS/ JS is on the Cloudflare’s CDN automatically.

How can I force the aggregated files to be static CSS or JS instead of PHP?

If your webserver is properly configured to handle compression (gzip or deflate) and cache expiry (expires and cache-control with sufficient cacheability), you don’t need Autoptimize to handle that for you. In that case you can check the „Save aggregated script/css as static files?”-option, which will force Autoptimize to save the aggregated files as .css and .js-files (meaning no PHP is needed to serve these files). This setting is default as of Autoptimize 1.8.

How does „exclude from optimizing” work?

Both CSS and JS optimization can skip code from being aggregated and minimized by adding „identifiers” to the comma-separated exclusion list. The exact identifier string to use can be determined this way:

  • if you want to exclude a specific file, e.g. wp-content/plugins/funkyplugin/css/style.css, you could simply exclude „funkyplugin/css/style.css”
  • if you want to exclude all files of a specific plugin, e.g. wp-content/plugins/funkyplugin/js/*, you can exclude for example „funkyplugin/js/” or „plugins/funkyplugin”
  • if you want to exclude inline code, you’ll have to find a specific, unique string in that block of code and add that to the exclusion list. Example: to exclude <script>funky_data='Won\'t you take me to, Funky Town'</script>, the identifier is „funky_data”.

Configuring & Troubleshooting Autoptimize

After having installed and activated the plugin, you’ll have access to an admin page where you can to enable HTML, CSS and JavaScript optimization. According to your liking, you can start of just enabling all of them, or if you’re more cautious one at a time.

If your blog doesn’t function normally after having turned on Autoptimize, here are some pointers to identify & solve such issues using „advanced settings”:

  • 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.
  • In case some functionality on your site stops working (a carroussel, a menu, the search input, …) you’re likely hitting JavaScript optimization trouble. Change the „Aggregate inline JS” and/ or „Force JavaScript in head?” settings and try again. Excluding 'js/jquery/jquery.min.js’ from optimization (see below) and optionally activating „Add try/catch wrapping„) can also help. Alternatively -for the technically savvy- you can exclude specific scripts from being treated (moved and/ or aggregated) by Autoptimize by adding a string that will match the offending Javascript or excluding it from within your template files or widgets by wrapping the code between noptimize-tags. Identifying the offending JavaScript and choosing the correct exclusion-string can be trial and error, but in the majority of cases JavaScript optimization issues can be solved this way. When debugging JavaScript issues, your browsers error console is the most important tool to help you understand what is going on.
  • If your theme or plugin require jQuery, you can try either forcing all in head and/ or excluding jquery.min.js (and jQuery-plugins if needed).
  • If you can’t get either CSS or JS optimization working, you can off course always continue using the other two optimization-techniques.
  • If you tried the troubleshooting tips above and you still can’t get CSS and JS working at all, you can ask for support on the WordPress Autoptimize support forum. See below for a description of what information you should provide in your „trouble ticket”

Wykluczyłem pliki ale one są dalej autoptymizowane?

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”.

Help, I have a blank page or an internal server error after enabling 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.

But I still have blank autoptimized CSS or JS-files!

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.

Nie mogę zalogować się na witrynach mapowanych domenowo

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

I get no error, but my pages are not optimized at all?

Autoptimize does a number of checks before actually optimizing. When one of the following is true, your pages won’t be optimized:

  • when in the customizer
  • if there is no opening <html tag
  • 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 and similar page builder solutions are broken!!

Disable the option to have Autoptimize active for logged on users and go crazy dragging and dropping 😉

Help, my shop checkout/ payment don’t work!!

Disable the option to optimize cart/ checkout pages (works for WooCommerce, Easy Digital Downloads and WP eCommerce).

Revolution Slider is broken!

Make sure js/jquery/jquery.min.js is in the comma-separated list of JS optimization exclusions (this is excluded in the default configuration).

I’m getting „jQuery is not defined” errors

In that case you have un-aggregated JavaScript that requires jQuery to be loaded, so you’ll have to add js/jquery/jquery.min.js to the comma-separated list of JS optimization exclusions.

I use NextGen Galleries and a lot of JS is not aggregated/ minified?

NextGen Galleries does some nifty stuff to add JavaScript. In order for Autoptimize to be able to aggregate that, you can either disable Nextgen Gallery’s resourced manage with this code snippet add_filter( 'run_ngg_resource_manager', '__return_false' ); or you can tell Autoptimize to initialize earlier, by adding this to your wp-config.php: define("AUTOPTIMIZE_INIT_EARLIER","true");

What is 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-->

You can do this in your page/ post content, in widgets and in your theme files (consider creating a child theme to avoid your work being overwritten by theme updates).

Can I change the directory & filename of cached autoptimize files?

Yes, if you want to serve files from e.g. /wp-content/resources/aggregated_12345.css instead of the default /wp-content/cache/autoptimize/autoptimize_12345.css, then add this to wp-config.php:

define('AUTOPTIMIZE_CACHE_CHILD_DIR','/resources/');
define('AUTOPTIMIZE_CACHEFILE_PREFIX','aggregated_');

Czy to będzie działało z nie-domyślnym WP_CONTENT_URL ?

Nie, Autoptimize standardowo nie obsługuje niestandardowego WP_CONTENT_URL, ale można to osiągnąć za pomocą kilku linii kodu podpiętego do Autoptimize API.

Can the generated JS/ CSS be pre-gzipped?

Yes, but this is off by default. You can enable this by passing ´true´ to ´autoptimize_filter_cache_create_static_gzip´. You’ll obviously still have to configure your webserver to use these files instead of the non-gzipped ones to avoid the overhead of on-the-fly compression.

Co robi „usuń emoji”?

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.

Czy „usuwanie ciągu zapytania” jest przydatne?

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.

(Jak) powinienem optymalizować Google Fonts?

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”.

Czy powinienem używać „preconnect”?

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.

Kiedy (nie)mogę używać asynchronicznego 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.min.js” you will very likely get „jQuery is not defined”-errors. Use with care.

Jak działa optymalizacja obrazków?

Kiedy optymalizacja obrazków jest włączona, Autoptimize będzie szukał plików png, gif, jpeg (.jpg) w tagach obrazków oraz w twoich plikach CSS, które są wczytywane z twojej własnej domeny i zmieniał dla nich src (źródło) na sieć CDN ShortPixel. Ważne: to zadziała tylko dla publicznie dostępnych obrazków, w przeciwnym wypadku proxy optymalizujące obrazki nie będzie w stanie ich pobrać celem optymalizacji. Z tego powodu firewalle, proxy, ochrona hasłem lub nawet ochrona przez hotlinkowaniem może przerwać działanie usługi optymalizacji.

Czy mogę użyć optymalizacji obrazków dla mojej intranetowej/zabezpieczonej strony?

Nie; Optymalizacja obrazków polega na możliwości żeby zewnętrzna usługa optymalizująca obrazki pobrała oryginalne obrazki z twojej strony, zoptymalizowała je i zachowała w sieci CDN. Jeżeli twoje obrazki nie mogą być pobrane przez anonimowych gości (z powodu firewall / proxy / ochrony hasłem / ochrony przed hotlinkowaniem), optymalizacja obrazków nie zadziała.

Gdzie mogę uzyskać więcej informacji na temat optymalizacji obrazków?

Have a look at Shortpixel’s FAQ.

Czy mogę wyłączyć nasłuchiwanie oczyszczania pamięci podręcznej witryny przez AO?

Od wersji AO 2.4 AO „nasłuchuje” sygnału czyszczenia pamięci podręcznej strony, aby wyczyścić własną pamięć podręczną. Możesz wyłączyć to zachowanie za pomocą tego filtra;

add_filter('autoptimize_filter_main_hookpagecachepurge','__return_false');

Niektóre znaki nie-ASCII zostaną znikną po optymalizacji.

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

Nie mogę uruchomić Critical CSS

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

Do I still need the Critical CSS power-up when I have Autoptimize 2.7?

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.

What does „enable 404 fallbacks” do? Why would I need this?

Autoptimize buforuje zagregowane i zoptymalizowany CSS/JS, a linki do tych zbuforowanych plików przechowywane są w kodzie HTML, który będzie przechowywany w pamięci podręcznej strony (która może być wtyczką, może znajdować się na poziomie hosta, może znajdować się na stronie trzeciej, w pamięci podręcznej Google, lub w przeglądarce). Jeśli w pamięci podręcznej strony znajduje się kod HTML, który zawiera linki do Autoptimizowanego CSS/ JS, który został w międzyczasie usunięty (kiedy pamięć podręczna została wyczyszczona), strona z pamięci podręcznej nie będzie wyglądać/ działać zgodnie z oczekiwaniami, ponieważ nie znaleziono CSS lub JS (błąd 404).

To ustawienie ma na celu zapobieganie awariom poprzez udostępnianie „zastępczego” CSS lub JS. Pliki zastępcze są kopiami pierwszego zoptymalizowanego kodu CSS i plików JS utworzonych po opróżnieniu pamięci podręcznej i jako takie będą oparte na stronie głównej. Oznacza to, że CSS/JS może nie pasować w 100% do innych stron, ale przynajmniej wpływ braku CSS/JS będzie zmniejszony (często znacząco).

Kiedy ta opcja jest włączona, Autoptimize dodaje ErrorDocument 404 do .htaccess (używana przez Apache) oraz podłącza się do Wordpresowego template_redirect aby przechwycić 404’ki obsługiwane przez WordPress. Kiedy używasz NGINX coś jak poniżej powinno zadziałać (nie jestem specjalistą od NGINX, ale u mnie to działa);

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

I to fajne alternatywne podejście (dostarczone przez fboylovesyou);

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

Jakie oprogramowanie/projekty open source zostały wykorzystane w Autoptimize?

Następujące świetne projekty open source są używane w Autoptimize takiej czy innej formie:

Where can I get help?

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.

I want out, how should I remove Autoptimize?

  • Disable the plugin (this will remove options and cache)
  • Remove the plugin
  • Clear any cache that might still have pages which reference Autoptimized CSS/JS (e.g. of a page caching plugin such as WP Super Cache)

How can I help/ contribute?

Just fork Autoptimize on Github and code away!

Recenzje

2022-05-12
Autoptimize is a great (free!) and well maintained and developed tool to make a website loading faster. It offers not too many but well enough options and it works well with Cache Enabler for super fast performance on NGINX/Apache servers. Also its dev is super fast if there is a problem and the plugin is often updated and made better. If past is an outlook into the future, autoptimize will be a great tool for the near to medium future. Absolutely recommendation to use on your Wordpress sites.
2022-04-17
I'm a freelance web designer and developer and a fan of this plugin. It takes my google pagespeed score 90+ in most cases, even for elementor sites. Works like a shame.

Kontrybutorzy i deweloperzy

„Autoptimize” jest oprogramowaniem open source. Poniższe osoby miały wkład w rozwój wtyczki.

Zaangażowani

Podziękuj tłumaczom za ich wkład.

Przetłumacz wtyczkę “Autoptimize” na swój język.

Interesuje cię rozwój wtyczki?

Przeglądaj kod, sprawdź repozytorium SVN lub czytaj dziennik rozwoju przez RSS.

Rejestr zmian

3.0.4

  • fix for „undefined array key ao_post_preload” on post/ page edit screens
  • fix for image optimization altering inline JS that contains an <img tag if lazyload is not active
  • improvements to exit survey
  • confirmed working with WordPress 6.0

3.0.3

  • fix for images being preloaded without this being configured when lazyload is on and per page/post settings are off.
  • ensure critical CSS schedule is always known.
  • when deferring non-aggregated JS, make the optimatization exclusions take the full script-tag into account instead of just the src URL.

3.0.2

  • rollback automatic „minify inline CSS/ JS” which broke more then expected, this will come back as a separate default off option later and can now be enabled with a simple filter: add_filter( 'autoptimize_html_minify_inline_js_css', '__return_true'); .
  • fix for „Call to undefined method autoptimizeOptionWrapper::delete_option()” in autoptimizeVersionUpdatesHandler.php

3.0.1

  • fix for minification of inline script with type text/template breaking the template (e.g. ninja forms), hat tip to @bobsled.
  • fix for regression in import of CSS-files where e.g. fontawesome CSS was broken due to being escaped again with help of @bobsled, thanks man!

3.0.0

  • fundamental change for new installations: by default Autoptimize will not aggregate JS/ CSS any more (HTTP/2 is ubiquitous and there are other advantages to not aggregating esp. re. inline JS/ CSS and dependancies)
  • new: no API needed any more to create manual critical CSS rules.
  • new: „Remove WordPress blocks CSS” option on the „Extra” tab to remove block- and global styles (and SVG).
  • new: compatibility logic for „edit with elementor”, „revolution slider”, for non-aggregated inline JS requiring jQuery even if not excluded (= auto-exclude of jQuery) and JS-heavy WordPress blocks (Gutenberg)
  • new: configure an image to be preloaded on a per page/ post basis for better LCP.
  • improvement: defer inline now also allowed if inline JS contains nonce or post_id.
  • improvement: settings export/ import on critical CSS tab now takes into account all Autoptimize settings, not just the critical CSS ones.
  • technical improvement: all criticalCSS classes were refactored, removing use of global variables.
  • technical improvement: automated unit tests on Travis-CI for PHP versions 7.2 to 8.1.
  • fix: stop Divi from clearing Autoptimize’s cache which is pretty counter-productive.
  • misc smaller fixes/ improvements, see the GitHub commit log

2.9.5.1

  • fix for CSS cache growing too fast when inline CSS with variable selectors from WordPress 5.9 comment blocks is aggregated.

2.9.5

  • Better fix for PHP notice in autoptimizeImages.php.
  • Further improvements to the exit survey.

2.9.4

  • Fix for 2 AMP compatibility issues (toolbar JS & lazyload JS).
  • Fix for PHP notice in autoptimizeImages.php.
  • Change default for „lazyload from nth image” from 0 to 2 (only applies to new installations).
  • Improvements to the exit survey.
  • Enjoy the end-of-year celebrations, there are great Autoptimize things to come in 2022! 😉

2.9.3

  • Improvement: add logic to autoptimize_404_handler.php to differentiate between different multisite sites.
  • Improvement: remove the different feeds (and all JS to switch between them) on the settings-page, keeping only the „Autoptimize news”.
  • Improvement: reduced autoptimize_enable_site_config option lookups when on multisite and AO is active for network.
  • Fixed wrong variable name that caused PHP notices (but did not affect normal usage) to $w3tc_minify_on.
  • Fix for Autoptimize Toolbar being loaded on AMP pages for logged in administrators/ editors
  • Fix for CDN replacement edge case (if the CDN has the site_url in it).
  • Fix for service availability checks causing too many outgoing requests (root cause likely to be object caching resulting in the autoptimize_service_availability option not being updated)
  • Added „exit survey” when Autoptimize is deactivated (with the kind help of Shakeeb of RapidLoad, thanks brother!)

2.9.2

  • New: page/ post settings now have a „Generate Critical CSS”-button (critical CSS needs to be active with valid API key)
  • Improvement: also check WP Rocket settings for possible conflicts
  • Improvement: Image optimization CDN updated to new Autoptimize-specific subdomain
  • Fix: „don’t aggregate but defer” did not defer 3rd party hosted JS (can be disabled with a filter)
  • Fix: the metabox per page/post logic failed when all optimizations were off (hat tip to Valenki for reporting) resulting in PHP notices

2.9.1

  • New: logic to detect possibly conflicting plugins, with notification if found.
  • Improvement: to be reviewed critical css rules UI change.
  • Improvement: automatically save critical CSS rules when changed.
  • Fix for no CCSS jobs being created when „aggregate CSS” is off and all files are minified.
  • Fix for some page caches not being detected correctly leading to notification being shown when it should not (thanks @optimocha for warning me!)
  • Fix for a (rare) lazyload-regression in 2.9.0.
  • Fix for a (rare) image optimization issue when the same image is referenced multiple times as background-image in optimized CSS.

2.9.0

  • New: per page/ post Autoptimize settings so one can disable specific optimizations (needs to be enabled on the main settings page under „Misc Options”).
  • New: „defer inline JS” as sub-option of „do not aggregate but defer” allowing to defer (almost) all JS.
  • Improvement: Image optimization now automatically switches between AVIF & WebP & Jpeg even if lazyload is not active (AVIF has to be explicitly enabled).
  • Improvement: re-ordering of „JavaScript optimization” settings & copy improvements.
  • Misc. other minor fixes, see the GitHub commit log

This release coincides with my father’s 76th birthday, who continues to be a big inspritation to me. He’s a mechanical engineer who after retirement focused his technical insights, experience and never-ending inquisitiveness on fountain pen design and prototyping, inventing a new bulkfiller mechanism in the process. Search the web for Fountainbel to find out more about him (or read this older blogpost I wrote in Dutch). Love you pops!

2.8.4

  • fix for an authenticated XSS vulnerability

2.8.3

  • fix for missing ao-minify-html.php

2.8.2

  • Images: only show „did you know shortpixel” notice on Autoptimize settings pages (no more littering all over the backend)
  • Images: update lazysizes from upstream
  • Images: misc. improvements such as fix for PHP „undefined index” notice, updated copy, …
  • HTML: rename HTML minify class from minify_HTML to AO_minify_HTML to avoid conflicts with e.g. W3TC
  • Critical CSS: misc. improvements such as detect is_front_page before any other conditional, fix for conditional rules without an actual condition, improved debug logging, …
  • JS/ CSS: fix for AO not optimizing multisite child sites when CDN set

2.8.1

  • Images: new option not to lazyload first X images
  • fix for „array to string” conversion errors in image optimization logic of .ico files
  • switch jQuery shorthand .click (in toolbar JS & PaND dismiss notice JS) to please jQuery Migrate helper (and because it’s better that way)

2.8.0

  • JavaScript: new option „defer but don’t aggregate”
  • JavaScript: ensure Autoptimize also acts on jQuery in WordPress 5.6 which is renamed to jquery.min.js from jquery.js before.
  • Images: add field to exclude images from being optimized.
  • Images: new filter (autoptimize_filter_imgopt_lazyload_from_nth) to tell AO not to lazyload the first X images (to improve LCP/ CLS).
  • Critical CSS: major improvements of the job processing mechanism, reducing time spent from up to 1 minute to just a couple of seconds.
  • Critical CSS: under „advanced options” replace „request limit” with „queue processing time limit” (default 30s).
  • Extra | Google Fonts: better parsing of version 2 Google Font URL’s (/css2/).
  • Misc. other minor fixes, see the GitHub commit log.

2.7.8

  • Image optimization: add support for AVIF image format for browsers that support it (enabled with the existing WebP-option, also requires lazy-load to be active)
  • Critical CSS: further security improvements of critical CSS import settings upload, based on the input of Marcin Weglowski of afine.com
  • Misc. other minor fixes, see the GitHub commit log.

2.7.7

  • critical CSS: make sure pages get a path-based rule even if a CPT or template matches (when „path based rules for pages” option is on)
  • critical CSS: make sure the „unload CCSS javascript” is only added once
  • settings screens: switch jQuery .attr() to .prop() as suggested by jQuery Migrate to prepare for the great oncoming big jQuery updates
  • HTML minify: reverse placeholder array to make sure last replaced placeholder is changed back first to fix rare issues
  • security fix: kudos to Erin Germ for finding & reporting an authenticated XSS vulnerability
  • security fix: props to an anonymous pentester for finding & reporting an authenticated malicous file upload vulnerability

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!
  • tested and confirmed working on 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.

older