Defer off-screen images

I have a lay-outer set up which houses 4 container boxes, each with an image inside. The lay-outer is set as a slider so the first image is classed as the LCP, the other 3 are off screen.

Is their a way for me to defer/lazy-load the loading of the other 3 boxes/images in order to lower time to interactive. I’ve looked at the defer & async attributes, but not really sure if these are the right ones to use or how to actually implement them in my code.

Thanks

Do you have any links to the defer/async attributes?

No, I haven’t really been able to find what I am looking for, or if I have then I may not have understood what I was looking at, I am still a bit of a novice when it comes to coding.

The reason why I am looking for this is, is PageSpeed Insights is recommending to defer/lazy load the offscreen images to allow critical resources etc. to load first.

Could you point me in the right direction, thanks.

Ahhh. That makes sense.

Wix actually Lazy loads images by default - Site Performance: How Wix Improves Your Site's Loading Time | Help Center | Wix.com