Recommendations

Lighthouse
Metrics
Audits
PageSpeed (Legacy)
YSlow (Legacy)

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.

Fast vs slow LCP
Preloading your LCP image can improve your LCP time and give the impression that your page loaded faster.
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 checks when the LCP image is inserted into the DOM, and evaluates if preloading the image would save time.

Preload LCP Audit
GTmetrix checks if the LCP image can be preloaded to 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"/>

Summary

6.5.0
 *