Images are sometimes not displayed because of lazy load option

Hello @dajanas

Thank you for reaching out and I am happy to assist you with this.
Just to confirm, everything works as expected on other browsers/ platforms, and you are seeing the problem only on your mobile safari browser?
Have you made any other updates like theme or possibly an update on safari or did you just update W3 Total Cache when the issue started to occur?
If possible, you can drop us a note directly via the plugin in Performance>Support, or via the website form so I can check the issue.
Can you also please try and change the theme temporarily?
You can always exclude images from being lazyloaded in Performance>User Experience>Exclude words: filed.
Simply add the image URL, or any class name associated with those images, save all settings and purge the cache and see if the problem persists.

I’ll make sure to check other websites on safari iPhone and see if I can replicate the problem. Safari version, OS version, and iPhone model would be helpful.

Thanks!

`I found the source of the error myself. It is well known that there can be problems when several Lazy Load plugins can interfere with each other. I only use W3 Total Cache for Lazy Load, BUT: Many browsers now have Lazy Load active automatically – independent of any plugins. Actually you don’t need Lazy Load from W3 Total Cache anymore – right?

Because: Probably an update of iOS is to blame for my described problem. In the settings of iOS Safari there is the section “Advanced > Experimental Features” (I’m not sure how it’s called in English, I’m translating from German at the moment). And in this section you can turn on and off very many experimental features. By default, I guess the “Lazy image loading” feature has been enabled there recently.

If I disable this feature, then lazy loading through W3 Total Cache on my website in iOS Safari works as usual without any problems. But if this function is active, then there are the mentioned problems and sometimes images are not displayed (only a white area is shown). If you reload often, then it can sometimes happen that the particular image is displayed correctly, but then that is just coincidence. So the problem is that the lazy load feature of W3 Total Cache and the new experimental feature of iOS Safari browser called “Lazy image loading” interfere with each other.

As I read, practically all browsers now support lazy loading automatically and by default. Only Safari is still problematic, but (as you can see from the experimental feature) apparently Apple is working on a solution.

Can you confirm this? Accordingly, the lazy load function of W3 Total Cache is no longer necessary?

I have now disabled lazy loading in W3 Total Cache. Because I can’t expect visitors of my website to know about this experimental feature in iOS Safari and they disable it manually.

So can anyone confirm that by now all current browsers (Chrome, Edge, Opera, Firefox, soon Safari) use Lazy Load by default?

Hello @dajanas

Thank you for your feedback.
TO answer your question, yes, most modern browsers have implemented native lazy-loading. However, there is a difference in how it’s implemented. W3TC uses javascript, a more effective way, and browsers are using “native lazyload” where browsers honor the loading attribute which is set to lazy.
So, yes, there is a chance of a conflict, and the interesting thing is that it’s not affecting all images on the website.
As for the effectiveness, simply test your website with and without W3TC LazyLoading enabled and see the performance report.
Again, you can exclude images you are having issues with from being lazyloaded in Performance>User Experience>Exclude words: field.

Let me know if this helps and if you have any other questions.

Thanks!

I use websites that test my site – I don’t know how my site is tested there and if their setting of Lazy Load is enabled in their browser. Tests through such test providers bring worse results if I rely only on lazy load of browsers. But I am not surprised, because such test websites do not correspond 100% to the circumstances of real browsers. The problem does not affect all images, probably because lazy load of W3 Total Cache and lazy load of browsers interfere with each other – sometimes lazy load works for an image, sometimes not. But it currently also ONLY occurs with me on the iOS Safari browser – nowhere else. But still a problem that should be fixed. By WordPress itself images of a website are automatically marked with Lazy anyway. Maybe there is a fix for W3 Total Cache that prevents the problem from occurring with iOS Safari? After all, it works with Chrome, Edge, Firefox, Opera, etc.

Hello @dajanas

The reason for the test results is that browsers’ native lazy load is not as effective as W3TC lazy load. If it was not the case, all lazy load plugins would be redundant.
The problem is also that this is a new and experimental feature on safari introduced on Mar 14th, 2022. The good thing is that it’s not automatically enabled in the settings and therefore the global usage is around 1.01%
Nevertheless, we do have a GitHub ticket opened for this problem.
Please make sure to follow the progress of the ticket regularly.
Thanks!

No, unfortunately you are wrong. As I have already described: This experimental feature IS automatically enabled in iOS Safari. That’s what I wrote. In the current iOS version, the function is automatically active, I do not know how it is with previous versions of iOS. I have never activated the function myself.

Hello @dajanas

Thank you for yoru feedback.
I’ve checked the documentation on this and tested this personally.
But you are correct, there are a lot of different use cases.
We are working on this.
Thanks!

Any news about it?
[Moderator note: Please, No bumping].

• This reply was modified 2 years, 5 months ago by Steven Stern (sterndata).

Okay, so I’m not allowed to follow up if I feel like the authors have forgotten or stopped reading this thread?