Lazy Loading in combination with the official amp plugin images not loading

Hello @jcvangent

I am sorry about the issue you are experiencing and I am happy to assist you with this.
Can you please share your website URL?
In Performance>User Experience>Script Embed method: selecting the sync (to head) method, save all settings and purge the cache and see if the issue persists.
Thanks!

Changed it from async to “sync (to head)” and that seems to have fixed it…any reason why it works like this (curious to know but thanks for finding the fix already)

Oh wait, I was to quick it was still in my cache in my browser…have a look here https://usergrowth.io on the homepage for example with the testimonials there should be a picture of the person with the testimonial.

What I see in the code is the following

<img class="lazy" src="data:image/svg+xml,%3Csvg%20xmlns='https://www.w3.org/2000/svg'%20viewBox='0%200%20200%20200'%3E%3C/svg%3E" data-src="the proper URL of the picture" alt="title">

Hello @jcvangent

Thank you for the information and yes, I can see the issue.
Can you please share what version of W3TC you are using? DO you have any image optimization plugin installed and lazyload enabled?
I can also see that you are using Cloudflare. Is minify enabled in Cloudflare by any chance?
Thanks!

Hey @vmarko sorry for the delay here, I’m using the latest version (0.14.4).

The only other image optimization that is happening is that I’m using Jetpack as the image CDN, but disabling that doesn’t make a difference.

On Cloudflare I indeed have auto minify on for:

JavaScript
CSS
HTML

And I have the “Rocket Loader? – Improve the paint time for pages which include JavaScript.” on as well.

Is there something I should change there?

Hello @jcvangent

Thank you for the information.
Are you using any kind of plugin for testimonials?
Can you please disable LazyLoading so I can check the source?
Thanks!

Testimonials are done from Jetpack, but it is not just the testimonial visuals that are not working, also visuals on the blog, etc. everywhere.

Do you want me to disable lazyloading in W3 Total Cache?

Hello @jcvangent

Thank you for the information. Just to confirm you stated that switching the sync (to head) method, save all settings and purge the cache does not help?
Yes please disable Lazyloading so I can check the source.
Thanks!

No I thought it worked when I switched, but apparently it didn’t work out, there was a caching thing in my browser that messed it up.

Disabled lazy loading now and images are back on the website, so it is clearly related to the lazyloading of w3 total cache :-/

Hello @jcvangent

Thank you for the information.
I’ve checked the source now and Yes I can see that the images are loading now.
However, when I checked the images in the blog I can see that they already have a Lazy tag:
<img width="1920" height="620" src="https://usergrowth.io/wp-content/uploads/2020/07/Social_Proof_-_Using_Your_Customers_To_Boost_Conversions.jpg" class="attachment-full size-full wp-post-image" alt="Social Proof: Using Your Customers To Boost Conversions" loading="lazy"
This is not the case with the testimonial images, however, it appears that something is already trying to lazyload images. In this case, its recommended not to use W3 Total Cache Lazyload.
Thanks!

• This reply was modified 4 years, 5 months ago by Marko Vasiljevic.

Do you have any idea what could be causing this “extra” lazy load? The only other thing I could think of is Jetpack, but that lazy loading of images is not enabled in those settings as well.

Hello @jcvangent

Not sure, Does the issue persist if you disable AMP? Are the images still not loading then if Lazy loading is enabled?
Thanks!

I’m using the official AMP plugin. I disabled it, enabled lazy loading of images again in W3 Total Cache and purged all cache (and my browser cache). The images are gone again.

Hello @jcvangent

Thank you for the feedback.
There is one more thing that you should try and that’s to change the theme temporarily and see if the issue persists. Possibly the conflict with the theme you are using.
Thanks!

Mmm that might be causing it, any idea what to look for in the theme functions or something like this?