Aggregate CSS-files feature breaks mobile version

Afternoon Peter;
I just had a look at your site on my Android+Firefox where it works, but it is indeed broken when trying Chrome on my Android phone.

Can you try the following CSS optimization exclusions one by one to see which one helps:
* wp-content/plugins
* wp-content/themes
* wp-includes

based on the outcome we’ll see what the next step is.

kind regards,
frank

Hi Frank,

I have tried to exclude each one by one, but none of them makes any difference.

(The error is also on iOS+chrome).

Cheers,

Peter

OK … does this continue if “inline & defer CSS” is off?

No, if I set “inline & defer CSS” to off, the issue goes away, but so does part of the performance boost.

OK, can you try to add below code snippet to remove the critical CSS from the DOM at the onLoad event (when the full CSS is already loaded).

add_filter('autoptimize_html_after_minify','critcss_remover');
function critcss_remover($contentin) {
 return str_replace('</body>','<script>window.addEventListener("load", function(event) {document.getElementById("aoatfcss").media="none";})</script></body>',$contentin);
}

OK, where should I add it?
Is there a field in Autoptimize? or ..
Alternatively, I can add it using GeneratePress Elements and add it through a hook, but which hook should I use?

Otherwise, I need specific instructions how to add the code snippet

The easiest & safest solution is using the code snippets plugin.

I have added the code above, and it fixes the issue on mobile devices.

I suppose that this is only temporary that I should have to use the code snippet plugin to run this extra code until a fix comes out, right?

Does it removes the benefit of the CriticalCSS Powerup?

OK, great!

This does not remove the benefit of Critical CSS, the page initial rendering is still done by it, but critical CSS is removed when the full page is rendered.

This will be integrated as an (advanced) critical CSS setting in one of the next versions of AO (but not the next one as that is ready to be shipped).

Talking of the “power up”; you don’t need that any more as all of the functionality has now been integrated in Autoptimize proper, disable the power-up to have AO take over CCSS duties ??

Great thanks for the help.

I will leave the code snippet active until I see the setting under advanced critical css tab

(my mistake to call it a powerup, I only use the Critical CSS tab).

Thanks for the help.

you’re welcome Peter, feel free to leave a review of the plugin and support here! ??