Below image shows an image being downloaded by chrome from my site. This image is served from Google CDN. I have throttled the network to fast 3g to simulate lighthouse. Downloading LCP image at 1.53 second is affecting core web vitals badly in lighthouse score. How to reduce this time? Image is 31KB. Image backend is Cloud storage. The image has Cache-status: hit in the response header.
There are always unnecessary delays when HTML and LCP data are delivered from different servers. This is because only after the connection to the source server has been established and the browser has read in the required information then finally a connection has to be established to another server to fetch the resources.
The solution is to make sure that whether CSS or an LCP image needs to be retrieved: all resources needed above the fold should be delivered from the same server. One option is to put the HTML on the CDN as well, so that everything comes from there.
If you look at the waterfall, the problem becomes clearer.
preconnect<link rel="preconnect" href="https://example.com" />
The preconnect keyword for the rel attribute of the element is a hint to browsers that the user is likely to need resources from the target resource's origin, and therefore the browser can likely improve the user experience by preemptively initiating a connection to that origin.
via MDN
Personally, I would test with a 4g connection. Below is a graph that shows the share of connection types over time with projections for 2023, 2024, 2025.
Here's the dev tools settings:
Nevertheless, Frank Stürzebecher offers good advice.
