Save the bandwidth, and speed up the page rendering by avoiding loading images that aren't visible to the user.
The browser loads all the files necessary for the page to render the site as you expect. This implies that all items, including those images that aren’t visible and haven’t got the lazy loading technique, will be requested.
If all of your images are attempting to load at the same time this can cause loading performance issues:
- The event onload attached to the
windowthe global object will be called with a long delay because of waiting to load all dependent resources such as stylesheets and images.
- Browsers limit the number of HTTP connections with the same domain name (usually between 2 and 8) at the same time. Opening too many HTTP requests for images slows down loading them.
- More bandwidth will be required from the website visitors to see your page.
To fix the issue add
loading="lazy" attribute to the image:
<img loading="lazy" src="example.webp" alt="Alternative image description" width="600" height="600" />
Additionally, you may consider using an attribute
fetchpriority="high" to your Largest Contentful Paint (LCP) image to get it to load sooner:
<img src="example.webp" fetchpriority="high" alt="Alternative image description" width="600" height="600" />
Note that if no dimensions are specified for the image, or if the image needs to be resized (too big or too small), the browser will require a reflow and repaint once the image is downloaded. To prevent reflows, when possible specify the
height of all images, either in the image HTML element or in CSS.
Automatically determine loaded and rendered image out of the viewport
To help determine images that are loaded and rendered outside of the visible part SiteLint Platform has the rule