Category Archives: autoptimize

Autoptimize cache size: the canary in the coal mine

another-canary-in-a-coal-mineCopy/ pasted straight from a support question on wordpress.org;

Auto-deleting the cache would only solve one problem you’re having (disk space), but there are 2 other problems -which I consider more important- that auto-cleaning can never solve:
1. you will be generating new autoptimized JS very regularly, which slows your site down for users who happen to be the unlucky ones requesting that page
2. a visitor going from page X to page Y will very likely have to request a different autoptimized JS file for page Y instead of using the one from page X from cache, again slowing your site down

So I actually consider the cache-size warning like a canary in the coal mines; if the canary dies, you know there’s a bigger problem.

You don’t (or shouldn’t) really want me to take away the canary! :)

Autoptimize 2.1 and first Power-Up released

Yesterday evening I released Autoptimize 2.1 and the first Power-Up to manage critical CSS has been made available as a optional service over at criticalcss.com. This short video explains some of the logic behind the Autoptimize Critical CSS Power-Up:

How to fix render-blocking CSS in WordPress

Watch this video on YouTube.

But let’s not forget about Autoptimize 2.1! The new features include:

  • Autoptimize now appears in the admin-toolbar with an easy view on cache size and the possibility to purge the cache (thanks to Pablo Custo)
  • A “More Optimization”-tab is shown with info about optimization tools- and services.
  • settings-screen now accepts protocol-relative URL for CDN base URL
  • admin GUI updated and responsiveness added
  • If cache size becomes too big, a mail will be sent to the site admin
  • power-users can enable Autoptimize to pre-gzip the autoptimized files with a filter
  • new (smarter) defaults for JS and CSS optimization

Although excluding jQuery from autoptimization by default might seem counter-intuitive, the “smarter” defaults should allow more Autoptimize installs to work out-of-the-box (including on sites run by people who might not be inclined to troubleshoot/ reconfigure Autoptimize in the first place).

And thanks to the release I now have a better idea of the number of active installs (which wordpress.org lists as +100000); 2.1 was downloaded 3239 times yesterday evening and it is listed as running on 1.8% sites. Simple math learns that Autoptimize is currently active on approx. 180000 WordPress websites. Let’s aim for 200K by the end of 2016! :-)

How to force Autoptimize to output protocol-relative URL’s

Autoptimize by default uses WordPress’ internal logic to determine if a URL should be HTTP or HTTPS. But in some cases WordPress may not be fully aware it is on HTTPS, or maybe you want part of your site HTTP and another part (cart & checkout?) in HTTPS. Protocol-relative URL’s to the rescue, except Autoptimize does not do those, right?

Well, not by default no. But the following code-snippet uses AO’s API to output protocol-relative URL’s (warning: not tested thoroughly in a production environment, but I’ll happy to assist in case of problems):

add_filter('autoptimize_filter_cache_getname','protocollesser');
add_filter('autoptimize_filter_base_replace_cdn','protocollesser');
function protocollesser($urlIn) {
  $urlOut=preg_replace('/https?:/i','',$urlIn);
  return $urlOut;
}

Preparing (for) Autoptimize 2.0.3 or 2.1.0

It’s that time of the year again where I humbly ask Autoptimize’s users to download and test the “beta”-version of the upcoming release. I’m not entirely sure whether this should be 2.0.3 (a minor release) or 2.1.0 (a major one), but I’ll let you guys & girls decide, OK?

Anyway, the following changes are in said new release;

  • Autoptimize now adds a small menu to the admin-toolbar (can be disabled with a filter) that shows the cache size and provides the possibility to purge the cache. A big thanks to Pablo Custo for his hard work on this nice feature!
  • If the 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)
  • An extra tab is shown (can be hidden with a filter) with information about my upcoming premium power-ups and other optimization tools- and services.
  • Misc. bugfixes & small improvements (see the commit-log on GitHub)

So, if you’re curious about Pablo’s beautiful menu or if you just want to help Autoptimize out, download the beta and provide me with your feedback. If all goes well, we’ll be able to push it (2.1.0?) out in the first half of August!

Whatever you do, don’t lie (when naming files)

So since Autoptimize 2.0.0 got released half a year ago, minified files are not re-minified any more, which can yield important performance-gains. Or that, at least, is the goal. But as checking if a file is minified is non-trivial, AO reverts to a simpler check; does the filename indicate the file is minified. So for example whatever-min.js and thisone_too.min.css would be considered minified and will simply be aggregated, whereas not_minified.js would get minified. Mr Clay’s Minify (which is used by WP Minify, BWP Minify and W3 Total Cache and of which the core minification components are in Autoptimize as well) applies the same logic.

But apparently plugins often lie about their JS and CSS, with some files claiming to be minified which clearly are not and with some files (even WordPress core files) being minified but not having the min-suffix in the name. It’s obvious that lying like that is kind of stupid: saying your files is minified when in fact it is not, offers you no advantages. Not confirming your file is minified in the name when it is, saves you 4 characters in the filename, but I suspect you were just being lazy, sloppy or tired, no?

So, ladies and gentlemen, can we agree on the following:

  1. Ideally you ship your plugin/ theme with minified JS & CSS.
  2. If your files are minified, you confirm that in the filename by adding the “.min”-suffix and minification plugins will skip them.
  3. If your files are not minified, you don’t include the “.min”-suffix in the filename, allowing for those minification plugins tot minify them.

For a more detailed overview of how to responsibly load minified JS/ CSS in WordPress, I’ll happily point you to Matt Cromwell’s excellent article on the subject.

Autoptimize Power-Up sneak peek; Critical CSS

So although I am taking things rather slowly, I am in fact still working on Power-Ups for Autoptimize, focusing on the one most people were asking for; critical CSS. The Critical CSS Power-Up will allow one to add “above the fold”-CSS for specific pages or types of pages.

The first screenshot shows the main screen (as a tab in Autoptimize), listing the pages for which Critical CSS is to be applied:

The second screenshot shows the “edit”-modal (which is almost the same when adding new rules) where you can choose what rule to create (based on URL or on WordPress Conditional Tag), the actual string from the URL or Conditional Tag and a textarea to copy/ paste the critical CSS:

ao_critcss_edit

The next step will be to contact people who already expressed interest in beta-testing Power-Ups, getting feedback from them to improve and hopefully make “Autoptimize Critical Css” available somewhere in Q3 2016 (but no promises, off course).