Lazy loading is getting HTML support in modern browsers. so you can add that attribute to your img tag

loading="lazy"
Unfortunately, this probably doesn’t cover all that you need so I would suggest adding a js backup. I think it is pretty clearly laid out in this post.

So for your image tag, it would look something like this:


now anytime you swap an image, it will update both the data-src and the src

Lazy loading requires you to add a js lib to your pages and modify a little the code of your images while editing it.– View source code and change the src with data-src and add the class lazy to your classes. here is an example


you can learn more here.

https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video

this is the lib I’m using

https://github.com/malchata/yall.js

If this post helped you resolve your issue, please consider marking it as the solution. Thank you for supporting our HubSpot community.

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on pinterest
Pinterest
Share on reddit
Reddit
Share on vk
VK
Share on tumblr
Tumblr

Leave a Comment

Your email address will not be published. Required fields are marked *

On Key

Related Posts

What is eCommerce ?

What is eCommerce today in 2021

Understanding What Is Ecommerce   What is eCommerce? Ecommerce is a rapidly growing online shopping market that has many similarities to the early Internet. Ecommerce