Reserve cover image space to prevent CLS in list view search results #12825

Feature Request

Problem / Opportunity

List view search results shift vertically when cover images load because the browser doesn't reserve enough space for the covers. The current CSS sets width and max-height, but doesn't assign a height value that can be used to reserve space during initial layout. This affects users browsing search results for specific books or categories because the page moves as covers load.

The layout shifts may reduce user experience and produce a lower Lighthouse CLS performance score.

Under a consistent Lighthouse testing environment, CLS should be at or below 0.1. The cover image slots should remain stable while images load, and the cover images themselves should render correctly without any distortion.

Proposal

Add an aspect-ratio for search result cover images in list view so the browser can reserve space before the images load. This will reduce the layout shift on search result pages in list view, with minimal changes to the visual design and layout of the covers.

Extend the existing selector in static\css\components\search-result-item.css

.searchResultItem .bookcover img {
    height: auto;
    aspect-ratio: 180 / 270;
    display: block;
}

Chrome Lighthouse report before changes:

Chrome Lighthouse report after changes. Cache was disabled to prevent previously loaded image sizes from being reused:

Breakdown