Lazy loading – Images not displaying correctly

Hello @fabriziomazzei

I am sorry about the issue you are experiencing and I am happy to assist you with this.
The loading=”lazy” is a built-in Browser-level lay loading.
So yes, when you disable W3 Total Cache Lazy loading it’s really disabled as W3TC adds wp-post-image lazy loaded
There are a couple of things that you can try. If it’s loading correctly after excluding the mentioned words on Desktop, you should try using User agent groups. In Performance>User Agent Groups, you can create a group of user agents by specifying names in the user agents field. Assign a set of user agents to use a specific theme, redirect them to another domain, or if an existing mobile plugin is active, create user agent groups to ensure that a unique cache is created for each user agent group. Drag and drop groups into order (if needed) to determine their priority (top -> down).
You should also try switching the theme temporarily and without excluding the words and see if potentially there is a conflict with the theme.
Make sure that if you are using any image optimization plugin that the Lazy Loading feature in that plugin is not enabled.
I hope this helps!
Thanks!

Hi Marko, thank you for your prompt reply.

That is what I thought indeed: I don’t see “wp-post-image lazy loaded” anymore, but I still see the loading=lazy code.

Unfortunately i cannot switching the theme, I mean that would completely destroy the website, woudldn’t it? The website is already online and I don’t wanna risk that.

As for the user agent groups, I grasped a bit of what you said, but where I am supposed to redirect people?

Lastly, I’m using Shortpixel which as far as I know does not provide Lazy loading feature.

Question: is there a way to find out for sure what is lazy loading the images? Besides disabling the theme.

Thank you
Fabrizio

Hello @fabriziomazzei

Thank you for the information.
As I mentioned before, loading=”lazy” is a built-in browser lazyloading feature and that’s where it’s coming from.
I was not asking you to disable the theme but to temporarily switch to the default theme. And then change it back. I understand that it’s a live website so maybe you should avoid that.
The point of User-Agent Groups is to create a specific cache for the user agents selected.
So when you enable the group, select your current theme in the “Theme” dropdown menu save all settings and purge the cache.
Redirect users to should be populated if you are using some Mobile plugins to redirect users. If not select the theme, enable the group, save all settings, and purge the cache. See if the issue with lazyloading persists.
If the issue is still there one other thing that you can do is to try and change the Script Embed method: in Performance>User Experience to sync(to head)
I hope this helps!
Thanks!

I have enabled the User agent group for phones, thank you. In the meanwhile I had added several css lines (margins and stuff like that) to kind of fix the problem. All things considered, it looks like it’s fine now ?? So thanks!

Anyway, apologies, I had no idea about browers being so smart nowadays, and didn’t understand that previously. Now I see what you mean.

Well, considering this, is there a way for a website to avoid that on specific elements or it is just about themes that need to keep up with this browser’s new features?

Thank you
Fabrizio

Hello @fabriziomazzei

Thank you for the information.
Yes, this is a built-in WP feature since version 5.5.
You can disable it by using a plugin to disable native lazyloading.
Please check this link.
Thanks!

Well @vmarko maybe that was easy stuff for you but you don’t know what a big issue you helped me fix!!

It looks like it’s solved.

Anyway I want to double check this from other devices, so please don’t close the thread, I’ll come back hopefully to confirm it is fixed.

Thank you
Fabrizio