Autoptimize cache size warning

No matter how beautiful is your website, the time and effort you spend to create content, add in images and animations might all waste if your website is too slow to load. There have been several researches which confirms that the increase in website loading times increases users dropping off your site without even seeing the content. Google had also indicated about considering site speed as one of the factor they have accounted for ranking pages on search. This is why website optimization has been a hot topic every now and then.

As an agency, we have used Autoptimize plugin from Frank Goossens on few of our client sites to aggregate, minify and cache scripts and styles, image optimization and lazyload, etc. Everything worked pretty well, we didn’t even went through all the settings and just checked most of the options available and saved and it worked effortlessly. But recently, we received an email from one of our client websites mentioning “Autoptimize cache size warning”. Message include:

Autoptimize's cache size is getting big, consider purging the cache. Have a look at https://wordpress.org/plugins/autoptimize/faq/ to see how you can keep the cache size under control. (site: https://yoursite.com)

When logging in to the admin, we were surprise to see the Autoptimize cache size was greater than 500MB and it was just few weeks back, we installed this plugin for optimization. We googled around and found few links that helped us clarify the issue which I have listed at the end of article.

Reason for Autoptimize cache size warning

For each page being loaded, Autoptimize aggregates all JS (and CSS) calculates the hash of that string and checks if an optimized version is in cache using that hash. If there is a difference (even if just a comma), the hash is not the same and the aggregated CSS/ JS is cached separately. This behavior typically is caused by plugins that generate javascript-variables (or CSS-selectors) that are specific for each page (or even worse, for each page request). That does not only lead to a huge amount of files in the cache, but also impacts visitors as their browsers will have to request a different optimized CSS or JS-file for each page instead of reusing the same file for several pages.

Solution

Simplest and easiest solution is to uncheck “Also aggregate inline JS?” and “Also aggregate inline CSS?” option in Autoptimize settings page and save. This will avoid creating multiple caches for JS and CSS caused by dynamic inline CSS and JSS.

If you want to go through plugin author’s article on this topic, you can go through link below:
http://blog.futtta.be/2014/03/19/how-to-keep-autoptimizes-cache-size-under-control-and-improve-visitor-experience/

Autoptimize FAQ?

How can I increase max cache size in autoptimize?

You can update the max cache size by using “autoptimize_filter_cachecheck_maxsize” filter. Please add this code on your functions.php to increase the cache size.
add_filter(‘autoptimize_filter_cachecheck_maxsize’,’change_maxsize’);
function change_maxsize() {
return 10*1024*1024;
}

Why doesn’t Autoptimize have automatic cache pruning?

The problem is a page caching layer (which could be a browser, a caching reverse proxy or a wordpress page caching plugin) contains pages that refer to the aggregated JS/CSS-files. If those optimized files were to be automatically removed while the page would remain in the page caching layer, people would get the cached page without any JS- or CSS-files being available. This would break your page resulting unwanted results.