Improved LCP by prioritizing the first image or carousel block

[Manik-Khajuria-5]

Issue

Contributes to #7732

---

PR DESCRIPTION

This PR introduces an LCP (Largest Contentful Paint) optimization mechanism for Volto when rendering pages that include image-heavy content.

---

Problem Addressed

Volto currently renders all image blocks with loading="lazy", including the first image on the page, which often becomes the LCP element.

What This PR Adds

I implemented a utility function getLCPBlockId(content) that inspects the blocks JSON and identifies:

• the first Image Block, or
• the first Listing block

Using that result, the rendering logic now:

• Loads the first LCP candidate image eagerly (loading="eager" + fetchpriority="high").
• If the first block is a carousel, only the first carousel image is eager; all others remain lazy to avoid regressions.

---

• I signed and returned the Plone Contributor Agreement, and received and accepted an invitation to join a team in the Plone GitHub organization.
• I verified there aren't other open pull requests for the same change.
• I followed the guidelines in Contributing to Volto.
• I successfully ran code linting checks on my changes locally.
• I successfully ran unit tests on my changes locally.
• I successfully ran acceptance tests on my changes locally.
• If needed, I added new tests for my changes.
• If needed, I added documentation for my changes, either in the Storybook or narrative documentation.
• I included a change log entry in my commits.

---

Closes #7732

---

[wesleybl]

It's best to keep this in configuration in config.settings so that add-ons can add blocks. For example:

    ....
    lcpEligibleBlocks: {
      image: (block) => !!block.url,
      listing: (block) => block.variation === 'imageGallery',
    },

See: https://github.com/plone/volto/blob/main/packages/volto/src/config/index.js#L60

[wesleybl]

Several other blocks can contain images, such as LeadImage, Teaser, and Video. Even the Slate block.

[Manik-Khajuria-5]

Okay, sure I’ll make these changes as soon as possible

[Manik-Khajuria-5]

I have made required changes. Can u please review it again @wesleybl

[wesleybl]

Try doing this:

import '@plone/volto/config';

In the tests that resulted in errors, this will ensure the config file is populated.

[Manik-Khajuria-5]

ok

[Manik-Khajuria-5]

I’ve made the suggested changes and tested everything locally again. At the moment, there are no failing tests on my end @wesleybl

[wesleybl]

Hmm, it looks like this won't work. You can undo what you did. You'll have to fill in the configuration in the tests yourself. See:

https://github.com/plone/volto/blob/main/packages/volto/src/components/theme/Navigation/Navigation.test.jsx#L12-L15

Run the tests locally before committing.