Results 1 to 3 of 3
  1. #1
    PROFRBcom's Avatar
    PROFRBcom is online now Private Member
    Join Date
    April 2013
    Posts
    1,828
    Thanks
    1,359
    Thanked 1,069 Times in 690 Posts

    Default Lazy Loading Spritesheets? Easy Method?

    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?

  2. #2
    bpmee is offline Public Member
    Join Date
    January 2004
    Posts
    35
    Thanks
    9
    Thanked 20 Times in 8 Posts

    Default

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

  3. #3
    PROFRBcom's Avatar
    PROFRBcom is online now Private Member
    Join Date
    April 2013
    Posts
    1,828
    Thanks
    1,359
    Thanked 1,069 Times in 690 Posts

    Default

    Quote Originally Posted by bpmee View Post
    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.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •