Performance: Optimize loading of image library during initial load

[Trapsta]

Feature Description

In initial page load , fetching and rendering the image library items impacts the page load performance yet these items are not critical on initial load. We should defer fetching and rendering this items until the page loads which could help speed up the page load and reducing the total blocking time when the browser is fetching the items. While loading , we should display a background color placeholder/skeleton element to minimize the cumulative layout shift.

Alternatives Considered

Additional Context

• #8255

[swissspidy]

Any specifics on how rendering should be deferred there? Were you thinking of Suspense, requestIdleCallback, or something else?

While loading , we should display a background color placeholder/skeleton element to minimize the cumulative layout shift.

FWIW, we're already working on this in #9647, #9550, and also #9685. Right now they're just black placeholder backgrounds.

Where are layout shifts happening?

[Trapsta]

@swissspidy I believe in this case Suspense would be most suitable since it's more integrated into the framework and a bit more flexible but either of those could be good techniques to resolve this. For the layout shifts, currently these is very minimal just noting that we should be careful not to introduce any layout shifts while working on this.

[spacedmonkey]

I wonder if #9740 would help here.