Lazy load not catching all images?

regarding images not loading; those have the lazyload class not set. for the instagram block the problem is clear; the class of images in that block is set without quotes which … confuses AO;

<img
class=wp-block-getwid-instagram__media src="https://scontent.cdninstagram.com/vp/a64086c5abc751294799c1704bfc193c/5D7113E0/t51.2885-15/sh0.08/e35/s640x640/57183933_281849116035150_3359563813016033664_n.jpg?_nc_ht=scontent.cdninstagram.com" alt="Reverse sides of my Eevee beans charms. They started out as shinies, but some shinies are cooler than others... So I just did what I liked!">

for the header image I don’t see what is causing the lazyload class not being added, might there be any error in the PHP error-log that could explain what is going wrong?

for the images not lazyloaded; I’ll add another reply later this morning (got to get of my train now ?? )

frank

while riding my bicycle to work I realized that the missing quotes around attributes might somehow be the basic issue here and indeed I see a lot of quote-less attributets in your HTML source code. do you have a plugin doing that or is it your theme? is that something you can disable so we could see to what extent this is the root cause?

Thanks for your reply! That is bizarre, I can see why it would be a problem. However, when I look at my page source, I’m seeing significantly different output:

<img class="wp-block-getwid-instagram__media" src="data:image/svg+xml,%3Csvg%20xmlns=%22https://www.w3.org/2000/svg%22%20viewBox=%220%200%20%20%22%3E%3C/svg%3E" data-src="https://scontent.cdninstagram.com/vp/a64086c5abc751294799c1704bfc193c/5D7113E0/t51.2885-15/sh0.08/e35/s640x640/57183933_281849116035150_3359563813016033664_n.jpg?_nc_ht=scontent.cdninstagram.com" alt="Reverse sides of my Eevee beans charms. They started out as shinies, but some shinies are cooler than others... So I just did what I liked!">

(The images are still invisible.)

That SVG string looks like a placeholder to me; is it part of how Autoptimize handles lazy load? If not, it may be a remnant of some other plugin messing with AO.

I don’t seem to have any php errors being generated right now, so I’m afraid I don’t have anything useful there. But I did write the bulk of the theme some time ago—I’ll take a look at the header and see if I’ve done anything weird that might be causing trouble.

Thanks again, I appreciate your time!

Apologies, I was writing my response while you posted. You’re right, something has indeed gone horribly wrong with quotes! I was looking at the code through the browser’s inspector, so I think I was seeing the code patched up by my browser.

Okay, I’ll go find the source of that problem and let you know if there still seems to be an AO issue once it’s gone. Thanks!

I think I know what is happening; AO HTML optimization will not load the HTML minification it ships with when W3TC has loaded its own (as it uses the same class-name), so I think W3TC HTML minification is removing quotes around attributes where it deems appropriate. Can you disable AO HTML minification to confirm?

Yes, that’s it—I was just observing this same thing on my end. The quotes vanish when I turn on HTML minification in AO. I’m not sure why W3TC minification should be interfering though, as it’s supposed to be turned off! It certainly appears to be off, in the settings interface. I’ll see what I can do to fix that.

(Edit: Or do you mean to say it would prevent AO from working even if turned off?)

• This reply was modified 5 years, 10 months ago by Fox Lee.

ok, so what seems to be happening;

* W3TC seems to load their HTML minify component even if HTML minification is off (because you have minification off in W3TC, no?)
* AO does not autoload it’s own HTML minifier (which has the same origin as W3TC’s if I’m not mistaking) as the “Minify_HTML” class is already loaded
* so if AO minification is on, it uses the W3TC provided “Minify_HTML” class
* W3TC’s HTML minifier seems to remove quotes from around attributes where possible (as in; when there are no spaces in the attribute value) which breaks the way AO injects the lazy-load stuff

the workaround would be to leave HTML minification off at least for now. the solution would be … something I’ll have to think about some more … ??

OK, I just added a careful maybe_fix_missing_quotes function to autoptimizeImages, would be great if you could download the beta-version from github and take that for a spin?

frank

That’s correct, even with W3TC’s minification turned off, it appears to force its way in. If I disable W3TC entirely, AO’s minification works as expected. I’ll raise the issue in W3TC support too, since presumably this is really their problem.

Thank you for the beta, I’ll try it out and report back!

I’m afraid I don’t see any difference using the beta, compared to live version.

hmmm, that’s .. unexpected .. back to the drawing board then ??

OK, so I did some more tests with W3TC active and AO doing HTML optimization and lazyloading, and it does seem to work for me fox-lee.

Looking at the page you linked, the “mysterious teacup blue” & similar (“the three-column block after Media & Image”) now are lazyloaded, and the + the instagram images are now loading as well?

So the remaining mystery is the header image which is missing the class='lazyload' attrib?

My apologies for the late reply—I had an unexpectedly busy week. After updating Autoptimize to 2.5.1-beta-2, I’m getting the same results as you—only the header image is having a problem now. I’ll compare my header code to the default themes and see if there’s anything that might be circumventing AO.

Thank you!

Okay, I checked out my header code and though it doesn’t cause errors, it was a bit outdated. I was adding the header using header_image(), which seems to have stopped AO from accessing it. I switched to using the_custom_header_markup() instead, and now AO is successfully loading the header image too. Hopefully this info will be useful if anybody has a similar problem in the future.

Anyway, that means everything is now working smoothly under your AO beta! Thanks for sticking with me until everything was solved. I really appreciate your hard work ??

Sorry, it looks like I spoke a little too soon—I forgot I was trying out Litespeed Cache instead of W3TC. If I reinstate W3TC (with its minification turned off, of course), the images do load and receive the “lazyloaded” class. However, Pagespeed Insights still reports that certain images (the “mysterious teacups” and the second and third slider images) aren’t being lazy loaded.