Improve LCP by prioritizing the first image or carousel block #7732
Description
Is your feature request related to a problem? Please describe.
Currently, Volto does not explicitly optimize the loading of the Largest Contentful Paint (LCP) element. In most cases, the LCP corresponds to the image in the first image block or in the first listing block configured with the carousel variation. Since blocks are rendered generically, the LCP image is often loaded with loading="lazy" and without fetchpriority="high", negatively impacting LCP timing and Core Web Vitals metrics.
Describe the solution you'd like
Introduce a mechanism to parse the blocks JSON and identify the ID of the first image block or the first listing block using the carousel variation. This ID should then be passed down to the block rendering logic so the corresponding LCP image can be rendered without loading="lazy" and with fetchpriority="high", ensuring the browser prioritizes loading this critical resource.
Describe alternatives you've considered
An alternative approach would be to perform this block analysis on the backend, where the blocks JSON is already parsed. The backend could explicitly mark the block or image that is a candidate for LCP, simplifying the frontend logic and avoiding additional client-side processing.
Additional context
This improvement would have a direct impact on LCP metrics and overall performance scores in Volto, especially on pages where above-the-fold content is composed of image blocks or carousel-based listings. The solution should take into account the actual rendering order of blocks and variations that internally render images, such as listing carousels.