How to Preload Largest Contentful Paint Image – 2 Simple Steps

Looking to fix the “Preload Largest Contentful Paint Image” issue? Surely after the speed test on Pagespeed Insights, you have come across this issue. Although this issue is rare many sites have this issue. This issue comes under one of Core Web Vitals Metrics, Largest Contentful Paint (LCP). So we can say we are going to Optimize LCP score for a good website speed.

As a good website owner, our goal is to provide better user experiences, one of the main things to achieve this is to get our website to load as soon as possible. And Google announced a new ranking algorithm called Core Web Vitals (CWV). CWV is all about User experience and Page Speed.

Also, there are several studies with real cases of companies that by optimizing the load of their site have managed to sell more, have more visits, in general impacting the profitability of the business, so this becomes a critical issue.

So in this article, we will learn how you can fix Preload Largest Contentful Paint Image issue.

To fix Preload Largest Contentful Paint Image, we will use <link rel=”preload”> tag. So let’s learn about Preload and also Prefetch because both are too similar. So that you don’t have any confusion.

What are Preload and Prefetch?

Preload and Prefetch are a web standard that allows us to improve the performance of our site, taking control of when the resources that are important to us are loaded.

Preload is like saying to the browser, “hey download this soon because the user is going to need it right away” and the browser starts its download even when it is reading the HTML.

Prefetch is like saying to the browser, “hey download this but it doesn’t have that much priority”, suddenly the user is going to need the resource at some point and the browser decides when is the best time to download it. If the user changes their view, the download will still continue in parallel.

Remember, you mustn’t use this to load all the resources of your site. Great power requires great responsibility.

How to Preload Largest Contentful Paint Image?

1. Go to WP Admin Dashboard ➔ Appearance ➔ Theme Editor.
2. Then add the following code in functions.php :

add_action('wp_head', 'preload_image_nonamp');
function preload_image_nonamp(){
if (has_post_thumbnail()) {
$attachment_image = wp_get_attachment_url( get_post_thumbnail_id() );
echo '<link rel="preload" as="image" href="'.$attachment_image.'">';
} 
}

Conclusion

Now run a Speed test again and see Preload Largest Contentful Paint Image issue removed or not?

If this issue has been removed but still having a slow website or having more issues that slowing down your Website Speed. But you don’t have to worry, we will do this Hard work for you.

Our professional developers’ team will fix all types of CWV (Core Web Vitals) errors significantly for our clients for the maximum Website Speed ​​and Performance. So Check Our Affordable Pricing, so we can start Optimising your website.

If you have any question or suggestion, then don’t hesitate to share thoughts in the comment box.