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.
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.