Defer loading of box images, and animating boxes

I noticed that I can’t defer the loading of the image inside a “wide box” element (though lighthouse seems to think I should be able to). I suppose this is not a common thing, but is it possible in the HTML5 standard?

Also, is animating a box element planned for the future? (Similar to how we can currently animate an image or text element)

I’m not sure what lighthouse is referring to. A box image is always deferred because it’s loaded after css is interpreted. If lighthouse expects it to be further deferred to when the browser is idle, then that’s not currently possible.

There are layout hierarchy/containment issues (not exposed in the Sparkle canvas) that make box animation not as straightforward as for other elements. You can however animate a group that contains a box, so that’s a workaround.

2 Likes

Perfect workaround - thanks!

For lighthouse, I am not sure - its eating half-a-second of my mobile load time, but maybe its not visible in a real world scenario (only in the scoring). Since you seem to be adept at SEO and page performance, I just thought you might want to know about this. See attached screenshot of my score from www.hannondepalma.com/m/ .

Cheers,

Chris

Because this box image is deferred it will delay showing the image correct? No way to change this right? I ask because an animated group that contains a box with an image loads late initially. No way to avoid this?

I’m not sure exactly how late is late for you. A browser triggers image loading of actual image elements as soon as possible, even before having downloaded the whole page.

For images that are inside box backgrounds it triggers loading them as soon as they are noticed in the page CSS. Now because Sparkle has the CSS optimization (placing CSS for the top of the page directly inline in HTML), images for box backgrounds are triggered immediately as well. For box background images that are below the top of the page the loading is triggered as soon as the CSS for the rest of the page is loaded.

All of this is relatively quick though it of course depends on the connection speed, and notice I say “trigger loading”, loading performance depends on image size, on whether you are on http/1.1 or http2, etc. Many factors.

I have noticed a number of sites that members have posted here that use images on the main page that don’t load for awhile. Fine after the image is cached. My personal site does this. I have a fast internet connection. Not a big deal. Mostly just trying to figure out how this works. Your explanation makes sense. Thanks.

Possibly just the large image size (inevitable for a 1600x1000 jpeg). Another possibility is the prioritization of image loads, the browser starts loading all images on the page at once, and smaller or non visible images compete with the visible ones. Another possibility is bandwidth throttling on the web host.

1 Like