New render-blocking CSS from Autoptimizer

Hi CharlylBC;
CSS as it is used by default is render blocking and so is CSS placed by Autoptimize. There are, however, 2 AO-options that can solve that problem; inline (easiest) and inline&defer (best). You can find more info on the subject in the FAQ and in this article on my blog.

Hope this helps,
frank

Hi Frank,

I certainly didn’t expect you to answer on a Sunday, but thanks so much for doing so!

I appreciate the links and will look them over. I’m fairly new to coding and old, so it takes me some time to wrap my head around what I should do. Plus I do my best work early in the morn, as I’m burnt out by now. lol

In a couple, few days I’ll reply back to let you know my progress. I think I’ll attempt figuring out the inline & defer approach. Thanks again!! ??

Charly

Hi CharlyIBC,

You can find a tutorial for Autoptimize’s Inline and Defer CSS option here.

Hope that helps,
AJ

Nice, thanks AJ!

??

Oh my… Thanks AJ! I think all this will take me more time than a couple of days to figure out lol

I have a major issue that I cannot imagine where to begin in fixing it…

I’m being told that in some cases my add to cart button will not appear when selections are made to purchase an image! Not good ?? I have the issue only with Safari, not Firefox. Another person has this issue on all browsers!

Example Image:

1937 Chevy Coupe

I found this error:

autoptimize_0afdbaba40c3a3030e0c4addf3047cf3.js:58TypeError:’undefined is not a function (evaluating ‘$(document)’)

I tried deactivating your plugin, but that did nothing.

Please help! This is very bad for my customers and me…..

If the problem is still there after deactivating AO (and emptying your Quick Cache cache), then the problem is due to something else.

Regarding JS-issues such as the one you describe; you can either just disable JS optimization or start troubleshooting as described in the FAQ (you can try with “force JS into head” and maybe “look for JS only in head” first, but you might need to exclude e.g. jquery and other specific JS-files from optimizatoin, add-to-cart.min.js comes to mind).

Hope this helps,
frank

Thanks Frank! Sorry I was in a panic, but didn’t know what to do….

Sure enough, when I deactivated AO and empty QC cache, then activated AO I now can see add to cart button in Safari and FireFox.

Is this something I need to do as a maintenance measure periodically? Thanks again!!!

Normally; no, once all is configured and working OK, no maintenance should be necessary.

However it is clear something was wrong. My best guess would be some JS (in a plugin) got updated (due to the plugin being updated), breaking the cached autoptimized JS. Clearing caches (Quick Cache & Autoptimize’s) would indeed solve that problem.

frank

Thanks Frank! I really appreciate the help.

One last question: how does one remove the cache on AO? I noticed after all the deactivating that the render-blocking items returned when I did a google pagespeed test. Not sure why this is, but am presuming it could be the cache?

There are 2 things to consider when disabling AO;
1. you should also empty your quick cache’s cache (if not you will have pages in quick cache that still refer to AO-created files, even if AO is deactivated).
2. you return to a situation without AO (so no “inline” or “defer&inline”) meaning that the bulk of you un-optimized CSS is render-blocking (as CSS is, by default).

hope this explains,
frank

Thanks again Frank for all your help! I was told my add to cart button still doesn’t show for some. ?? Unfortunately having AO activated is hiding my “add to cart” button. I’ve tried everything to make this work, but alas to no avail.

Perhaps it’s something I’ve added to my files that is interfering or what my host did to make my SSL work properly. My apologies, but I’m so fried with all the issues I’ve had over the past 4 days, that for now I’m going to do without AO. Maybe at a later date I’ll try again….

Once again, I really appreciate all you’ve done trying to assist me!!!

Having JS optimization disabled will solve the add-to-cart issue, so you could run AO with just CSS & HTML optimalization?

I have done as you suggested Frank and think it’s working. Have to wait to hear from friends to know for sure. Thanks!