In my Angular Project I am trying to improve the Lighthouse performance score.
Apparently, an image affect negatively the performance score. In the Lighthouse console I see the following suggestion:
Preload Largest Contentful Paint image
0.45s
If the LCP element is dynamically added to the page, you should preload the image in order to improve LCP. Learn more about preloading LCP elements.LCP
So, by following some discussion, I tried to add this line in the header of the index.html file:
<link rel="preconnect" fetchpriority="high" as="image" href="https://example.com/test/img1.webp" type="image/webp" />
But the performance didn't change and the performance are still low. What is wrong, in my image preload strategy?