Lighthouse: Preload Largest Contentful Paint image
Preloading the Largest Contentful Paint (LCP) image can display your hero image or website banner much earlier in the page load.
A fast LCP enables your page visitors to consume substantial content sooner, enhancing their user experience.
As LCP is one of the Web Vitals, there are SEO benefits associated with improving your LCP timings by preloading related assets as well.
How does your site score on this audit?
How does preloading Largest Contentful Paint image affect page performance?
Preloading the LCP image can help your page appear visually complete earlier in the page load, signaling to your visitors that your page content is loading faster.
The LCP element, as the name indicates, is the largest content resource painted by the browser; often this content contains an image (slider, background or hero image, etc.).
Often, the LCP element resource is far down the request chain and a hero element is usually required for onload (e.g., when it is a part of a theme/slider/carousel).
Since you already know what your LCP image is, use
<link rel="preload"> to let the browser know in advance that it needs to load it.
By preloading the image, you cut out the late resource fetch time and the LCP image is immediately inserted into the DOM once it is referenced. This can help your page achieve a faster LCP timing and improve your page experience.
How does GTmetrix trigger this audit?
GTmetrix checks when the LCP image is inserted into the DOM, and evaluates if preloading the image would save time.
If the asset can be preloaded to save time, GTmetrix displays the LCP image and its associated time savings (in ms). Note that this audit has a low impact on your Structure Score.
Note: GTmetrix may still list the LCP image if the time savings are estimated to be zero. This means that the asset can be preloaded due to being requested late in the page load, but depending on when it is inserted into the DOM, there may not be any significant time savings.
How to preload Largest Contentful Paint image?
If GTmetrix flags the LCP image, you can preload it by using a link tag in your HTML header just as you can preload any other key assets.
Add the following code to the
<head> of your HTML:
<link rel="preload" href="/path/to/image.jpg" as="image">
You can also use
<link rel="preload"> with responsive images for faster image loading, as follows:
<link rel="preload" as="image" href="/path/to/image.jpg" imagesrcset="image_400px.jpg 400w, image_800px.jpg 800w, image_1600px.jpg 1600w" imagesizes="50vw"/>