fix: Added fetchPriority and removed

[felipelourencoacct]

What problem is this solving?

Adds fetchPriority to ProductImage to improve LCP, as recommended by PageSpeed Insights.
Removes data-vtex-preload to ensure fetchPriority takes effect.

How to test it?

Workspace

Screenshots or example usage:

Before

After

Describe alternatives you've considered, if any.

Related to / Depends on

How does this PR make you feel? 🔗

![](put .gif link here - can be found under "advanced" on giphy)

[vtex-io-ci-cd]

Hi! I'm VTEX IO CI/CD Bot and I'll be helping you to publish your app! 🤖

Please select which version do you want to release:

• Patch (backwards-compatible bug fixes)

• Minor (backwards-compatible functionality)

• Major (incompatible API changes)

And then you just need to merge your PR when you are ready! There is no need to create a release commit/tag.

• No thanks, I would rather do it manually 😞

[vtex-io-docs-bot]

Beep boop 🤖

I noticed you didn't make any changes at the docs/ folder

• There's nothing new to document 🤔
• I'll do it later 😞

In order to keep track, I'll create an issue if you decide now is not a good time

• I just updated 🎉🎉

[vmourac-vtex]

/review

[qodo-code-review]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Browser Support Verify that adding the fetchPriority attribute does not cause TypeScript or runtime issues in environments/browsers that do not support it, and that the new JSX typing change correctly propagates to all usages of . ref={imageRef} className={`${applyModifiers(handles.productImageTag, 'main')}`} style={{ width: '100%', height: '100%', maxHeight: maxHeight || 'unset', objectFit: 'contain', }} src={imageUrl(src, DEFAULT_SIZE, MAX_SIZE, aspectRatio)} srcSet={srcSet} alt={alt} title={alt} loading={index === 0 ? 'eager' : 'lazy'} fetchPriority={index === 0 ? 'high' : 'low'} // WIP LCP Targeting Confirm that index === 0 always corresponds to the LCP image in all product image layouts; otherwise, fetchPriority 'high' may be assigned to a non-LCP image, reducing effectiveness. ref={imageRef} className={`${applyModifiers(handles.productImageTag, 'main')}`} style={{ width: '100%', height: '100%', maxHeight: maxHeight || 'unset', objectFit: 'contain', }} src={imageUrl(src, DEFAULT_SIZE, MAX_SIZE, aspectRatio)} srcSet={srcSet} alt={alt} title={alt} loading={index === 0 ? 'eager' : 'lazy'} fetchPriority={index === 0 ? 'high' : 'low'} // WIP

[vmourac-vtex]

/improve

[qodo-code-review]

PR Code Suggestions ✨

Category	Suggestion	Impact
General	Align fetch priority with loading Ensure that fetchPriority aligns with the loading strategy to avoid deprioritizing non-lazy images on slow networks. Use 'auto' for non-hero images to let the browser decide and reserve 'high' only for the primary image. This prevents unintended resource contention and improves overall page performance. react/components/ProductImages/components/ProductImage.tsx [108-109] loading={index === 0 ? 'eager' : 'lazy'} -fetchPriority={index === 0 ? 'high' : 'low'} +fetchPriority={index === 0 ? 'high' : 'auto'} Apply / Chat Suggestion importance[1-10]: 6 __ Why: The suggestion correctly points out that using fetchPriority='auto' for non-hero images is a better practice, as it allows the browser to intelligently prioritize resources, potentially improving performance over a fixed 'low' priority.	Low
	Remove redundant title attribute Avoid duplicating alt text in the title attribute, which can create redundant announcements for assistive technologies. Remove title or set it only when it conveys additional, non-duplicative information. react/components/ProductImages/components/ProductImage.tsx [104-107] src={imageUrl(src, DEFAULT_SIZE, MAX_SIZE, aspectRatio)} srcSet={srcSet} alt={alt} -title={alt} [To ensure code accuracy, apply this suggestion manually] Suggestion importance[1-10]: 5 __ Why: This is a valid accessibility improvement, as duplicating the alt text in the title attribute can be redundant for screen reader users; however, this code was not modified in the PR.	Low
	Ensure centered image positioning Explicitly set objectPosition to ensure predictable centering when using objectFit: 'contain', preventing unexpected cropping or alignment issues across browsers. This reduces layout shifts in edge cases. react/components/ProductImages/components/ProductImage.tsx [98-103] style={{ width: '100%', height: '100%', maxHeight: maxHeight || 'unset', objectFit: 'contain', + objectPosition: 'center center', }} [To ensure code accuracy, apply this suggestion manually] Suggestion importance[1-10]: 4 __ Why: The suggestion to add objectPosition is a good practice for ensuring consistent image centering with objectFit: 'contain', but it addresses an issue not directly related to the PR's changes.	Low
More

[vmourac-vtex]

/improve --pr_code_suggestions.commitable_code_suggestions=true

[qodo-code-review]

Suggestion: Avoid setting a low fetch priority when loading="lazy" is used; browsers treat lazy images as low priority automatically, and explicitly forcing low can harm above-the-fold cases when index logic changes. Only set fetchPriority="high" for the first image and omit it otherwise to prevent unintended network prioritization issues. [general, importance: 6]

[Copilot]

Pull Request Overview

This PR improves LCP performance by adding fetchPriority to the ProductImage component and removing the data-vtex-preload attribute, following PageSpeed Insights recommendations.

• Added fetchPriority attribute with 'high' priority for first image and 'low' for subsequent images
• Removed data-vtex-preload attribute to ensure fetchPriority takes effect
• Updated changelog to document the changes

Reviewed Changes

Copilot reviewed 2 out of 3 changed files in this pull request and generated no comments.

File	Description
react/components/ProductImages/components/ProductImage.tsx	Added fetchPriority attribute and removed data-vtex-preload to optimize LCP
CHANGELOG.md	Documented the ProductImage component changes

[vtex-io-ci-cd]

Your PR has been merged! App is being published. 🚀
Version 3.178.4 → 3.178.5

After the publishing process has been completed (check #vtex-io-releases) and doing A/B tests with the new version, you can deploy your release by running:

vtex deploy vtex.store-components@3.178.5

After that your app will be updated on all accounts.

For more information on the deployment process check the docs. 📖