Preload Largest Contentful Paint image

Preloading the Largest Contentful Paint (LCP) image can display your hero image much earlier in the page load.

A fast LCP enables your page visitors to consume content sooner, enhancing the overall user experience.

As LCP is one of the Web Vitals, there are SEO benefits to improving LCP.

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.

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:

<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"/>

Or you can preload Largest Contentful Paint image with Staq

Under Site Optimizer > Media, copy and paste the image link that you wish to preload images under the Preload images section.

If you wish to preload WebP images, please ensure you also add the WebP link.

Try Staq
Create/Migrate a WP site and get up to 90 days free in dev mode for each site.
square-for-kb3