Did recent Autoptimize update break CSS optimization?

Well, that could indeed be the update, but it could also be the additional plugins.

Easiest way to determine which; download & install 2.1.2 (which is 2.1.0 + an important security fix) and see if that fixes things.

alternative; disable the new optimization logic in AO 2.2.x using this code snippet;
add_filter('autoptimize_filter_speedupper','__return_false');

if not the AO update, you might have to dive into the troubleshooting tips in the FAQ.

hope this helps,
frank

For me the the Autoptimize has put the cache css link in to the body and not in the head. So I’m seeing an unstyled page.

Thanks

that’s … weird. can you share your URL @grinstead, I’d love to have a look around ..

Version 2.1.2 unfortunately does not solve the issue. Even with almost all other plugins deactivated, still the same issue. The FAQ talks about setting
option “Look for styles on just head?”
but I don’t see that in settings.

Guess I’ll go back to most recent version, but will leave CSS optimization turned off…

Version 2.1.2 unfortunately does not solve the issue.

good for me (no regression), not good for you obviously.

Guess I’ll go back to most recent version, but will leave CSS optimization turned off…

That I wouldn’t do. You could instead try (as per the troubleshooting tips in the FAQ) to exclude some of the CSS from optimization. And the “Look for styles on just head?”-option still exists, even if it’s not listed on the admin-page any more. simply execute

update_option('autoptimize_css_justhead','on');

and you will only be aggregating CSS from the head-section AND the option will be visible on the admin-screen (until you disable it)

happy optimizing,
frank

@optimizingmatters I would but this is on a local environment, not live.

Thanks Frank.
I tried the ‘hidden/deprecated’ head-only option, that indeed became visible. It also did not solve the issue.

I’ll do some deep dive somewhat later on which CSS to exclude.

kind regards, Theo

I’ve just noticed that it’s actually placing the style link inside a inline svg!

Code snippet:

<div class="site-logo"> <svg xmlns="https://www.w3.org/2000/svg" width="83.45" height="222.78" viewBox="0 0 83.45 222.78"><link type="text/css" media="all" href="https://localhost/theme-name/wp-content/cache/autoptimize/30/css/autoptimize_ef1deb0a869e1cce37783b30ae2f7889.css" rel="stylesheet" /><title>logo</title><path d="M83.45,36.94c0-3.62-10.86-16.9-10.86-16.9C67.84-.49,57.67.72,57.67.72,30.53-7.13,42.74,50.82,45.46,88.85s-21,76.61-33.24,87.52S0,208.36,0,208.36c8.14-13.28,17-15.09,17-15.09S12.21,204.13,12.21,209s17.64,6.64,19.67,9.66,14.93,3.26,21,3.26,11.53,2.18,10.18-.24-17.64-4.83-21.37-7.24S36,194.48,36,194.48l2.71-1.81s25.1-12.07,36-39.23S69.88,95.49,65.13,84s-4.07-22.33-7.46-45.27,6.78-12.07,12.89-5.43,12.89,7.24,12.89,3.62M32.23,211.53c-1,2-1.19,1.51-1.19,1.51s-9.5-2.11-11-4.83-.34-5.28.34-8.45,3.73-10.41,6.28-7.85,2.57,5.18,3.56,10.29,3.08,7.31,2,9.33" fill="#000"/></svg></div>

Hope that helps.

Michael

it does help; AO uses the title-element to inject the CSS by default (and did the same the previous versions). if your SVG has a title-element (it does) and if it comes before the HTML-title, it’ll mis-inject.

what you can do;
* remove the title-element from the SVG
* change the place of the SVG after the title
* change AO’s injection-point using the API, e.g.

add_filter('autoptimize_filter_css_replacetag','css_after_svg',10,1);
function css_after_svg($replacetag) {
	return array("</svg></div>","after");
	}

will place it after the SVG (assuming there are no earlier occurrences of </svg></div>

hope this helps,
frank

Thanks Frank, I see, that clears that up.

Frank,
Thanks for your feedback. I’ve managed to get the site to work correctly again, while optimizing CSS too. In the end I need to exclude 2 CSS files from HBook plugin and also 2 CSS files from Masterslider Pro.

thanks for all the feedback guys, happy you were able to troubleshoot your problems! ??