@Mohammad2306
Ezoic did not stop lazyloading our hero images. Since we want to lazyloading on all other images below the fold we solved it by adding loading ="eager" to all hero images.
So this is not a problem anymore when looking at LCP in CWV.
The biggest problem is the part I mentioned lately which is not related to Lazyload:
Ezoic just loads an additional image which is even bigger and not in the correct dynamic size and not defined in our preloading:
Our correct sized and smaller picture is loaded and used:
We define dynamically images which are getting preloaded to improve LCP. Unfortunately we see also this that Ezoic's optimized image urls are being added automatically to image tags here.
Preloaded:
Also loaded:
https://staging.theworldtravelindex.com/wp-content/uploads/2024/02/Worldtravelindex-India-Jaipur_1000px?ezimgfmt=ngcb9/notWebP
So we load same image twice. The _1000px from Ezoic is even wrong size for that viewport.
In frontend the original page is loaded in type webp, but when you open the link to it - it is still jpg:
So we have some questions on this:
1) How should we define preload (we are doing it like this: https://web.dev/articles/preload-responsive-images) that there is not an additional load of the same image (in wrong size)?
2) Is there a reason why the jpg (in wrong size) is loaded additionally with /notWebP?
3) When webp would work we would run into the same image, I guess that the preload will happen with jpg and Ezoic will load webp?
4) If there is no solution, would it be feasible to have just webp on our own server for preload - because in this case Ezoic would not take any action and the preloading of the original webp would just work?
Thanks for your help how we should solve this issue.