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:
- Install the Head & Footer Code
- Go to the page where you want to preload the images
- 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.
- Clear cache