All Images Disappear

Evening washingtonsblog;
When comparing your blog and without autoptimize (the latter by adding ?ao_noptimize=1 to the URL), I see no difference (and in both cases I see images), so that would imply that something else is happening?

If you do still see problems, have a look at the troubleshooting-part in the FAQ and do let me know if you need additional guidance!

Hope this helps,
frank

Frank, thanks. But If you look at one of the pages with images – for example, this one: https://www.washingtonsblog.com/2016/05/much-liberty-americans-left.html – the images show when Autoptimize is deactivated, but disappear when activated.

OK, now we’re getting somewhere. So next step, as per the FAQ, is toggling settings to disable/ enable JS and CSS optimization one to see which one is causing the problem. Can you do that and report back here? ??

frank

Hi Frank, disabling “Optimize JavaScript Code?” restores the images. What’s the next step?

Hello folks,

@washingtonsblog: Try adding “lazy-load” (no quotes) and “jquery.js” (no quotes) to the JavaScript exclusion list.

Be well,
AJ

AJ (and Frank),

THANK YOU! This worked like a charm! All best.

What’s the next step?

Having AJ save the day, apparently ??

If you ever run into similar problems; what AJ probably did is:

1. look at the problem description: images don’t load
2. look at the HTML source (probably the non-autoptimized one by adding ?ao_noptimize=1 to the URL)
3. notice you use the lazy-load plugin (which loads images late) -> this is the link between (1) and (2)
4. seeing (or knowing, AJ is experienced like that) that lazy-load relies on jquery.

so, to fix that problem one would indeed exclude the lazy-load JS and jquery.js.

hope this clarifies,
frank

??

@washingtonsblog,

jQuery and anything dependent upon it is generally the culprit when one has problems with Autoptimize (or any minification plugin, really).

Between Frank’s #3 and #4 I would add that looking at your site’s source code, one can see:

https://www.washingtonsblog.com/wp-content/plugins/lazy-load/js/jquery.sonar.min.js?ver=0.6

A dead giveaway that the plugin relies upon jQuery.

Note also in the file path “lazy-load”. Again viewing the source code, one can see another .js file with “lazy-load” in its file path:

https://www.washingtonsblog.com/wp-content/plugins/lazy-load/js/lazy-load.js?ver=0.6

While we do not see “jquery” in there, we see “lazy-load” and so know that this file may or may not also need to be excluded for the plugin to function properly.

So, you should further experiment with allowing AO to aggregate that file by removing “lazy-load” from the exclusion list (which was excluding all JavaScript with that in its file path) and adding “jquery.sonar.min.js”, the file we are certain is problematic. In so doing, AO will go ahead and aggregate “/lazy-load.js?ver=0.6”.

If all is well after that you know that that particular file put out by your lazy load plugin can indeed by aggregated ie. combined with the rest.

Be well,
AJ

Thanks, AJ. Adding jquery.sonar.min.js and deleting lazy-load from exclusions DID in fact work. You are a blackbelt in js!

One more question (or should this be on a separate thread?) Google PageSpeed says I should A. remove certain render-blocking javascripts and B. optimize css delivery of (1) https://www.washingtonsblog.com/wp-content/cache/autoptimize/css/autoptimize_bca8259833dc5c5608f3f0874293ee87.css and (2) https://www.washingtonsblog.com/?action=display_custom_css_code .

Is this something I can do via Autoptimize … or do I need another plugin (such as “Above The Fold Optimization”) to do so?

Now that you’ve added jQuery to the exclusion list it will in fact be render blocking. Not a huge problem in itself but you should try to get rid of it. If you can’t, you can’t.

If when aggregating jQuery (ie. it was not added to the exclusion list) the only problem you experienced was with your lazy load plugin, the solution there would be to find a lazy load plugin that is not dependent upon jQuery being render blocking. Here’s one. Make sure to add “data-lazy-original” to AO’s exclusion list after installing Rocket Lazy Load.

You can then try removing jquery.js from the exclusion list. If all is well afterwards, you’re good to go and will no longer have any render blocking JavaScript.

You can indeed remedy render blocking CSS with AO. Answers to this and other of life’s great mysteries can be found in Frank’s extensive FAQ and this stickied post string at the top of the plugin’s support page.

Be well,
AJ

So I am having a problem that when enabling the autoptimize all my images on mobile disappear, but remain on desktop view. if I disable it they all come back. Any ideas? website i am working on is clikpixl.com

• This reply was modified 8 years, 1 month ago by captonize.