benspr

Yes it does. Can you put a fix in the next version?

Thanks for the advice, Frank. The “Load in iframe” setting of the charts plugin was actually a suggestion from the developer, but because of the way Autoptimize works with Cloudflare, it seems like it didn’t do the trick. Also, loading the charts in iframe broke the Highcharts exporting module I use so people on my site can save the charts as PNGs.

Unfortunately, with my Autoptimize cache at 100% this morning, I had to make the decision to revert to earlier, more stable settings. The AO settings I had chosen also prevented another plugin, “Calculated Fields Form,” from working, and getting those two parts of my site back into functioning status was more important that trying to find the workaround that would allow me to defer jQuery and keep those plugins working.

Perhaps in the future I’ll revisit this, if I can get the advice of developers within my company. Thanks again for the advice.

Also, I don’t mind the wall of text. Thank you for the help!

Thanks for all the exploration. I’ve turned on the iFrame option and am now getting a big blank iframe where the chart should be. Same spot: https://www.solarpowerrocks.com/#mchart

Should I be trying to write some js that defers loading of the iframe until the rest of the js is loaded?

Actually, it appears that even charts that are added using the shortcode in the WordPress editor have suffered the same fate, as does the one here: https://www.solarpowerrocks.com/#mchart

So what is it about M-Chart calling jQuery right there that I can do to get it to load after the deferred jQuery is called in the footer?

Thanks, Dave. I made the addition to Whitelisted URLs that you suggested.

So, the funny thing is I never was “blocked” by the firewall—at least not that I could tell—just that I got that security alert. I had been editing the Autoptimize settings that day.

Here are my current Autoptimize settings: https://i.imgur.com/iXLjTTN.png

I just now tried editing/saving those settings from my home and don’t see any similar alerts. My Wordfence is set to log security traffic only and also to not log signed-in users with publishing access.

Long-shot, here: is it possible my login cookie expired or something and my browser tried to load an admin page for which I was no longer logged in?

Thanks, sorry this slipped off my radar. Will approach the WF folks with it now and report back if I find anything.

Fingers crossed, but that seems to have done the trick!

Well I’ve turned off Rocket Loader and Easy Lazy Loader, cleared all cache and Cloudflare and verified: the charts load in Firefox, Edge, and Chrome on Win 10 machine when I have Autoptimize Lazy Loading off, and are broken when I turn it on.

You should be able to see that live on the site now, though I need to change the setting back to give my users a better experience soon.

BTW- thanks for reminding me that filenames can be excluded from lazy loading. That did the trick.

Using “view source” in Chrome I can see where the “lazyload” class has been applied to the Alabama chart, right before “src=’data:image”, and also that it’s not applied to the California charts. Interestingly, on the Alabama page, the chart src is “data:image/svg+xml” whereas on the California page, it’s data:image/png;base64. Guessing that has something to do with it being allowed to render fully.

This brings up a larger problem: how to restrict lazy loading for images that are not already assigned a class. Earlier today, I noticed the logo in my mobile menu header bar was lazy loading and tried to restrict it but found that the mobile menu plugin author didn’t give the logo png a class, so I couldn’t stop it from lazy loading.

• This reply was modified 5 years, 7 months ago by benspr.

Anything to be done about that? Looks like at least one of them is a jQuery script for share counts in the social plugin the site uses.

Interesting. Would you say it’s a good idea to eliminate the Google Optimize Code unless I’m actively running experiments?

Also: I’m now seeing Autoptimize js scripts listed in Pagespeed Insights as render-blocking. For example: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.solarpowerrocks.com%2Fflorida%2F&tab=desktop

Is that possibly because Autoptimize is aggregating the Google Optimize script, and therefore the page reloads itself (unseen to the user) as the cached js runs at the end of the body?

Other reasons?

• This reply was modified 5 years, 7 months ago by benspr.

Thanks, Frank. That may be the case.

I’ve also been playing around a bit and it seems like unchecking the box that says “Also aggregate inline CSS?” gets rid of this problem. At least for now!

I might also nix that VWO code, because I use Google Optimize more, anyway.

Hey, thank you!

I actually ended up figuring this out and was just coming to set this question to resolved. There was a conflict with another plugin in my site that had set svg touch-action to none. I changed in to “manipulate” and it works!

And I did visit the github wiki, but found it very confusing because I don’t know php/javascript myself, so I wasn’t sure how to reformat the js code for php. I had a developer friend help, and all the rest of the custom themeing I added works well now!