Lazy Loading Spritesheets? Easy Method?

[PROFRBcom]

We use spritesheets/css on a few pages. It is useful if you are concerned about saving http requests and a shaving a handful of kb off a series of image loads.

However, since the images load as backgrounds, our normal method of lazy loading does not work.

Any other easy methods to lazy load background images / css spritesheets?

[bpmee]

Couple ideas:

1) Use a CDN for the sprite. It doesn't necessarily give you the lazy load effect, but it will load faster.

2) Preload the sprite? This helps my .woff font files go much faster.

3) Defer and use placeholder CSS that doesn't cause too many Content Layer Shifts (this is just a brainstorm, not sure if it's even practicable depending on your site).

[PROFRBcom]

Couple ideas:

1) Use a CDN for the sprite. It doesn't necessarily give you the lazy load effect, but it will load faster.

2) Preload the sprite? This helps my .woff font files go much faster.

3) Defer and use placeholder CSS that doesn't cause too many Content Layer Shifts (this is just a brainstorm, not sure if it's even practicable depending on your site).

Thanks for the reply.

1) Already using CDN, it is not an issue of loading fast, it is simply an issue of trying to provide an even better experience for our readers with slow connections.

2) Hmm, preloading an image, didn't think that was a thing. Interesting idea, but that is not going to solve the issue. I am specifically looking for ways to lazy-load spritesheets that are NOT immediately visible. However, because they are background issues, they LOAD with the page, regardless of if they are above the fold or not and our normal method of lazy-loading does not work on background images.

3) Using something like base64? Hmmm, we did that in the past but Google didn't recognize it as actual lazy-loading so we ditched that concept a couple years ago. I wonder if Google treats it differently now, it would not be the first time they flip-flopped how they view things.