The <img /> tag, responsible for allowing the inserction of images on your site, sometimes it many saem like a harmless tag to the front-end of the site, but this tag, in most cases, sometimes it may be responsible for the long loading delay of your apllication.
But why this happen?
This happens because the moment someone accesses your page, the browser reads your HTML code and them starts making requests to download the images you are using.
So, the result is that the user stays here, with the page loading, until all the images you use on the page are downloaded.
But what's the problem with the user waiting for the site to load?
The problem is that in addition to harming SEO, the user does not have much patience to wait for the site to load, that is, the chances of it closing the site before loading is very high.
Ok, but how to solve this?
One of the best ways to solve this problem is to allow loading of images is done on demand, as the user scrolls down the page, the browser will download only the images that the user will see!!
We call this lazy loading
In this case, if there is a very heavy image (file size) in the footer of the site, and the user does not scroll to the end, that image will never be downloaded!!
How to add this lazy loading attribute in my applications?
You need to add the loading attribute to the img tags, like this:
After adding this attribute to the image, the browser will only download it when it is close to appearing on the screen, which means that even loading the image on demand, when it comes time for it to appear, it will have already been loaded!!
Conclusion on using this attribute
We can conclude that with the use of this attribute, in addition to gaining performance in our application, we do not harm the site's SEO and avoid loading all the images on our site at once.
Top comments (0)