No bug Above-the-fold images that are lazily loaded
- Plau
-
Topic Author
- Offline
Less
More
- Posts: 6
- Thank you received: 0
1 year 8 months ago - 1 year 8 months ago #2543
by Plau
Above-the-fold images that are lazily loaded was created by Plau
Hi,
I am using ochResponsiveImages and in the settings of the plugin I have selected "Add Lazy Loading attribute = Yes".
I ran a test in gtmetrix.com/ for example, on my site www.kreuzfahrt-praxis.de/kreuzfahrt-schiffe/aidacosma and it gave the following advice:
"Above-the-fold images that are lazily loaded render later in the page lifecycle, which can delay the largest contentful paint."
Is this really a problem and do you have a solution?
Kind regards
Christopher
I am using ochResponsiveImages and in the settings of the plugin I have selected "Add Lazy Loading attribute = Yes".
I ran a test in gtmetrix.com/ for example, on my site www.kreuzfahrt-praxis.de/kreuzfahrt-schiffe/aidacosma and it gave the following advice:
"Above-the-fold images that are lazily loaded render later in the page lifecycle, which can delay the largest contentful paint."
Is this really a problem and do you have a solution?
Kind regards
Christopher
Last edit: 1 year 8 months ago by Plau.
Please Log in to join the conversation.
- Ruud van Lent
-
- Offline
Less
More
- Posts: 1700
- Thank you received: 110
1 year 8 months ago #2544
by Ruud van Lent
Replied by Ruud van Lent on topic Above-the-fold images that are lazily loaded
Hi Christopher,
Thanks for reaching out.
The adding the lazy loading attribute on the images instructs the browser to do what they seem fit. So it is your visitors browser that has the logic to lazy load or not.
When ochResponsiveImages processes the page it doesn't see the page as it is rendered, but it sees HTML code. So there is no way to determine if an image is above or below the fold. next to that, the fold differs on the visitor his device: a mobile device in portait has a different 'fold' then a desktop.
So the only thing we can do here is turn them all on, or all off.
I do not think this is an issue as the browser probably evolved to solve this use case in the best way: when the browser renders the page, it actually knows where the fold is and starts loading first the images that are above the fold (lazy or not). So I do not think adding lazy load will impact the largest contentfull paint, and if it does then the benefit of not loading the images not above the fold outweigh the 'cost'.
Again, this is what I think and what makes sense to me... not saying this is technical correct reasoning as I haven't found any information on this.
regards,
Ruud
Thanks for reaching out.
The adding the lazy loading attribute on the images instructs the browser to do what they seem fit. So it is your visitors browser that has the logic to lazy load or not.
When ochResponsiveImages processes the page it doesn't see the page as it is rendered, but it sees HTML code. So there is no way to determine if an image is above or below the fold. next to that, the fold differs on the visitor his device: a mobile device in portait has a different 'fold' then a desktop.
So the only thing we can do here is turn them all on, or all off.
I do not think this is an issue as the browser probably evolved to solve this use case in the best way: when the browser renders the page, it actually knows where the fold is and starts loading first the images that are above the fold (lazy or not). So I do not think adding lazy load will impact the largest contentfull paint, and if it does then the benefit of not loading the images not above the fold outweigh the 'cost'.
Again, this is what I think and what makes sense to me... not saying this is technical correct reasoning as I haven't found any information on this.
regards,
Ruud
Please Log in to join the conversation.