Description
This rule determines if the image is being loaded, but is not visible at the time the page has loaded. This helps to optimize the loading of the page by postponing loading the image until it’s expected to be needed, rather than immediately during the initial page load.
Examples of suggested code for this rule:
<img loading="lazy" src="example.png" width="100" height="200" alt="An alternative description of the image"/>
How to fix it
Consider adding an attribute loading="lazy"
to defer loading an image that is not visible at the time the page has loaded.
Additionally, when possible, we recommend to add width
and height
to avoid shifting layout.
Known Limitations
Experimental. Expect behavior to change in the future.