Preload largest contentful paint image

In general, it's very important to have the most important resources of your website available from an early stage of the page load. However, some of these important assets might be loaded from a CSS or JavaScript file and this may take longer than desired.

When an image is the Largest Contentful Paint element, PageSpeed may recommend preloading it.

In these cases, we can use  <link rel="preload"> to fetch this element sooner.

To achieve this you can follow these steps:

1. Install the Head & Footer Code
2. Go to the page where you want to preload the images
3. Add the following preload <link> tags to Header & Footer Code > Head Code: 
   If you are using the same image for both mobile and desktop: 
   <link rel="preload" href="https://yourdomain.com/your-lcp-image.jpg" as="image">
   
   If you are using different images for desktop and mobile: 
   <link rel="preload" href="https://yourdomain.com/your-lcp-image-mobile.jpg" as="image" media="(max-width: 480px)">
<link rel="preload" href="https://yourdomain.com/your-lcp-image-desktop.jpg" as="image" media="(min-width: 481px)">
   
   Replace the example with the correct URL(s) for the image(s) given by PageSpeed.
4. Clear WP Rocket's cache

Please see this article for more information.