Lighthouse: Preload Largest Contentful Paint image
Overview
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.
The green website looks more visually complete at 0.2s than the red website.
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 triggers this audit only if all of the below conditions are true:
- The LCP image wasn't loaded via
<link rel="preload"> - The LCP image was loaded over the network
- The LCP image wasn't discovered from the main document (e.g., LCP image being delayed in the critical request chain)
- The LCP image was loaded from the main frame (i.e., not loaded from an
<iframe>)
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 asset.
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"/>