VPI: add fetchpriority=high to VPI preload links

[maciejmrozinski]

Adds fetchpriority="high" to image preload links generated in finalize_head() to improve LCP resource prioritization.

This addresses the PageSpeed Insights warning about missing high fetch priority on the preloaded LCP image and helps browsers prioritize loading the main visual content earlier.

[timotei-litespeed]

@maciejmrozinski Thank you for the improvement
We added fetchpriority="high" to the images code, directly there. Please check if that is present
Thank you

[maciejmrozinski]

@timotei-litespeed Thanks for the clarification.
I agree that fetchpriority="high" is already correctly added to the <img> element itself.

However, the PageSpeed Insights warning specifically points to the preload request and suggests adding fetchpriority="high" directly to the <link rel="preload"> as well. That’s why I proposed this change.

My understanding is that PSI treats the preload request and the actual <img> request separately.

[timotei-litespeed]

Is the LCP image as background image?

[maciejmrozinski]

It’s the main product image on a WooCommerce product page, rendered as a standard <img> element.

[timotei-litespeed]

Please check if the image is present in VPI list: mobile and desktop
Also, please send a report and share the ID. How to: https://docs.litespeedtech.com/lscache/lscwp/troubleshoot/#get-a-report-number

[maciejmrozinski]

Thanks for the suggestion. I think we may be talking about two different things.

The LCP image itself is already rendered with fetchpriority="high" on the <img> element, so I'm not investigating an LCP image detection or VPI issue.

What I am referring to is the specific PageSpeed Insights warning about the preload request. PSI reports that fetchpriority="high" should also be present on the generated <link rel="preload"> tag in the document head.

So the question is not whether the correct image is identified as the LCP image, but whether adding fetchpriority="high" to the preload tag is something that should be supported by the plugin.

Could you clarify whether this is expected behavior or if there is a reason why the attribute is intentionally omitted from the preload tag?

[timotei-litespeed]

@maciejmrozinski
Thank you for information about correct VPI images getting detected.
I have a test site and I have a image with fetchpriority added. I run the Google report and I see it as marked

Does not have preload added, just the fetchpriority

[maciejmrozinski]

I think these are actually different test cases.

In your example there is no preload tag at all, only fetchpriority="high" on the <img> element. In that scenario, the PSI check for fetchpriority=high applied is naturally evaluating the <img> request.

In my case, the image is already being preloaded, so there is an additional <link rel="preload" as="image"> request. The PSI warning specifically says that fetchpriority="high" should also be applied to the image preload request, even though it is already present on the <img> element.

That's why I proposed adding the attribute to the generated preload tag. My understanding is that once a preload request exists, PSI evaluates that request separately from the <img> element itself.

[timotei-litespeed]

I see your point. Please make 2 changes:

• fetchpriority="high" add the double quotes before and after high
• change branch to commit to: from main to dev

I will forward the changes the developer team and we will be back with an answer

[timotei-litespeed]

Thank you :)

[maciejmrozinski]

Thanks for reviewing this.

I've made both requested changes:

• updated fetchpriority to use double quotes (fetchpriority="high")
• changed the target branch from main to dev

Thank you for taking another look and for forwarding this to the development team.

[timotei-litespeed]

@maciejmrozinski Changes have been added to dev branch. It will be released in the next versions of LSC(not sure which one, that's why I cannot tell you exactly).

Thank you! :)